Create gradient filled buttons with rounded corners

Create gradient filled buttons with rounded corners

Android has a standard set of buttons for user interaction, and the latest ICS guidelines recommends how your application should look and behave. For the majority of applications you would want to stick to the guidelines, but there are some cases when more striking buttons are more preferable.

For example, applications aimed at children need be more colourful with bolder text, to grab their attention. You could use image buttons, with the ImageButton class, where the buttons are created as an image. However, you will need to create multiple image buttons at various resolutions, i.e. ldpi, mdpi, hdpi, etc.

However, if all you require are gradient filled rectangles with rounded corners, as in the kids maths application below, then there is a quicker and more efficient way to create them using the drawable directive.

Kids Maths Test

Create the buttons

First in the activity layout, define your button with the background set to “@drawable/yellowbutton”..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:weightSum="5"         
  	android:gravity="center"   
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<!-- press me button -->
	<Button
		android:id="@+id/somebutton"
		android:text="Press me"
		android:textSize="30dp"
		android:textStyle="bold"
		android:layout_width="fill_parent"
		android:layout_marginBottom="7dp"
		android:layout_marginTop="7dp"
		android:layout_marginLeft="15dp"
		android:layout_marginRight="15dp"
		android:layout_weight="1"
		android:layout_height="0dp"
		android:background="@drawable/yellowbutton"  />

	<!-- subsequent buttons -->
	<Button
		...
		android:background="@drawable/yellowbutton"  />
</LinearLayout>

Create the shape

The button uses a background called yellowbutton. This is a shape that defines the rectangle, and has the following features

Button Pressed States
The color of the buttons is changed when the button is pressed or focused. This is defined by the 3 items directives, one with state_focused, the other with state_pressed and the final one with no state. It is always best to define these, so that the user has some feedback when they click on the button.

Gradient Fill
The gradient element fills the button with the desired color button. Note that it requires three colors defined, start, middle and end. For a nice even gradient, it is best to make the center colour half way between the start and end colors. A good paint program should help you choose the right values, otherwise just experiment, but always set the dither to true for smoother color transitions.

Corners
Adjusting the radius attribute in the corner element will adjust the sharpness of the corners. 10dp seems to be a good value for a lazy not too sharp corner.

Line thickness
The stroke element defines the line thickness and color. Dark, thick lines work best.

The xml below defines a yelllow rounded button, and should be placed in a file called yellowbutton.xml in the res/drawable directory. It can be referenced as in the earlier example layout, i.e.

android:background=”@drawable/yellowbutton”

<?xml version="1.0" encoding="UTF-8"?>
<selector
	xmlns:android="http://schemas.android.com/apk/res/android">
	<item
		android:state_pressed="true">
		<shape>
			<gradient
				
				android:startColor="#d85327"
				android:centerColor="#d1704b"
				android:endColor="#d18568"
				android:tileMode="repeat" 
				android:dither="true"						
				android:angle="270" />
			<stroke
				android:width="6dp"
				android:color="#BB000000" />
			<corners
				android:radius="10dp" />
			<padding
				android:left="10dp"
				android:top="10dp"
				android:right="10dp"
				android:bottom="10dp" />
		</shape>
	</item>
	<item
		android:state_focused="true">
		<shape>
			<gradient
				android:startColor="#4747e0"
				android:centerColor="#5b5bcd"
				android:endColor="#6f6fcf"
				android:tileMode="repeat" 
				android:dither="true"						
				android:angle="270" />
			<stroke
				android:width="6dp"
				android:color="#BB000000" />
			<corners
				android:radius="10dp" />
			<padding
				android:left="10dp"
				android:top="10dp"
				android:right="10dp"
				android:bottom="10dp" />
		</shape>
	</item>
	<item>
		<shape>
			<gradient
				android:startColor="#c5a307"
				android:centerColor="#d2ae07"
				android:endColor="#debf3e"
				android:tileMode="repeat" 
				android:dither="true"						
				android:angle="270" />
			<stroke
				android:width="6dp"
				android:color="#BB000000" />
			<corners
				android:radius="10dp" />
			<padding
				android:left="10dp"
				android:top="10dp"
				android:right="10dp"
				android:bottom="10dp" />
		</shape>
	</item>
</selector>