Android farklı buton durumları için farklı resimler göstermek (selector kullanımı )

Yaptığımız çiftlik uygulamasında bir hayvana tıklandığında farklı bir resim görünüyor(normal olanların gölgeli halleri görünüyor)

Her buton durumuna göre farklı arkaplan gösterme Android’in bize tanıdığı güzel imkanlardan birtanesi. Bu sayede butona tıklandığında, focuslandığında (üzerine gelindiğinde) veya normal görünüm için farklı resimler göstermek mümkün. Aşağıda bunu en kısa nasıl yapabilirizi anlatmaya çalıştım umarım faydalı olur.

1. Öncelikle resimlerimizi “res/drawable/” klasörünün altına ekliyoruz.

Üç farklı durum için üç farklı resim tasarladık.

inek.png – Default resim. Butona tıklanma ya da focuslanma olmadığında hep bu resim görünecektir.

inek_focused.png – butona focuslandıgında değişecek resim

inek_pressed.png – butona tıklandıgında gösterilecek resmi

ifade ediyor.

2. Fakrlı buton durumları için bir “Selector” tanımladım.

Res/layout/ kalsörünün içine inek_button_states.xmladında (siz istediğiniz ismi verebilirsiniz) bir layout tanımladım. Ve içine aşağıdaki kodları içeren bir selectoroluşturdum. 

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

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

    <item android:drawable="@drawable/ inek_pressed”

          android:state_pressed="true" /> <!-- basıldığında -->

    <item android:drawable="@drawable/inek_focused"

          android:state_focused="true" /> <!—focuslandığında -->

    <item android:drawable="@drawable/inek" /> <!— normal görünüm -->

</selector> 

Kodun açıklamasına  gelince; 

 <item android:drawable="@drawable/inek"/>  deafult değerdir, ilk resmin hangisi oldugunu burada  belirtiyoruz. Butona tıklanmadığında hep bu resin görünecektir. 

<item android:state_focused="true"
           android:drawable="@drawable/inek_focused" /> state_focused ile butona focuslandıgında değişecek resmi belirtiyoruz.

<item android:state_pressed="true"

           android:drawable="@drawable/button_pressed" /> android state_pressed ile butona tıklandıgında hangi resmin görünmesini istediğimizi belirtiyoruz.

3. Selector’u butona “background” olarak atadım.

Create ettiğimiz bu xml dosyasını “res/layout/main.xml” dosyasındaki buton background’ına referans olarak gösteriyoruz.

Main.xml dosyasındaki button kodu:

    <Button

        android:id="@+id/btnInek"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background=="@layout/inek_button_states.xml"/>

Bunları yaptıktan sonra Android otomatik olarak butun durumuna göre uygun resmi çağıracaktır. 

Birden fazla buton varsa bunlar için de ayrı ayrı bu işlemleri yapmanız gerekiyor (daha kısa yolu var mı bulamadım, biliyorsanız lütfen bana da anlatın). 

Yaptığım çiftlik uygulamasında her hayvan için ayrı ayrı bu işlemleri yaptım. Örn: civciv için civciv_button_states.xml oluşturdum ve res/drawable dosyasına uygun, civciv_pressed.png, civciv.png, civciv_focused.png gibi, resimleri oluşturdum.

Uygulamayı buradan indirip, deneyebilirsiniz.

Elimden geldiğince anlatmaya çalıştım, umarım faydalı olmuştur. Farklı ekran boyutlarına uygun tasarım yapmak için nelere dikkat etmeniz gerektiğini öğrenmek için buraya tıklayınız.