Button styles in android (source code)

In this tutorial we are going to create some buttons in android studio, we have lot of button design in android.

Here we are going to create some responsive or some basic buttons.

Let’s start your android project with empty activity.

you will get content_main.xml

In content_main.xml we are going to positioning our button or create a layout for our buttons.

How our button looks on our dashboard page

In this we are going to create some basic button with example’s

Create layout for button

Start creating your layout design for button by following below code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="#2196F3"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">


    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.129"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.407">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/q"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="File"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.923"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.407">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/w"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="Wifi"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.129"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.672">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/e"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="Transfer"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.923"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.672">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/r"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="Desktop"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.129"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.943">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/z"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="Flag"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView


        android:layout_width="163dp"
        android:layout_height="148dp"
        android:background="#fff"
        android:elevation="@dimen/fab_margin"
        app:cardBackgroundColor="#fff"
        app:cardCornerRadius="10dp"
        app:cardElevation="15dp"
        app:cardMaxElevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.919"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.943">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="65dp"
                android:layout_height="61dp"
                android:background="#FFFFFF"
                app:srcCompat="@drawable/x"
                tools:layout_editor_absoluteX="49dp"
                tools:layout_editor_absoluteY="28dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="113dp"
                android:layout_height="22dp"
                android:text="Add User"
                android:textAlignment="center"
                tools:layout_editor_absoluteX="25dp"
                tools:layout_editor_absoluteY="103dp" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="167dp"
        android:layout_height="178dp"
        android:layout_marginStart="143dp"
        android:layout_marginLeft="143dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="140dp"
        android:layout_marginRight="140dp"
        android:layout_marginBottom="614dp"
        android:background="#2196F3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.205"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.74"
        app:srcCompat="@drawable/qwe" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="314dp"
        android:layout_height="47dp"
        android:layout_marginTop="188dp"
        android:layout_marginBottom="560dp"
        android:text="Paras Guglani"
        android:textAlignment="center"
        android:textColor="#fff"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.67"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Now our design is created for buttons , Now start designing for buttons

Basic Square button design

To create basic button

create a button.xml in your res/drawble by right click on drawable folder

New>Drawable resource file>button.xml

Start typing the following code

Curved Button Design

To create basic button

create a button.xml in your res/drawble by right click on drawable folder

New>Drawable resource file>button.xml

Start typing the following code

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

    <item>
        <shape
            android:shape="rectangle">
            <corners android:radius="10000dp">
            </corners>
            <solid android:color="#F44336" />
        </shape>
    </item>

</selector>

Oval Button Design

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

    <item>
        <shape
            android:shape="oval">
            <corners android:radius="10000dp">
            </corners>
            <solid android:color="#9C27B0" />
        </shape>
    </item>

</selector>

Transparent Bytton with strokes

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

    <item>
        <shape

            android:shape="rectangle">
            <corners android:radius="100dp">
            </corners>
            <stroke android:color="#fff"
                android:width="5dp"
                />

        </shape>
    </item>

</selector>

Circular Button Design

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

<item>
    <shape
        android:shape="rectangle">
        <corners
            android:bottomLeftRadius="50dp"
            android:bottomRightRadius="50dp"
            android:topLeftRadius="50dp"
            android:topRightRadius="50dp">
        </corners>
        <solid android:color="#00BCD4" />
    </shape>
</item>

</selector>

Card Button Design

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

    <item>
        <shape
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp">
            </corners>
            <solid android:color="#009688" />
        </shape>
    </item>

</selector>

Half Curved Design

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

    <item>
        <shape
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="20dp">
            </corners>
            <solid android:color="#FFEB3B" />
        </shape>
    </item>

</selector>

Output

Hits: 99

Tags: No tags

Share your thoughts