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
