Post
Ask Question

Learn About How to Design Buttons Using Drawable

Introduction

 
This article explains how to design a button using drawable.
 
Android provides many drawable resources. In this, we use only a shape darwable resource. A drawable shape provides many basic shapes, such as Rectangle, Oval, Ring, Line. Form these shapes you can create many effects. All of these shapes support the following tags.
  • gradient: used for gradient background
  • size: used to give the size to the shapes
  • stroke: used to give a stroke to the shapes
  • solid: used to give solid background-color
  • padding: used to give padding to the shapes
Step 1
 
Create a project like this:
 
Clipboard04.jpg
 
Step 2
 
Create an XML file and write the following.
 
In this, I have taken multiple buttons inside a linear layout and I have given the shape and color through the drawable XML file. This will change the color and shape of the buttons. I set all the backgrounds of all the buttons to a gradient XML file that I have created inside the drawable folder.
 
I set the gradient2.xml file to the LinearLayout at the bottom that contains a textview.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.    android:layout_width="fill_parent"  
  4.    android:layout_height="fill_parent"  
  5.    android:orientation="vertical"  
  6.    android:background="#000000">  
  7.    <LinearLayout  
  8.       android:layout_width="fill_parent"  
  9.       android:layout_height="wrap_content"  
  10.       android:layout_marginLeft="70dp"  
  11.       >  
  12.       <TextView  
  13.          android:layout_width="wrap_content"  
  14.          android:layout_height="wrap_content"  
  15.          android:text="Account Manager"  
  16.          android:textSize="30dp"  
  17.          android:textColor="#ffffff"/>  
  18.    </LinearLayout>  
  19.    <LinearLayout  
  20.       android:orientation="vertical"  
  21.       android:layout_width="300dp"  
  22.       android:layout_height="460dp"  
  23.       android:layout_marginLeft="40dp"  
  24.       android:layout_centerVertical="true"  
  25.       android:layout_marginTop="20dp"  
  26.       android:background="@drawable/gradient">  
  27.       <LinearLayout  
  28.          android:orientation="vertical"  
  29.          android:layout_width="200dp"  
  30.          android:layout_height="300dp"  
  31.          android:layout_marginLeft="50dp"  
  32.          android:layout_marginTop="10dp"  
  33.          android:background="@drawable/gradient2"  
  34.          >  
  35.          <Button  
  36.             android:layout_width="150dp"  
  37.             android:layout_height="wrap_content"  
  38.             android:text="Enter Investment"  
  39.             android:textColor="#ffffffff"  
  40.             android:textStyle="bold"  
  41.             android:id="@+id/buttonInvestment"  
  42.             android:layout_gravity="center"  
  43.             android:layout_marginTop="10dp"  
  44.             android:background="@drawable/gradient"  
  45.             />  
  46.          <Button  
  47.             android:textColor="#ffffffff"  
  48.             android:textStyle="bold"  
  49.             android:layout_width="150dp"  
  50.             android:layout_height="wrap_content"  
  51.             android:text="Enter Income"  
  52.             android:id="@+id/buttonIncome"  
  53.             android:background="@drawable/gradient"  
  54.             android:layout_marginTop="10dp"  
  55.             android:layout_gravity="center" />  
  56.          <Button  
  57.             android:layout_width="150dp"  
  58.             android:layout_height="wrap_content"  
  59.             android:textColor="#ffffffff"  
  60.             android:textStyle="bold"  
  61.             android:text="View All Expense"  
  62.             android:id="@+id/button3"  
  63.             android:layout_gravity="center"  
  64.             android:layout_marginTop="10dp"  
  65.             android:background="@drawable/gradient"/>  
  66.          <Button  
  67.             android:layout_width="150dp"  
  68.             android:layout_height="wrap_content"  
  69.             android:text="View Investment"  
  70.             android:textColor="#ffffffff"  
  71.             android:textStyle="bold"  
  72.             android:id="@+id/button4"  
  73.             android:layout_gravity="center"  
  74.             android:layout_marginTop="10dp"  
  75.             android:background="@drawable/gradient"/>  
  76.          <Button  
  77.             android:textColor="#ffffffff"  
  78.             android:textStyle="bold"  
  79.             android:layout_width="150dp"  
  80.             android:layout_height="wrap_content"  
  81.             android:text="Remain Balance"  
  82.             android:id="@+id/button4"  
  83.             android:layout_marginTop="10dp"  
  84.             android:layout_gravity="center"  
  85.             android:background="@drawable/gradient"/>  
  86.       </LinearLayout>  
  87.       <LinearLayout  
  88.          android:layout_height="130dp"  
  89.          android:layout_width="270dp"  
  90.          android:background="@drawable/gradient3"  
  91.          android:layout_marginTop="10dp"  
  92.          android:orientation="vertical"  
  93.          android:layout_gravity="center">  
  94.          <LinearLayout  
  95.             android:layout_width="wrap_content"  
  96.             android:layout_height="wrap_content"  
  97.             android:layout_marginTop="20dp">  
  98.             <TextView  
  99.                android:layout_width="wrap_content"  
  100.                android:layout_height="wrap_content"  
  101.                android:text="R.balance"  
  102.                android:layout_marginLeft="20dp"  
  103.                />  
  104.             <TextView  
  105.                android:layout_width="wrap_content"  
  106.                android:layout_height="wrap_content"  
  107.                android:text="R.balance"  
  108.                android:layout_marginLeft="100dp"/>  
  109.          </LinearLayout>  
  110.          <LinearLayout  
  111.             android:layout_width="wrap_content"  
  112.             android:layout_marginTop="20dp"  
  113.             android:layout_height="wrap_content">  
  114.             <TextView  
  115.                android:layout_width="wrap_content"  
  116.                android:layout_height="wrap_content"  
  117.                android:text="R.balance"  
  118.                android:layout_marginLeft="20dp"  
  119.                />  
  120.             <TextView  
  121.                android:layout_width="wrap_content"  
  122.                android:layout_height="wrap_content"  
  123.                android:text="R.balance"  
  124.                android:layout_marginLeft="100dp"/>  
  125.          </LinearLayout>  
  126.          <LinearLayout  
  127.             android:layout_width="wrap_content"  
  128.             android:layout_height="wrap_content"  
  129.             android:layout_marginTop="20dp">  
  130.             <TextView  
  131.                android:layout_width="wrap_content"  
  132.                android:layout_height="wrap_content"  
  133.                android:text="R.balance"  
  134.                android:layout_marginLeft="20dp"  
  135.                />  
  136.             <TextView  
  137.                android:layout_width="wrap_content"  
  138.                android:layout_height="wrap_content"  
  139.                android:text="R.balance"  
  140.                android:layout_marginLeft="100dp"  
  141.                />  
  142.          </LinearLayout>  
  143.       </LinearLayout>  
  144.    </LinearLayout>  
  145. </LinearLayout> 
Step 3
 
 Create an XML file inside a drawable folder and write the following. I hope that you know how to create an XML file inside a drawable folder. 
 
gradient.xml
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.    
  5.     <corners  
  6.         android:bottomLeftRadius="10dp"  
  7.         android:bottomRightRadius="10dp"  
  8.         android:topLeftRadius="10dp"  
  9.         android:topRightRadius="10dp"/>  
  10.    
  11.     <gradient android:startColor="#1E90FF"  
  12.         android:endColor="#1E90FF"/>  
  13.    
  14. </shape> 
Step 4
 
 Another XML file inside the drawable folder:
 
gradient 2.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.    android:shape="rectangle">  
  4.    <corners android:bottomLeftRadius="10dp"  
  5.       android:bottomRightRadius="10dp"  
  6.       android:topLeftRadius="10dp"  
  7.       android:topRightRadius="10dp" />  
  8.    <gradient android:startColor="#ffffff"  
  9.       android:endColor="#ffffff" />  
  10.    <stroke android:color="#000000"  
  11.       android:width="1dp" />  
  12. </shape> 
Step 5
 
Clipboard02.jpg


Similar Articles