Wednesday, October 10, 2012

Interface: Custom Button and ImageView


Customization interface: 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