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
No comments:
Post a Comment