Gradient Buttons for Android


Buttons in Android can be a bit boring with normal grey colored buttons. Creating gradient colored buttons with style is very easy to do using XML.

  1. Create a new XML file in the drawable folder of your project
  2. In the New Android XML File windows, select “Selector” in the root element property
  3. A button has two states: its pressed or normal. So we need to create a style for when its pressed as well
  4. Button is a shape, so enter a <shape></shape> tag
  5. Give the pressed state a solid color <solid android:color=”color_of_you_choice”/>  tag
  6. Add a <stroke /> tag to draw the outline of the button
  7. Add a <corners /> tag to style the corners giving them rounded edges
  8. Add padding with <padding />
  1. Create a button style for if the button is not pressed
  2. Here is where the gradient will be applied, so create an <item></item> and <shape></shape>
  3. Within the <shape></shape> tag, create a <gradient android:startColor=”start_color” android:endColor=”end_color” android:angle=”270″/> that gives the gradient a start and ending color and angle of the gradient
  4. Repeat steps 6-8 with the non-pressed button state

The sample code below creates a blue gradient button using XML:

<selector xmlns:android="<a class="linkification-ext" title="Linkification: <a class="linkification-ext" title="Linkification: <a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>" href="<a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"><a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a></a>" href="<a class="linkification-ext" title="Linkification: <a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>" href="<a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"><a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a></a>"><a class="linkification-ext" title="Linkification: <a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>" href="<a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"><a class="linkification-ext" title="Linkification: http://schemas.android.com/apk/res/android" href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a></a></a>">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#449def" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#449def"
                android:endColor="#2f6699"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</selector>

The code below uses the gradient style created for a button object:

<Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editext"
        android:layout_below="@+id/editext"
        android:layout_marginTop="10dp"
        android:text="Button"
        android:background="@drawable/blue_button" <!-- use the gradient style for the button -->
        android:textColor="#ffffff"/>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s