Android ImageButton selector

By Fanxtea | 1 Januari 2015

Android membolehkan anda untuk menukar imej butang bergantung kepada bentuk-bentuk yang berbeza seperti butang adalah fokus dan butang ditekan.

1. Tambah Imej untuk Sumber
Sediakan 3 imej untuk taip butang dan memasukkannya ke dalam "res/drawable" folder.


a. gambar1.png - butang imej lalai.
b. gambar2.png - paparkan apabila butang difokuskan.
c. gambar3.png - paparkan apabila butang ditekan.


2. Tambah Selector untuk butang yang berlainan jenis
Fail : res/drawable/new_button.xml

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:drawable="@drawable/gambar1"
android:state_pressed="true"/>
<itemandroid:drawable="@drawable/gambar2"
android:state_focused="true"/>
<itemandroid:drawable="@drawable/gambar3"/>
</selector>



3. Tambah butang
Fail : res/layout/activity_main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
 
<Button
android:id="@+id/imageButtonSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/new_button"/>
 
</LinearLayout>

4. Kod
Fail : MainActivity.java

packagecom.fanxtea.helloworld;
 
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.widget.Button;
importandroid.widget.Toast;
importandroid.view.View;
importandroid.view.View.OnClickListener;
 
publicclass MainActivity extends Activity {
 
 Button imageButton;
 
 @Override
 publicvoid onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 
  addListenerOnButton();
 
 }
 
 publicvoid addListenerOnButton(){
 
  imageButton=(Button) findViewById(R.id.imageButtonSelector);
 
  imageButton.setOnClickListener(new OnClickListener(){
 
   @Override
   publicvoid onClick(View arg0){
 
    Toast.makeText(MainActivity.this,
     "ImageButton (selector) is clicked!",
     Toast.LENGTH_SHORT).show();
 
   }
 
  });
 
 }
 
}

5. Demo