Android Custom Button Yapımı

Merhaba arkadaşlar bu dersimizde Android Custom Button Yapımını anlatmaya çalışacağım. Hepimizin malumudur ki kodlamanın düzgün ve temiz olması kadar arayüzün(tasarımın)de göze hitap etmesi,kullanıcaya cazip gelmesi ve dikkatini çekmesi lazımdır. Androidin default buttonları bu yüzden yetersiz kalmaktadır.Sadece background rengi değişmektedir.Ne bir corner radius ne gradient ne de tıklandığında değişen bir background olmamaktadır.

Bu yüzden kendi button tasarımlarımızı kendimiz yapmamız gerekmektedir. Bunu da iki türlü yapabilmekteyiz.
1. si yine android in bize sunduğu Shape Xml leri kullanarak
2. si ise kendi image editörlerle oluşturduğumuz imageleri kullanarak.

Her zamanki gibi dersimizi ufak bir uyulama ile anlatmaya çalıştım. Yukarıda bahsettiğim iki yoluda örneklendirdim. Burda daha fazla bir anlatım yapmayacağım.Çünkü kod üzerinde gerekli açıklamaları yaptım.

Yukarıda gördüğünüz gibi 3 tane farklı buton var.
1.si ve 2. android shape xml kullanarak yapıldı. İkincisinin tek farkı ayrıca image eklenerek radiuslar değiştirildi. 3. ise background olarak direk image aldı ve bu imaga tıklanınca değişiyor.

anasayfa.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    
    <!-- 
     *Background olarak hazırladığımız custom_button.xml dosyasını seçiyoruz
     *custom_button.xml dosyası içinde kendimiz istediğimiz gibi radius verebilip
      istediğimiz renklerde hemde gradient vererek çalışabiliyoruz
     *Ayrıca tıklandığı zaman hangi rengi verebileceğimizide seçebiliyoruz 
     -->
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:layout_marginRight="20dip"
        android:layout_marginLeft="20dip"
        android:background="@drawable/custom_button"
        android:paddingBottom="15dip"
        android:paddingTop="15dip"
        android:text="Custom Button"
        android:textColor="@drawable/custom_button_text_color"
        android:textStyle="normal" />

    
    <!-- 
     *Background olarak hazırladığımız custom_button_image.xml dosyasını seçiyoruz
      * Bu dosyanın custom_button dosyasından tek farkı renkleri ve radius ları
      *Button a image eklemek istedimizde android:drawableTop:"@drawable/custom_button_image" ile istediğimiz image ekliyoruz
      *android:drawableTop text in üst kısmına 
      *android:drawableLeft text in sol kısmına
      *android:drawableBottom text in alt kısmına
      *android:drawableRight text in sağ kısmına
      *Tıklandığı zaman image yada text lerin değişmesini istiyorsak bunu kod içersinde manuel olarak yapmalıyız.
     -->
    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:layout_marginRight="80dip"
        android:layout_marginLeft="80dip"
        android:background="@drawable/custom_button_image"
        android:drawableTop="@drawable/ic_launcher"
        android:paddingBottom="5dip"
        android:paddingTop="5dip"
        android:textSize="14dip"
        android:text="Custom Button İmage"
        android:textColor="@drawable/custom_button_text_color"
        android:textStyle="normal" />

    
     <!-- 
     *Background olarak hazırladığımız custom_button_background_png dosyasını seçiyoruz
     *Burda butonun şeklini kendimiz oluşturmuyoruz.
     *İmage editörlerle(photoshop,gimp,fireworks vs..) oluşturduğumuz button u background olarak veriyoruz.
     * Aslında direk background olarak verebilirdik ama tıklandığı zaman background şeklinin değişmesini istedimiz için xml dosyasında hazırladık
     -->
    <Button
        android:id="@+id/button3"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="45dp"
        android:background="@drawable/custom_button_background_png" />
    
</RelativeLayout>

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
   	*Burda kendi oluşturacamız button un nasıl olacağını
   	*tıklandığı zaman nasıl olacağını rengini radius unu belirliyoruz
   	*Burda state_pressed ile tıklandığı zaman buttonun nasıl olacağını belirtiyoruz
   	*Dikkat etmemiz önemli bir nokta var item e herhangi bir state belirlemiyorsak bu başlangıç şeklidir.
   	*ve bu item her zaman en altta olmalıdır .Yoksa çalışmamaktadır.
     -->
    <item android:state_pressed="true">
    <shape>
      <gradient android:startColor="#ececec" android:endColor="#cbcbcb" android:angle="270" />
      <corners android:radius="7px" />
    </shape>
  </item>
   
   <item>
   <shape>
      <gradient android:startColor="#a81919" android:endColor="#f5bbbb" android:angle="270" />
      <corners android:radius="7px" />
    </shape>
  </item>
  
 
</selector>

custom_button_image.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
   	*Burda kendi oluşturacamız button un nasıl olacağını
   	*tıklandığı zaman nasıl olacağını rengini radius unu belirliyoruz
   	*Burda state_pressed ile tıklandığı zaman buttonun nasıl olacağını belirtiyoruz
   	*Dikkat etmemiz önemli bir nokta var item e herhangi bir state belirlemiyorsak bu başlangıç şeklidir.
   	*ve bu item her zaman en altta olmalıdır .Yoksa çalışmamaktadır.
     -->
    <item android:state_pressed="true">
    <shape>
      <gradient android:startColor="#ececec" android:endColor="#cbcbcb" android:angle="270" />
      <corners android:topLeftRadius="25px" android:topRightRadius="5px" android:bottomLeftRadius="5px" android:bottomRightRadius="25px" />
    </shape>
  </item>
   
   <item>
    <shape>
      <gradient android:startColor="#4FC1F6" android:endColor="#397e9f" android:angle="270" />
      <corners android:topLeftRadius="25px" android:topRightRadius="5px" android:bottomLeftRadius="5px" android:bottomRightRadius="25px" />
    </shape>
  </item>
  
 
</selector>

custom_button_background_png.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
    *Burda kendimiz button oluşturmuyoruz .
    *Sadece normalde(başlangıçta) ve tıklandığı zaman hangi image lerin gösterileceğini seçiyoruz
    
     -->
<item android:state_pressed="true" android:drawable="@drawable/image_button_click" />
<item android:drawable="@drawable/image_button" /> 
</selector>

custom_button_text_color.png

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
    *Arkadaşlar button tıklandığı zaman renk değişimini yapıyoruz
    *Ama bu değişen renge görede text renginide değiştirmek gerekebilir.
    *İşte bu xml dosyasıda bu işe yarıyor
    *android:textColor ile bu dosyası çağırıyoruz. Burda normalde(başlangıçta) beyaz renkte,
    * bağlı olduğu item tıklandığında ise siyah renk oluyor
    
     -->
    <item android:state_pressed="true" android:color="#000000" />
    <item android:color="#ffffff" />
</selector>

Burada dikkat etmemiz gereken husus anasayfa.xml layout klasörünün altında olacak. Diğer xml dosyaları custom_button.xml,custom_button_image.xml,custom_button_background_png.xml ve custom_button_text_color.xml drawable klasörü altında olacak. drawable klasörü eğer yoksa res klasörüne sağ tıklayıp new->folder takip ederek yeni oluşan klasör adına drawable veriyoruz.

Evet arkadaşlar bu derste anlatmak istediklerim bu kadar. Kaynak kodu indirip incelemenizi tavsiye ederim. Anlamanız açısından çok faydalı olacaktır.

Eklemek istedikleriniz yada sormak istediklerinizi çekinmeden sorabilirsiniz.Bir dahaki dersimde Android XML Parse yada Android Admob yani reklam eklemeyi anlatacağım. Bir dahaki derste görüşmek dileğiyle kendinize iyi bakın.
[wpdm_file id=14] 17