Tutorial ToggleButton Android

togglebutton

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

togglebutton

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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

2 thoughts on “Tutorial ToggleButton Android”

  1. kak punya tutorial untuk menambahkan suatu gambar yang langsung disimpan dalam sqlite , kita upload sendiri kalo yang kakak punya kan gambar dipanggil manual di drawble nya yang saya mau biar kita bisa namba gambar kayak ada button tamba gambar yang bisa ngambil dari suatu galeri kak

Tinggalin komentar dong!