In this tutorial we will see how to make a Button with multiple colors. Some applications are having custom button with two or three colors . In my previous tutorial How to create button with rounded corners i am explaining how to give background to button using drawable file. We just need to add few more properties to the same drawable file to make it as custom button with multiple colors.
Steps
- Create new project in android studio
- Custom drawable for the button
- Add the button with custom background to the layout
Create New project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Custom drawable for button
We cannot directly set the multiple colors for button in xml .So first you need to have an xml file in your drawable folder with the following code which will be used as the button in layout file.
custom_button_drawable.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <gradient android:angle="180" android:centerColor="@color/colorPrimaryDark" android:centerX="50%" android:endColor="@color/colorAccent" android:startColor="@color/colorPrimary" ></gradient> <corners android:radius="15dp" /> </shape> </item> </selector>
Add the button with custom background to the layout
Now simply use the below button code in your layout file, the button will contain the background as the above created drawable which will allow you to set multiple colors.
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Custom Button" android:background="@drawable/custom_button_drawable" android:textColor="@color/white" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:padding="15dp" />
Here is the colors to added to colors.xml which is using in above code
<color name="colorPrimaryDark">#303F9F</color> <color name="colorPrimary">#3F51B5</color> <color name="colorAccent">#FF4081</color> <color name="white">#FFFFFF</color>
output
