Interface: Custom Button and ImageView

In this article begins a series of articles on customizing applications interface for Android. Today let's talk how to change the appearance of buttons and use the ImageView as a button.

What is used

As the buttons will be used widgets Button and ImageView. The main property for customization in the xml file when creating these widgets for change of appearance:

• for Button: android:background – background image widget
• for ImageView:

- android:background – background image for widget;

- android:src – front-end image for widget.

To customize the behavior of the elements necessary to use selector. This is xml-file that specifies which image to use for the different states of the element.

For Button, we use Nine-Patch images that have been created for this article.

For example, we use:

• ex4_2.9.png - for the normal state of the button (rename to btn_normal.9.png);
• ex4_3.9.png - for the pressed state of the button (rename to btn_pressed.9.png);
• ex4_4.9.png - for the disable state of the button (rename to btn_disable.9.png);

Our selector will look like this (drawable/btn_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"

android:drawable="@drawable/btn_pressed" />

      <item android:state_enabled="true"

            android:drawable="@drawable/btn_normal" />

      <item android:state_enabled="false"

            android:drawable="@drawable/btn_disable" />

</selector>

- android:state_pressed="true|false" indicates pressed or normal state of the button;

- android:state_enabled="true|false" indicates an enable or disable state of the button.

Attribute android:drawable is used to set a specific image for the selected state of the element.

We will create a selector to ImageView. For this item, we will use only two states: normal and pressed, and the images we take the usual, not Nine-Patch.

This article describes how to optimize those images for different screen resolutions.

Our selector to ImageView will look like this (drawable/img_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

      <item android:state_pressed="true"

android:drawable="@drawable/img_pressed" />

      <item android:state_enabled="true"

android:drawable="@drawable/img_normal" />

</selector>

Practice

Now we need to create our interface. We will modify the file main.xml. To add an element selector, use the following construction:

android:background="@drawable/btn_selector"

btn_selector – is the name of xml-file of our selector.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/btn_1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/btn_selector"

            android:text="@string/btn_1" />

        <Button

            android:id="@+id/btn_2"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/btn_selector"

            android:enabled="false"

            android:text="@string/btn_2" />

    </LinearLayout>

    <Button

        android:id="@+id/btn_3"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/btn_selector"

        android:text="@string/btn_3" />

    <ImageButton

        android:id="@+id/img"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="@drawable/img_selector"

        android:scaleType="fitXY"

        android:visibility="invisible" />

</LinearLayout>

Now we need to add a behavior to each button in the program. In this example, a 4 elements: 2 buttons width at half-screen, one button for the whole width of the screen and the image size of 100 dp x 100 dp.

 
public class CustomButtonExampleActivity extends Activity{
    
 private Button btn_1, btn_2, btn_3;
 private ImageView img;
 private Context context;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        this.btn_1  = (Button)findViewById(R.id.btn_1);
        this.btn_2  = (Button)findViewById(R.id.btn_2);
        this.btn_3  = (Button)findViewById(R.id.btn_3);
        this.img  = (ImageView)findViewById(R.id.img);
        this.context = this;
        
        this.btn_1.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    btn_2.setEnabled(true);
    v.setEnabled(false);
   }
  });
        
        this.btn_2.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    btn_1.setEnabled(true);
    v.setEnabled(false);
   }
  });
        
        this.btn_3.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    img.setVisibility((img.isShown()) ? View.INVISIBLE : View.VISIBLE);
   }
  });
        
        this.img.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    Toast.makeText(context, "Click", Toast.LENGTH_SHORT).show();
   }
  });
    }

Links

• The source codes of this project can be downloaded here: zip