Button is a widget in android which is used to perform click event on the form i.e. for submitting the form data or to trigger/start some operation button is being used. There are different types of button widgets available in android they are Button, Image Button, Radio Button, Check Boxes and Toggle Button out of which radio button and checkboxes are used as selection widget i.e. they are used when we have to select from multiple options. Toggle button have two states that is on and off states, as the name indicates it toggles between two states i.e. if it is ON and we click it moves to off state and vice-a-versa. So we are left with Button and Image Button to submit the information. Almost all the property of Image Button and Button are same but the difference is that on image the click effect is visible on clicking the button, where as in normal button if we apply background to it click effect is not visible. So, in android we need to customize the button as per as the requirement of the application. In android default shape of button is rectangle, and default colour is grey which need to be changed while creating application like the shape of button need be changed to circle or oval, background colour applying images to the button and applying text with images over the button. There are different ways to customize this button. So we will see the different ways to customize the button in android.
So, let’s start the customization of button in android using images
Activity: Creating application Customization of button
Customizing button using image is the most common and general practise of customizing the button. Firstly, create a new android application in eclipse Eclipse file->New->Android Application Project. So for customising the button using image you require the image of button which you need to apply as its background. So place the images of button in res->drawable. Like in my case i have place the image name as one.png in drawable folder.
Now in your main.xml create a button and give the background property to it giving the name of image you want in its background. Like in my case it is android:background=”@drawable/one”. Below is the code snippet of main.xml with two buttons one with image and another without image.
Listing 1: xml to create a button in Android
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:background="@drawable/one" /> <! -- android:background property is used to apply background to a to button. And @drawable/one means there is a image name as one in your drawable folder we are applying it as background to this button. --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>
When you run your application on the emulator it following output will be generated.
Figure 1: Application running
But when you click on the button it will not display the click effect like a normal button do. So, for the user it is very difficult to find out whether the button is pressed or not and they keep on pressing the button which may crashes the application. So for creating a click effect you have to make another xml file in drawable folder. res -> drawable -> button_menu.xml.
In button_menu.xml file you have to write define the condition for button pressed you have to display which image and when it is not pressed which image it should display. For that you have to write a selector. In that we have to define the different states of button and the background for those states. The state of a button is pressed state i.e android: state_pressed, button is in focus.
Below is the code of button_menu.xml
Listing 2: selector code to define various button states
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" // these indicates that button is pressed android:drawable="@drawable/one"> //these is the background image when button is pressed </item> <item android:drawable="@drawable/two"> //these is the normal state of button when it is not pressed. And the background is provided when it is not pressed. </item> </selector>
And also change the background property of button i.e. android:background=”@drawable/button_menu”
Applying the button_menu xml to the background of button.
Now, again run the application. And click on the button and see the click effect. When the user click on the button the background of the button changes.
Figure 2: Output when button is clicked
2. Changing the shape of button
As already told default shape of button is rectangle so now I will tell you how to create OVAL button in android.
For that you again need to create an xml file in your drawable folder, and name it as button_shape.xml
The codes for button_shape.xml are as follows:
Listing 3: Code to define button shapes
<? xml version="1.0" encoding="utf-8"?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape="oval" > //There are many other shapes also available they are rectangle,ring,line and oval <solid android:color="#ffcccc"/> //applying the colour to the button. <stroke android:width="2dp" android:color="#ffffff"/> </shape>
And now give the background to button
Figure 3: output how your button will now look
3. Now we will see how make Corners of button Round.
To create a button with round corners you need to create a new xml file in your drawable folder round_corners.xml. And then you have to define now much round corners you want to make in its xml file.
Below is the code of round_corner.xml
Listing 4: Code to define rounded corner button
<? xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> //Defines the shape of button you wants <solid android:color="#eeffff"/> <corners android:bottomLeftRadius="8dp" //how much curve you want from bottom left corner android:bottomRightRadius="8dp"//how much curve you want from bottom right corner android:topLeftRadius="8dp""//how much curve you want from top left corner android:topRightRadius="8dp"/> "//how much curve you want from top right corner </shape>
And give background property to button i.e. android:background=”@drawable/round_corner”.
Here round corner is the name of xml file.
The output is:
Figure 4: Output
4. Customization of Button using Text and Image
Many of times in your application you require a button containing both text and image. Like Text describing the action and a image corresponding to that action. Image helps user to find more easily and faster the button for performing a particular task. Like search/find, delete, edit etc. one way to archive this is by using a image having both icon and text. And the second approach is placing text and image on button.
So now we will see how to achieve this thing in android. So firstly create a button in your xml file. And places an icon image in your drawable folder say icon.png. Below is the code of main.xml in which button is used along with image.
For achieving this I have use the property android:drawableLeft there are other more properties like drawableRight, drawableTop, drawableBottom can be used to place image along with text in on button in android.
Listing 5: Button code with image and text
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:id="@+id/button3" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="FaceBook Share" android:drawableLeft="@drawable/icon" android:drawablePadding="10dp"/> </LinearLayout>
You can also write text in multiple lines like facebook in one line and share in second line. For that you have to simply use android:text=”Facebook \n share” when you run these application on emulator or on device the output will displayed in two lines. But in layout view it will display like facebook \n share only, so don’t worry for that.
The output for the above layout is shown below:
Figure 5: Result Layout
And the folder hierarchy for the application is shown below.
Figure 6: Folder hierarchy
The customization of widgets is done in order to make UI feel richer in terms of appearance and making it more users friendly. Like we can also place images of icons on button .In these tutorial we have seen customization of button using images, Changing the shape of buttons, making corners round of a button, and using text along with image on button.