How to Design Button, Custom Buttons – Android Studio

By
JonyApps.Com
-
0
2969

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.

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





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





If you have any comments, please post below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here