Android button shape

  • 0

Android button shape

Category : Uncategorized

To have better look of your buttons, you might want to change the buttons’ shape. In Android, it is easy to achieve this goal. You have to define a shape in a drawable resource xml file in the res/drawable folder. Then apply the shape to a button view using its background attribute.
There are four valid shapes that you can define. They are rectangle, line, oval, and ring. The root element of the shape resource file must be

<shape>. You can specify attributes such as corners, gradient, padding, size, solid color, and stroke to your shape using <corners>, <gradient>, <padding>, <size>, <solid>, and <stroke> elements.  In the <corners> element, you can specify the radius of all corners or any corner of the shape. The <gradient> specifies a gradient color of the shape. With The <padding> element, you can set the left, right bottom, and top padding of the view that the shape is applied to. The <size> element specifies the width and height of the shape. The <solid> element fills a color to the shape. The <stroke> element helps you to specify a line stroke for the shape.

Now to have an example application on button shape, you create a new Android project. Then modify the activity_main.xml file to add two Buttons. The first button will have a round-rectangle shape with white color filled in and the second button has over shape with gradient color. All buttons have a red-line border.

 
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.shapedrawable.MainActivity" >
 
    <Button
       android:id="@+id/bt1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"      
       android:text="Button1"
       android:layout_marginBottom="20dp"
       android:background="@drawable/roundrect"
       
       />
      <Button
       android:id="@+id/bt2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/bt1"
       android:text="Button2"
       android:background="@drawable/ovalgradient"
       />
    
   />
 
 </RelativeLayout>

 
 In the res/drawable folder, you create two drawable resource xml files. One file is roundrect.xml file that defines a round rectangle shape with the white sold color to the first button. Another file is called ovalgradient.xml. It defines the oval shape with gradient color for the second button.
 
 Roundrect.xml file
 
<?xml version="1.0" encoding="utf-8"?>
 
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
       android:radius="10dp"
      />
     <gradient
       android:angle="90"
       android:centerColor="#783309"
       android:endColor="#78ea89"
       android:gradientRadius="2"
       android:startColor="#f98344"
       android:type="linear"
   		/>
     <padding
       android:left="15dp"
       android:top="5dp"
       android:right="15dp"
       android:bottom="5dp" />
     <size
       android:width="200dp"
       android:height="30dp" />
     <solid
       android:color="#FFFFFF" />
      <stroke
       android:width="2dp"
       android:color="#FF0000"
       android:dashWidth="1dp"
       android:dashGap="1dp" />
 </shape>

 
 Ovalgradient.xml file
 
<?xml version="1.0" encoding="utf-8"?>
 
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
     <gradient
       android:angle="90"
       android:centerColor="#783309"
       android:endColor="#78ea89"
       android:gradientRadius="2"
       android:startColor="#f98344"
       android:type="linear"
   		/>
     <padding
       android:left="15dp"
       android:top="15dp"
       android:right="15dp"
       android:bottom="15dp" />
     <stroke
       android:width="5dp"
       android:color="#FF0000"
       android:dashWidth="0dp"
       android:dashGap="0dp" />
 </shape>

 
 When you run this example application you get the output as shown in the picture below.
 

Android-button-shape

 

 


Leave a Reply