ANDROID TUTORIAL PART 5: AFRICAN HAIRSTYLE APP

The time we are waiting for has come. This part 5 of our android tutorial will focus on programming our intro activity page for our app. If you have not read the previous post where we have discussed everything about android and went ahead to create a new android project you can do so by using this link

It is time to fire up your IDE. Once your IDE is done loading, open the android project you have created. We will start with the interface design for our android app.

There are different ways to create android application interface. You can use an external xml file that links to your activity page or Java code.

In this tutorial we are going to use xml file. There are many advantages of using xml file over Java code. We will not go into details. Using xml file will prevent our activity page from being clustered with UI codes.

Open activity_main.xml

Remember that when we discussed about the android application folder structure, we emphasised what folders and files are used for. If you are using eclipse, your IDE has already created this file for you automatically when your project is created.

To open this file, go to your project res folder, open the res folder and then click on layout folder. You will see your activity_main.xml file when the layout folder opens. Double click on the file to open it in your IDE.

If you have successfully followed this processes, by now you will see an image like this if you are using Eclipse IDE

UI1

Eclipse provides two interfaces when working with xml files. You can use the design view or the code view. The design view has all the components and controls used for interface design. You can drag and drop any control you want to use in the layout.

The root layout is the parent contain that contains other layouts and controls. The image below shows the deign interface.

UI2

Before we start with writing codes you should add the project images you downloaded in the previous lesson to your project drawable folders. I will also suggest you read up on android drawable if you do not have an idea on how android handles image responsiveness.

The first thing we will do in our xml file is to add a background image on the parent layout. I will use the code view in Eclipse for this tutorial. So to add a background image simplyadd this line of xml code to the root layout

android:background=”@drawable/intro”

Remember that our background image is named intro and it is present in the drawable folder in our project.

We will add a button in front of our background image. When this button is click, it will take the use inside our application.

We will use the button control provided by android to add a button in our project.

Copy and paste this code in your root layout.

<Button

android:id=”@+id/start_button”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_alignParentBottom=”true”

android:layout_alignParentRight=”true”

android:layout_marginBottom=”20dp”

android:layout_marginRight=”15dp”

android:background=”@drawable/startbutton”/>

That is all the xml code we need on this page. By now your activity_main.xml file will look like the picture below

braid1

We will now proceed to the MainActivty page which will use our xml file for its interface display. Move to the src folder and double click on the MainActivity.java file. Delete all the code on the page except your package name. Copy and paste the following code below.

 

I assumed that you have a basic knowledge of Java language so I will not explain what import is and package name in Java application. Please not that I am using Fragment in this application. If your project does not include a Fragment then you should copy all the code in the Fragment onCreateView to your Activity onCreate callback function.

I will focus on the codes in onCreateView callback method of the inner Fragment class. Our interest is to add an event listener interface to the button we created so that when someone clicks on it something will happen.

We will use the Activity class method findViewById and pass the reference id of our view to the method as shown here

startButton = (Button)rootView.findViewById(R.id.start_button);

The startButton is an instance of our Button class. So we will attach an event listener using the setOnClickListener method.

This is all the code for our intro Activity page. You can run your application now. If everything went well, you will see the following image in your device or android emulator.

mintro

This brings us to the end of our tutorial five. We will continue where we stop in our tutorial six which will be posted soon. But before then if you have any question or suggestion just bring it forward.

Add a Comment