home top ad

How to Create Different Different Button Design in Android Studio

Hello friends today will be learn about How to Create Different Different Button Design in Android Studio.We make many apps in which we use buttons many times.But when we use simple buttons, our UI does not look good, so we want to use a nice stylish button to attract the user, so let's see how to create it.
First of all we will create a project or you can do it in the project in which you want to do it.

activity_main
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/btn2"
        android:layout_marginBottom="30dp"
        android:background="@drawable/circle_button_background"
        android:text="Button 1"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/button_background2"
        android:text="Button 2"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_below="@id/btn2"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:text="Button 3"
        android:textStyle="bold" />


    <Button
        android:id="@+id/btn4"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_below="@id/btn3"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/button_background"
        android:text="Button 3"
        android:textStyle="bold" />

</RelativeLayout>
In this layout we have used four buttons which we will make stylish. In all these buttons we have used drawable resource.

To create it, we will first right click on the drawable folder and create it on new then create drawable resource.After that we will create all the resources and paste the code given below in it.

button_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
         android:width="5dp"
        android:color="@color/black"/>
    <solid
         android:color="@color/white"/>
    <corners
         android:bottomRightRadius="50dp"
         android:topLeftRadius="0dp"/>

</shape>


button_background2
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
         android:width="5dp"
        android:color="@color/black"/>
    <solid
         android:color="@color/white"/>
    <corners
         android:bottomRightRadius="50dp"
         android:topLeftRadius="50dp"
        android:bottomLeftRadius="0dp"
        android:topRightRadius="0dp"/>

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

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

    <gradient android:angle="45"
        android:centerX="35%"
        android:centerColor="@color/white"
        android:startColor="#E03D3D"
        android:endColor="#0CD5C5"
        android:type="linear"/>

    <padding
         android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"/>

    <size
        android:width="270dp"
        android:height="60dp"/>
    <stroke
        android:width="3dp"
        android:color="#EFC41A"/>

</shape>
By using these resources, we can make the button stylish.

Thanks....

Post a Comment

0 Comments