Android – Button ve StateListDrawable Kullanımı

Button, tıklandığında bir kod parçasını tetikleyen bileşendir. Aslında tıklanabilme işlevi tüm bileşenlere verilebilmektedir. Fakat birçok sistemde olduğu gibi Android’de de Button‘lar bu işlev için özel olarak hazırlanmıştır.

Önceki uygulamalarımızda Button‘ları kullanmıştık ama detaylı olarak incelememiştik. Şimdi detaylı bir şekilde inceleyeceğiz.

Android’de Button‘lar varsayılan olarak belirli bir arkaplan kullanırlar. Bu arkaplan, uygulamanın çalıştırıldığı cihazda bulunan Android sürümüne göre değişiklik gösterir. Biz genellikle uygulamamızın tasarımına uygun Button‘lar kullanmak isteriz. Bu yazıda bunu nasıl yapacağımızı göreceğiz.

Button’a doğrudan bir resmi arkaplan olarak vermek bir çözümdür ama böyle yaparsak Button tıklandığında bunu hissedemeyiz. Bu sebeple, StateListDrawable denilen bir xml dosyası kullanacağız. Bu dosya sayesinde Button‘a, basılı olduğu durumda farklı bir arkaplan verebileceğiz. Böylece, kullanıcı Button‘a tıkladığını hissedebilecek.

Örnek Uygulama

Artık uygulamamıza geçelim. Uygulamamızda, tıklandığında ekranın arkaplan rengini değiştiren bir Button olsun. Ayrıca bu Button‘un tasarımı da bizim hazırladığımız şekilde olsun.

Önceki uygulamalarımızda olduğu gibi MainActivity sınıfını ve activity_main xml dosyasını kullanacağız.

Tasarım

Öncelikle, res klasörü altında yer alan drawable klasörü içine button_arkaplan adında bir xml dosyası oluşturalım. Buna ek olarak, Button için hazırladığınız arkaplanları da uygun drawable klasörüne koyalım. button_arkaplan dosyasının içine aşağıdaki kodları yazalım.

 <?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/button_pressed" />
    <item android:drawable="@drawable/button" />
</selector>

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

</selector>

Burada button_pressed, Button‘un basılı olduğu durumdaki arkaplanı, button ise diğer durumlardaki arkaplanı.

Şimdi, activity_main dosyasının içerisine de aşağıdaki kodları yazalım.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/button_arkaplan" />

</RelativeLayout>

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

android:id="@+id/layout"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:background="@drawable/button_arkaplan" />

</RelativeLayout>

[alert] XML üzerinde bir nesneye isim vermek için android:id özelliğine @+id/ ön ekini kullanıyoruz. [/alert]

Gördüğünüz gibi, sadece bir RelativeLayout ve onun içerisinde bir Button var. Burada dikkat edilmesi gereken noktalar şunlardır:

RelativeLayout‘a bir isim veriyoruz (android:id=“@+id/layout”). Çünkü arkaplanını değiştirmek için MainActivity içerisinde çağıracağız.
Button‘a arkaplan olarak bir xml dosyası veriyoruz (android:background=“@drawable/button_arkaplan”).

Tasarım kısmında işimiz bitti. Sırada kodlama kısmı var.

Kodlama (MainActivity)

MainActivity içerisine aşağıdaki kodları yazıyoruz.

package org.kod5.android;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

	//Bu kısımda bileşenlerimizi tanımlıyoruz.
	private Button button;
	private RelativeLayout layout;
	private int kontrol=0;
    @Override
    protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz. 
        button = (Button)findViewById(R.id.button1);
        layout = (RelativeLayout)findViewById(R.id.layout);
        
		layout.setBackgroundColor(Color.CYAN);//layout'un arkaplanını ayarlıyoruz.

        button.setOnClickListener(new OnClickListener() {  
			
			@Override
			public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.
			  
				if(kontrol==0){
					layout.setBackgroundColor(Color.parseColor("#f8a64c"));
					kontrol=1;
				}else{
					layout.setBackgroundColor(Color.CYAN);
					kontrol=0;
				}			  			
			}
		});
    }
}

package org.kod5.android;

import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.RelativeLayout;

public class MainActivity extends Activity {

//Bu kısımda bileşenlerimizi tanımlıyoruz.

private Button button;

private RelativeLayout layout;

private int kontrol=0;

@Override

protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz.

button = (Button)findViewById(R.id.button1);

layout = (RelativeLayout)findViewById(R.id.layout);

layout.setBackgroundColor(Color.CYAN);//layout'un arkaplanını ayarlıyoruz.

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.

if(kontrol==0){

layout.setBackgroundColor(Color.parseColor("#f8a64c"));

kontrol=1;

}else{

layout.setBackgroundColor(Color.CYAN);

kontrol=0;

}

});

}

Ekran Görüntüleri

Artık uygulamamızı çalıştırabiliriz. Bazı ekran görüntülerini sizlerle paylaşıyorum;

Bu yazımızın da sonuna geldik. Basit bir uygulama hazırlayıp Button kullanımını görmüş olduk. Başka bir yazıda görüşmek üzere. 🙂

Kaynak Kodlar

Uygulama dosyaları için: https://github.com/mursidyazar/Android-Button-and-StateListDrawable.git

Benzer Konular

Android Görsel Bileşenler;

Yorum Ekle

Android – Toast Kullanımı dedi ki:

26 Haziran 2014, 16:31

[…] önceki uygulamamızda ufak bir değişiklik yaparak Toast kullanımını görelim. MainActivity sınıfını aşağıdaki […]

Cevapla
Android – Button ve StateListDrawable Kullanımı | kod5 dedi ki:

30 Haziran 2014, 19:41

[…] Okumaya devam et… […]

Cevapla
Android – Toast Kullanımı | kod5 dedi ki:

30 Haziran 2014, 19:43

[…] önceki uygulamamızda ufak bir değişiklik yaparak Toast kullanımını görelim. MainActivity sınıfını […]

Cevapla
Android – ImageView Kullanımı dedi ki:

24 Ekim 2014, 16:59

[…] Button ve StateListDrawable […]

Cevapla
Android – CheckBox Kullanımı dedi ki:

30 Ekim 2014, 15:22

[…] (Graphical Layout) geçiyoruz. Burada Form Widgets sekmesi altından bir tane TextView, bir tane Button ve altı tane de CheckBox‘ı sürükle bırak mantığıyla Linear Layout‘umuzun […]

Cevapla
Android – WebView Kullanımı dedi ki:

30 Ekim 2014, 15:24

[…] Button ve StateListDrawable […]

Cevapla
Android – ListView Kullanımı dedi ki:

30 Ekim 2014, 15:25

[…] Button ve StateListDrawable […]

Cevapla
Android – SeekBar Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:01

[…] Button ve StateListDrawable […]

Cevapla
Android – TextView ve EditText Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:18

[…] Button ve StateListDrawable […]

Cevapla