Android ToggleButton Kullanımı

Önceki derslerde Android Switch button kullanımını görmüştük. Bu yazıda Android’de ToggleButton, bir düğmenin işaretli ve işaretsiz durumunu görüntülemek için kullanacağız.

ToggleButton, temel olarak, geçiş düğmesinin mevcut durumunu gösteren bir ışık göstergeli bir açma/kapama düğmesidir. ToggleButton’un en basit örneği ses, Bluetooth, wifi, hotspot vb.’de açma/kapama yapmak için kullanılabilir. android.widget.CompoundButton sınıfının alt sınıfıdır.

İçindekiler

Android’de ToggleButton vs Switch:

ToggleButton, kullanıcıların telefonunuzun ayar menüsünden wifi, Bluetooth vb. açma/kapama gibi iki durum arasındaki ayarı değiştirmesine izin verir. Android 4.0 sürümünden (API seviyesi 14) bu yana kullanıcı kaydırıcı kontrolünü sağlayan Switch adında başka bir ToggleButton türünü de kullanmaktadır.

Açıklamayı bitirdikten sonra ToggleButton örneğini nasıl yapacağımıza bakalım.

Adım 1: Yeni Proje Oluştur

Android Studio’nuzu açın “Create New Android Project”e tıklayın (Android Studio‘yu nasıl kuracağınızı ve ilk Android projenizi nasıl oluşturacağınızı öğrenin)
Proje şablonu penceresinden “Empty Activity“i seçin ve İleri’ye tıklayın.
Uygulama Adını, Paket adını, kaydetme konumunu, dili (Java/Kotlin, bu eğitim için Java kullanacağız).
Yukarıdaki bilgileri doldurduktan sonra Finish düğmesine tıklayın.
Şimdi, projenin inşasını bitirmesini bekleyin.

Adım 2: Android Activity’ye Switch Ekleme

Şimdi app -> res -> layout ->activity_main.xml‘e gidin ve ToggleButton ekleyin, şimdi activity_main.xml dosyamız aşağıda gösterildiği gibi görünecektir:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id = "@+id/mainLayout"
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>



</RelativeLayout>

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

<RelativeLayout

android:id = "@+id/mainLayout"

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

xmlns:app = "http://schemas.android.com/apk/res-auto"

xmlns:tools = "http://schemas.android.com/tools"

android:layout_width = "match_parent"

android:layout_height = "match_parent"

tools:context=".MainActivity">

<ToggleButton

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</RelativeLayout>

Yukarıdaki kodda Activity’ye varsayılan ToggleButton komponentini ekledik.

Örneklerle ToggleButton Özellikleri

Switch özelliklerine benzer özellikleri olduğu için bu yazıda çok fazla detaya girmeden özellikleri başlıca sıralıyorum.

id özelliği

Belirli bir ToggleButton tanımlamak için nesneye verilebilecek benzersiz bir kimliği ifade etmektedir.

checked özelliği

Bu özellik, ToggleButton’un mevcut durumunu ayarlamak için kullanılır. Değer true veya false olabilir ve kontrol edilen özniteliğin varsayılan değeri false‘dır. check="true" olarak ayarladığımızda, ToggleButton varsayılan olarak onaylı, false olarak ayarlandığında ise varsayılan olarak onaysız gelir.


   <ToggleButton
        android:checked="true"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:checked="true"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

Java kodu ile toggle button durumunu değiştirmek için setChecked(Boolean b) metodunu kullanabilirsiniz. Buradaki “b” true yada false olabilir.


    ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);
    toggleBtn.setChecked(true);

ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);

toggleBtn.setChecked(true);

textOn ve textOff Özelliği

Switch‘deki bir çok özellik gibi textOn ve textOff özelliği de ToggleButton ile kullanılmaktadır.

TextOn özelliği, ToggleButton işaretli durumdayken (anlamına gelir) göstermek istediğimiz metni ayarlamak için kullanılır ve textOff özelliği, ToggleButton işaretlenmemiş durumda (anlamına gelir) göstermek istediğimiz metni ayarlamak için kullanılır. Aşağıda gösterildiği gibi textOff ve textOn metnini göstermek için showText = “true” olarak ayarladık.


    <ToggleButton
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

gravity özelliği

Gravity özelliği left, right, center, top, bottom, center_vertical, center_horizontal vb. gibi ToogleButton’daki metnin hizalamasını kontrol etmek için kullanılan isteğe bağlı bir niteliktir.

Aşağıdaki örnektegenişlik değerini match_parent ve grafitiy değerini right | center_veritcal yaptık.


    <ToggleButton
        android:gravity="right|center_vertical"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<ToggleButton

android:gravity="right|center_vertical"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

textColor özelliği

ToggleButton metin rengini ayarlamak için kullanılır. Renk değeri “#argb”, “#rgb”, “#rrggbb” veya “#aarrggbb” biçiminden herhangi biri olabilir.


    <ToggleButton
        android:textColor = "#FF0000"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<ToggleButton

android:textColor = "#FF0000"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

textSize özelliği

Bu öznitelik, ToggleButton metninin boyutunu ayarlamak için kullanılır. XML’de boyutu dp, in, mm, pt, px, sp olarak ayarlayabiliriz. Aşağıdaki örnekte metin boyutunu 32dp olarak ayarlıyoruz:


    <ToggleButton
        android:textSize = "32dp"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<ToggleButton

android:textSize = "32dp"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

background özelliği

Anahtarın arka planını ayarlamak için kullanılır. Bir color yada drawable (image) veya herhangi bir özel xml dosyası olabilir. Bu eğitim için basit bir kırmızı renkli arka plan ekleyeceğiz:


    <ToggleButton
        android:background = "#FF0000"
        android:textColor="#FFFFFF"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<ToggleButton

android:background = "#FF0000"

android:textColor="#FFFFFF"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

padding özelliği

İş boşluğu ToggleButton’a ayarlamak için kullanılır. padding özniteliğini kullanarak üst, alt, sol, sağ padding’i aynı anda ayarlayabilir veya paddingLeft, paddingRight, paddingTop ve paddingBottom niteliklerini kullanarak üst, alt, sol, sağ için farklı dolgu ekleyebiliriz.


    <ToggleButton
        android:padding = "30dp"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:padding = "30dp"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

margin özelliği

ToggleButton nesnesinin dışından boşluk bırakmak için margin özelliğini kullanabilirsiniz. Ayrıca her kenera ayrı boşluk vermek içinde marginLeft, marginBottom vb. şekilde tanımlanmalar yapılabilir.


    <ToggleButton
        android:layout_margin="20dp"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:layout_margin="20dp"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

drawableBottom, drawableTop, drawableRight ve drawableLeft özelliği

Bu öznitelik ToggleButton metninin alt, üst, sağ ve solundaki çizilebilirleri çizer.
Aşağıda, simgeyi bir ToggleButton metninin en üstüne ayarlıyoruz. Benzer şekilde, diğer üç özelliği kendiniz deneyebilirsiniz.


    <ToggleButton
        android:drawableTop="@drawable/ic_launcher_foreground"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:drawableTop="@drawable/ic_launcher_foreground"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

ToggleButton Özel Zemin ve Yazı Rengi Belirleme

Yukarıdaki textColor ve background özelliklerinde tek boyutlu renk belirleme yaparken aşağıdaki kullanımda toggle buttonun farklı durumları için bir XML dosyası ile tanımlama yapılabilir.

Aşağıdaki 2 ayrı örnekte de renk XML kaynağı oluşturmamız gerekiyor. Görsellerdeki adımları izleyerek renk klasörünü oluşturup xml dosyasını aşağıdaki gibi oluşturuyoruz.

Örnek 1:

res/drawable/toggle_state_on.xml


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#4c975d"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#6dd988"/>
        </shape>
    </item>
</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

<stroke

android:color="#4c975d"

android:width="5dp"

</shape>

</item>

<item

android:bottom="5dp"

</shape>

</item>

</layer-list>

res/drawable/toggle_state_off.xml


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#b1113e"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#f51354"/>
        </shape>
    </item>
</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

<stroke

android:color="#b1113e"

android:width="5dp"

</shape>

</item>

<item

android:bottom="5dp"

</shape>

</item>

</layer-list>

res/drawable/toggle_selector.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/toggle_state_on"
        android:state_checked="true"
        />
    <item
        android:drawable="@drawable/toggle_state_off"
        android:state_checked="false"
        />
</selector>

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

<item

android:drawable="@drawable/toggle_state_on"

android:state_checked="true"

<item

android:drawable="@drawable/toggle_state_off"

android:state_checked="false"

</selector>

Uygulama:


    <ToggleButton
        android:background="@drawable/toggle_selector"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:background="@drawable/toggle_selector"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

Çıktı:

Örnek 2: Bu örnekte buton durumlarını tanımlayan XML dosyası oluşturup bu özellikler belirleniyor.

toggle_arkaplan_renk.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--When Button enabled -->
    <item android:state_enabled="false" android:color="#b6b7b5" />
    <!--When Button pressed state -->
    <item android:state_pressed="true" android:color="#22a540" />
    <!--When Button selected state -->
    <item android:state_selected="true" android:color="#fabcff" />
    <!--Default Background Color -->
    <item android:color="@android:color/white" />
</selector>

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

</selector>

toggle_yazi_renk.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--button enabled-->
    <item android:state_enabled="false" android:color="@android:color/white" />
    <!-- button selected state-->
    <item android:state_selected="true" android:color="@android:color/white" />
    <!--Default Text Color-->
    <item android:color="#db402c" />
</selector>

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

</selector>

Uygulama:


    <ToggleButton
        android:backgroundTint="@color/toggle_arkaplan_renk"
        android:textColor="@color/toggle_yazi_renk"
        android:textOn="Açık"
        android:textOff="Kapalı"
        android:id="@+id/toggleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<ToggleButton

android:backgroundTint="@color/toggle_arkaplan_renk"

android:textColor="@color/toggle_yazi_renk"

android:textOn="Açık"

android:textOff="Kapalı"

android:id="@+id/toggleBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

Bu yazıda ToggleButton componentinin bir çok özelliğine örneklerle baktık. Sitemizdeki diğer Android örnekleri ve yazıları için Android kategorisine bakabilirsiniz.

Android ToggleButton ile Listener Kullanımı

Şimdi, kullanıcının Toggle‘a tıklamasını ve bazı eylemleri gerçekleştirmesini sağlamak için kullanılabilecek olay veya tıklama dinleyicisi işlevlerini ele alalım.

setOnClickListener(OnClickListener l) kullanarak dinleme

ToggleButton’un tıklanıp tıklanmadığını kontrol etmek ve tıklamaya göre karar vermek istediğimizde bu dinleyiciyi kullanabiliriz. public void onClick(View view) fonksiyonunun içinde, boolean isChecked() fonksiyonunu kullanarak onaylanıp onaylanmadığını kontrol edeceğiz ve aşağıda gösterildiği gibi anahtarın durumuna göre kullanıcıya toast göstereceğiz:


    ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);
    toggleBtn.setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View view) {
            if (toggleBtn.isChecked()) //toggle onaylı mı?
            {
                Toast.makeText(MainActivity.this, "Switch, tıklama dinleyicisi kullanılarak onaylı ", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "Switch, tıklama dinleyicisi kullanılarak onaysız", Toast.LENGTH_SHORT).show();
            }
        }
    });

ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);

toggleBtn.setOnClickListener(new View.OnClickListener()

{

@Override

public void onClick(View view) {

if (toggleBtn.isChecked()) //toggle onaylı mı?

{

Toast.makeText(MainActivity.this, "Switch, tıklama dinleyicisi kullanılarak onaylı ", Toast.LENGTH_SHORT).show();

} else {

Toast.makeText(MainActivity.this, "Switch, tıklama dinleyicisi kullanılarak onaysız", Toast.LENGTH_SHORT).show();

}

});

setOnCheckedChangeListener(OnCheckedChangeListener l) kullanarak dinleme

Bu dinleyici, switch(anahtar) durumu değiştirildiğinde çağrılır, bu, anahtarı kapalı durumundan açık durumuna veya tam tersine değiştirdiğimiz anlamına gelir. onClickListener’dan temel farkı, bunun yalnızca durum değiştiğinde çağrılmasıdır. F

onCheckedChangeListener içinde bir onCheckedChanged(CompoundButton compoundButton, boolean b) anahtarın durumunu kontrol etmek ve boolean değerine göre işlevleri gerçekleştirmek için bir boolean değeri kullanabiliriz:


    ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);
    toggleBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
        if (b) //checking if the user turned on the switch
        {
            Toast.makeText(MainActivity.this, "Swtich onaylandı", Toast.LENGTH_SHORT).show();

        } else {
            Toast.makeText(MainActivity.this, "Switch onayı kaldırıldı", Toast.LENGTH_SHORT).show();
        }
    }
    });

ToggleButton toggleBtn=(ToggleButton)findViewById(R.id.toggleBtn);

toggleBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Override

public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

if (b) //checking if the user turned on the switch

{

Toast.makeText(MainActivity.this, "Swtich onaylandı", Toast.LENGTH_SHORT).show();

} else {

Toast.makeText(MainActivity.this, "Switch onayı kaldırıldı", Toast.LENGTH_SHORT).show();

}

});

Bu yazıda ihtiyaç duyabileceğiniz iki dinleyiciyi gösterdim. Diğer dinleyiciler için Android resmi kaynağını inceleyebilirsiniz.

Daha fazla Android içeriği için Android Dersleri yazısını inceleyebilirsiniz.

Android ToggleButton Kullanımı

Android’de ToggleButton vs Switch:

Örneklerle ToggleButton Özellikleri

id özelliği

checked özelliği

textOn ve textOff Özelliği

gravity özelliği

textColor özelliği

textSize özelliği

background özelliği

padding özelliği

margin özelliği

drawableBottom, drawableTop, drawableRight ve drawableLeft özelliği

ToggleButton Özel Zemin ve Yazı Rengi Belirleme

Android ToggleButton ile Listener Kullanımı

setOnClickListener(OnClickListener l) kullanarak dinleme

setOnCheckedChangeListener(OnCheckedChangeListener l) kullanarak dinleme

1 Yorum

İptal Et

Android’de ToggleButton vs Switch:

Örneklerle ToggleButton Özellikleri

id özelliği

checked özelliği

textOn ve textOff Özelliği

gravity özelliği

textColor özelliği

textSize özelliği

background özelliği

padding özelliği

margin özelliği

drawableBottom, drawableTop, drawableRight ve drawableLeft özelliği

ToggleButton Özel Zemin ve Yazı Rengi Belirleme

Android ToggleButton ile Listener Kullanımı

setOnClickListener(OnClickListener l) kullanarak dinleme

setOnCheckedChangeListener(OnCheckedChangeListener l) kullanarak dinleme

Bunları da beğenebilirsiniz

1 Yorum