Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to customize different buttons in Android

Today we are going to learn “Customization of Button” in Android, in this article we will learn how to give different shape to button, also how to set background and image to button.

Introduction

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.

Application running

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.

Output when button is clicked

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

android: background=”@drawable/button_shape”.
output how your button will now look

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:

Output

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:

Result Layout

Figure 5: Result Layout

And the folder hierarchy for the application is shown below.

Folder hierarchy

Figure 6: Folder hierarchy

Conclusion

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.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login