Android: Setting up custom gradient for button

Question

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">    
    <solid android:color="#EAEAEA"/>    

    <corners android:bottomLeftRadius="5dip"
                android:topRightRadius="5dip"
                android:topLeftRadius="5dip"
                android:bottomRightRadius="5dip"
    />
</shape>

How can i set my gradient image as background for my button. I see a property gradient, but cannot see any attributes holding background in it.

Note: I am Very new Android development.

score 3 · Accepted Answer · answered Oct 18 '12 at 13:56

I am not sure what the XML you showed us has to do with gradients. You can define a gradient in an XML file in your drawable folder:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="#FFFFFFFF" 
        android:endColor="#FFD9D9D9"
        android:angle="270"
     />
    <corners android:bottomLeftRadius="5dip"
             android:topRightRadius="5dip"
             android:topLeftRadius="5dip"
             android:bottomRightRadius="5dip"
    />
</shape>

(for example, save this as my_gradient.xml)

Then in your layout xml file you can have:

<Button android:id="@+id/ButtonStart"
    android:layout_width="100dp" android:layout_height="wrap_content"
    android:background="@drawable/my_gradient"
    android:textColor="@color/white" android:textSize="14sp"
    android:textStyle="bold" android:text="@string/game_start"/>

score 2 · Answer 2 · answered Oct 18 '12 at 13:55

You should either define the gradient in XML or use an image (which will include the rounded corners). You can't easily mix both an XML shape with an image (at least, as you are a beginner, I would recommend to go with simple stuff first).

For instance:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#474946"
        android:endColor="#181818"
        android:angle="270"/>
    <corners android:radius="5dp" />
</shape>

Then you can define your button's background using the android:background="@drawable/bg_custom_button"

You should learn about nine-patches, they allow you to define strechable images for your backgrounds and will save you when the design is not feasible with XML.

Geert Weening · Answer 3 · 2012-10-18T15:14:44.427

Your shape is in the right direction, but instead of a solid you can use a gradient

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">    
     <gradient
        android:angle="270"
        android:endColor="@color/gradient_bottom"
        android:startColor="@color/gradient_top" />    

    <corners android:bottomLeftRadius="5dip"
            android:topRightRadius="5dip"
            android:topLeftRadius="5dip"
            android:bottomRightRadius="5dip"
    />
</shape>

Assuming the above shape is saved as gradient_background.xml and you saved it in the drawable folder (where it should be). You can now use this drawable as a background for your button

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_background"
    android:text="Button" />

Android: Setting up custom gradient for button

3 Answers3

Linked