Android Button Shapes We can set custom shapes on our button using the xml tag. These xml files are created in the drawable folder too. Shape can be used inside selectors. In this video we will learn how to create a custom button that uses XML shapes to replace the background of the default Android button. For this we first create 3 different XML ShapeDrawables and define a background color (solid or gradient), a padding and an outer line (stroke) around the shape, which we can also make dashed.
AlarmClock; BlockedNumberContract; BlockedNumberContract.BlockedNumbers; Browser; CalendarContract; CalendarContract.Attendees; CalendarContract.CalendarAlerts. This video explains How to create #RadioGroup and #RadioButton in #android with the images. We'll discuss, RadioButton Android Add radio group Add Radio butt.
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
In Android, ImageButton is used to display a normal button with a custom image in a button. In simple words we can say, ImageButton is a button with an image that can be pressed or clicked by the users. By default it looks like a normal button with the standard button background that changes the color during different button states.
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
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
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
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
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.
Button Style Android
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
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
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.
In this tutorial we are creating image button with rounded corners border which makes the image button more smooth and good looking. So here is the complete step by step tutorial for Set/Add rounded corners border to Image Button in android.
Note : Please download demo image button image from below and put inside drawable-hdpi folder.
This is image button image :
How to Set/Add rounded corners border to Image Button in android.