Welcome to the second part of “The Beginner’s Guide to Android Development“. In this tutorial, we will continue to learn some basic android development techniques, such as adding button to our app using XML. If you haven’t already, be sure to read the part 1 of this series first!
The source code we are going to use in today lesson is what we have working on the previous published post called “Android Beginner: Creating Splash Screen“. Let’s open up the source code in Eclipse editor and start our tutorial!
In Android system, developer use XML layout to defines and organizes the visual structure for user interface for activity or app widget. If you want to know more about Android XML layout, please read our previous article named “Android Linear Layout For Absolute Beginner”
Let’s open up the “main.xml” file. Do this by choosing /res/layout/ folder, double click on the main.xml file. This main.xml file is auto generated by Eclipse editor when we creating Android project, this XML layout has a visual container(Linear Layout) that contains a text view which displaying “Hello World, MainActivity!” on our app’s main screen.
Now, we would like to add in extra UI – Button into our app’s main screen. Following illustrate how our XML codes looks like:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:id="@+id/sound_efx" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/btn_sound_efx" android:textSize="25dp" android:textStyle="bold" /> </LinearLayout>
As you can see above, we added <Button> into the main.xml file. The button element contains an id named “sound_efx”, its width and height, text size*(dimension), text style and text string named “btn_sound_efx”.
Please bear in mind that it is a good practice to separate your XML layout with string resources file. This allows you to update every occurrence of the word “btn_sound_efx” in all layouts at the same time by just editing your string resources file.
To edit the text of the button, let’s open up the string resources file – “strings.xml” which stored under /res/values/. Then add a new row of string element inside the strings.xml file:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MainActivity!</string> <string name="app_name">myApp</string> <string name="btn_sound_efx">Sound Effects!</string> </resources>
Please make sure that the string name of “Sound Effects” has same with one we specified in main.xml!
Save your documents and run it on emulator, you should able to see a button shows on your app’s home screen.
In this tutorial, you’ve just learned to add a button into Android application using XML layout. You also learned to edit the button text value using string resources.
In next tutorial, we will learn how to implement click handler to the button. Stay tunes!