Android Button Example

Android Buttons

A button may consist of text, an image, or both. The 3 ways of creating buttons in the layout are;

Text: Button class:

 <Button
      android:id="@+id/button"
      android:text="@string/submit"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

Icon: ImageButton class:

 <ImageButton
       android:id="@+id/button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@android:drawable/ic_menu_edit"/>

Text and Icon: Button class including android:drawableLeft attribute:

 <Button
      android:id="@+id/button"
      android:text="@string/email"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:drawableStart="@android:drawable/ic_dialog_email"/>

Click Events

In the XML layout file the 'android:onClick' attribute in the <Button> element calls the appropriate method.

Button with onClick in XML file...

<Button
      android:id="@+id/button"
      android:text="@string/submit"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="onClickDoSomething"/>

and in the Activity the corresponding method will be called:

 /** Called when the button is pressed */
  public void onClickDoSomething(View view) 
  {
    // Do stuff here
 
  }

Button Styling

Simple Button

 <Button
      android:id="@+id/button"
      android:text="@string/email"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:drawableStart="@android:drawable/ic_dialog_email"/>

 
  Image on left Button

<Button
      android:id="@+id/button2"
      android:layout_width="170dp"
      android:layout_height="wrap_content"
      android:drawableStart="@android:drawable/ic_lock_silent_mode_off"
      android:text="Image on Left"/>

   
Image on right Button

<Button
      android:id="@+id/button3"
      android:layout_width="170dp"
      android:layout_height="wrap_content"
      android:drawableEnd="@android:drawable/ic_lock_silent_mode_off"
      android:text="Image on Right"/>

   Button with Border
     An additional XML layout file needs to be created in the 'drawable' folder, called button_border.xml. Call this new layout from the 'background' attribute of any button.

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

    <!-- Green Background -->
    <solid android:color="#00ff3c" />

    <!-- Red Border -->
    <stroke
       android:width="5dp"
       android:color="#ff0000" />
 </shape>

<Button
      android:id="@+id/button4"
      android:layout_width="170dp"
      android:layout_height="wrap_content"
      android:background=
      "@drawable/button_border"
      android:text="With Border"/>

Button with Border Radius
 Another XML layout file needs to be created in the 'drawable' folder, called border_radius.xml. Again call this from the 'background' attribute of any button

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

    <!-- Corner Radii -->
    <corners
        android:radius="0.5dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />

    <!-- Background color -->
    <solid android:color="#00ff22" />

    <!-- Border color -->
    <stroke
        android:width="1dp"
        android:color="#ff0000" />

 </shape>

<Button
    android:id="@+id/button5"
    android:layout_width="170dp"
    android:layout_height="wrap_content"
    android:background="
       @drawable/border_radius"
    android:text="Border Radius"/>

Background color
Colors can be called directly from auto-generated 'colors.xml' file. You can add as many colors in this file as you see fit.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">
     #3f51b5
    </color>
    <color name="colorPrimaryDark">
     #303F9F
    </color>
    <color name="colorAccent">
     #FF4081
    </color>

    <!-- My colors-->
    <color name="my_color_black">
     #000000
    </color>

    <color name="my_color_white">
     #ffffff
    </color>

    <color name="my_color_red">
     #ff0004
    </color>

    <color name="my_color_green">
     #00ff00
    </color>
</resources>

<Button
      android:id="@+id/button6"
      android:layout_width="170dp"
      android:layout_height="wrap_content"
      android:background=
       "@color/colorPrimary"
      android:text="background color"/>