Tutorial ToggleButton Android

Artikel ini merupakan kelanjutan dari artikel sebelumnya yang membahas tentang ImagButton. Tutorial sederhana ini menunjukan cara bagaimana menggunakan ToggleButton di android termasuk teknik mengganti kata On/Off menjadi gambar.

Program yang akan dibuat adalah program sederhana untuk menampilkan text sesuai dengan bendera ditombol. Jika tombol bendera indonesia di klik maka teks berubah menjadi bahasa indonesia dan bendera berubah menjadi bendera inggris. Tampilan program seperti dibawah ini

Kode XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#B8CAEE"
    tools:context=".DoaDetailActivity" >

    <TextView
        android:id="@+id/textPesan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="58dp"
        android:text="Selamat Belajar Android"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ToggleButton
        android:id="@+id/btnLangTogle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="122dp"
        android:layout_marginLeft="100dp"
        android:textOn=""
        android:textOff=""
        android:background="@drawable/check_toggle"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

Perhatikan baris android:background="@drawable/check_toggle". Kita harus membuat file check_toggle.xml yang diletakan di folder Drawable

check_toggle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/indonesianflag"
          android:state_checked="true" />
    
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/englishflag1"
        android:state_checked="false"/>

 </selector>

Inti kode diatas, jika state tombol On (check) maka backgroundnya adalah gambar bendera indonesia, sedangkan jika state tombol Off, maka backgroundnya adalah bendera Inggris.

Kode ToggleButton

package com.candra.demobutton2;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.ToggleButton;

public class ToggleButtonActivity extends Activity {

	TextView txtpesan;
	ToggleButton btnLang;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_toggle);

		txtpesan = (TextView) findViewById(R.id.textPesan);

		btnLang = (ToggleButton) findViewById(R.id.btnLangTogle);

		btnLang.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				if (btnLang.isChecked()) {
					txtpesan.setText("Happy Coding  Android");

				} else {

				
					txtpesan.setText("Selamat belajar Android");
				}
			}
		});

	}

}

Download

Download source code di sini