How to Design Button, Custom Buttons - Android Studio

22 April, 2020

In this article, we will create custom buttons with different looks such as different colors, shapes and size. We will customize buttons in Android using XML Styles files.

Custom Buttons


In this tutorial you will learn the following: ★ Android Button ★ Custom Button ★ Image Button ★ Colorful Button ★ Round Button


▶ How to Design Button | Custom Button
Video Link: https://youtu.be/aLEy3hSdI1A


***XML CODEs are given below, Copy and Paste for your Android Project:

Please Subscribe: JonyApps YouTube Channel Subscribe: JonyApps


values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name=
"colorPrimary">#6200EE</color>
<color name=
"colorPrimaryDark">#3700B3</color>
<color name=
"colorAccent">#03DAC5</color>
<color name="black">#000000</color>
<color name="yellow">#FFFF00</color>
<color name="hotPink">#FF69B4</color>
<color name="lime">#00FF00</color>
<color name="white">#ffffff</color>
<color name=
"yellow_A200">#FFFF00</color>
<color name=
"transparent">#00000000</color>
<color name="red">#FF0000</color>
<color name=
"light_blue">#2196F3</color>
<color name="grey">#858585</color>
<color name="green100">#689f38</color>
<color name="orange90">#FD7044</color>
<color name="teal_600">#00897B</color>
<color name="teal_300">#4db6ac</color>
<color name=
"yellow_900">#F57F17</color>
</resources>

values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme"
parent=
"Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">
@color/colorPrimary</item>
<item name="colorPrimaryDark">
@color/colorPrimaryDark</item>
<item name="colorAccent">
@color/colorAccent</item>
</style>

    
<!-- My Button theme -->
<style name="MyButton1"
parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">
    @color/yellow</item>
<item name="colorButtonNormal">
    @color/hotPink</item>
</style>

    
<style name="MyButton2" 
parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">
@color/red</item>
<item name="colorButtonNormal">
@color/teal_300</item>
</style>

<style name="MyButton3" 
parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">
@color/yellow_900</item>
</style>

<style name="MyButton4" 
parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">
@color/yellow_A200</item>
<item name="colorButtonNormal">
@color/white</item>
</style>

<style name="MyButton5" 
parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">
@color/lime</item>
<item name="colorButtonNormal">
@color/white</item>
</style>
</resources>

***Create below xml files at drawable folder

bg_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android=
"http://schemas.android.com/apk/res/android"
>

<stroke
android:color="#0000A0"
android:width="1dp"/>

<corners
android:radius="5dp"/>

<solid
android:color="#039BE6"/>
</shape>

bg_white.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
<stroke 
    android:color="#95989A" 
    android:width="1dp" />
    
    <corners 
        android:radius="5dp" />
    <solid 
        android:color="#F8F8F8"/>
</shape>

button_blue_focas.xml
<shape 
xmlns:android=
"http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp"/>
</shape>

button_light_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=
"http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#00FF00"
        android:centerColor="#008000"
        android:endColor="#00FF00"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp"/>
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp"/>
</shape>

button_ash.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=
"http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>
    <stroke
        android:width="1dip"
        android:color="#FFFFFF"/>
    <corners android:radius= "16dp"/>
</shape>

button_darkpurple.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
    <solid android:color="#7E57C2"/>
    <corners android:radius="30dp"/>

</shape>

button_orange.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=
"http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp"/>
    <stroke
        android:width="2dip"
        android:color="#FFFFFF"/>
 <corners android:radius= "8dp"/>
</shape>

button_light_blue.xml
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android=
"http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#C2DFFF"
        android:centerColor="#56A5EC"
        android:endColor="#F2F2F2"
        android:angle="90"/>

    <stroke
        android:width="1dip"
        android:color="#FFFFFF"/>
<corners android:radius= "16dp"/>
</shape>

round_button1.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
    
<item 
android:state_pressed="false">
<shape android:shape="oval">
 <solid android:color="#5C6BC0"/>
    </shape>
</item>
    
<item 
android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#FFFF00"/>
    </shape>
</item>
</selector>

round_button2.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
    <item 
android:state_pressed="false">
  <shape android:shape="oval">
<solid android:color="#FF0000"/>
  </shape>
 </item>
    
<item 
android:state_pressed="true">
  <shape android:shape="oval">
 <solid android:color="#00FF00"/>
  </shape>
    </item>
    
</selector>

round_button3.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
<item 
 android:state_pressed="false">
 <shape android:shape="oval">
 <solid android:color="#689f38"/>
        </shape>
    </item>
    
    <item 
 android:state_pressed="true">
<shape android:shape="oval">
 <solid android:color="#2196F3"/>
        </shape>
    </item>
    
</selector>

round_button4.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=
"http://schemas.android.com/apk/res/android"
    >
    <item 
  android:state_pressed="false">
   <shape android:shape="oval">
    <solid android:color="#FD7044"/>
        </shape>
    </item>
    
    <item 
    android:state_pressed="true">
    <shape android:shape="oval">
    <solid android:color="#03DAC5"/>
        </shape>
    </item>
</selector>

***Create drawable-xhdpi folder inside the res folder than paste below images
***Click on the Image and Save Image into your Computer
JonyApps JonyApps JonyApps JonyApps


Please Subscribe: JonyApps YouTube Channel Subscribe: JonyApps


If you have any comments, please post below.

Read Our Posts

*Install Our Apps from Google Play Store
->Installing Android Studio
->Installing JDK on Windows
->Make Your 1st Android App
->Custom Toast Message
->Android Snackbar
->Android Alert Dialog
->Android Custom ListView
->RecyclerView with CardView
->Android Notifications
->Android Splash Screen
->Convert Website into App
->Custom Buttons
->Custom TextView
->ProgressBar- Glide/Picasso
->Implement app-ads.txt