How to make a Android button act as a toggle button


You can make a Button View behave like an ON/OFF toggle button. For this you need to have two image icons that represent an ON or an OFF state.

To demonstrate, I have downloaded two buttons: Switch ON and Switch OFF for icon8.com and placed them under drawable folder.

Set the Background of the Button as the Button icon OFF state using attribute android:background = "@drawable/button_off"

In Java code we will create a flag variable and in onClickListener set on the Button we will toggle the states as button.setBackgroundResource(R.drawable.switch_on) and button.setBackgroundResource(R.drawable.switch_off) to change its background.

javaactivity_toggle_button_ex.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"
    tools:context="com.code2care.android.togglebuttonexample.ToggleButtonEx" >
    <Button
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="38dp"
        android:background="@drawable/switch_off" />
    <TextView
        android:id="@+id/buttonState"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toggleButton"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ToggleButtonEx.java

|CBS||package com.code2care.android.togglebuttonexample; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; public class ToggleButtonEx extends ActionBarActivity { private Button button; private TextView buttonState; private int flag = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_toggle_button_ex); button = (Button) findViewById(R.id.toggleButton); buttonState = (TextView) findViewById(R.id.buttonState); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (flag == 0) { flag = 1; // 1 => Button ON button.setBackgroundResource(R.drawable.switch_on); buttonState.setText("State : ON"); } else { flag = 0; // 0 => Button OFF button.setBackgroundResource(R.drawable.switch_off); buttonState.setText("State : OFF"); } } }); } } Output
Toggle Button OFF State.png
Toggle Button OFF State.png


















Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap