Toggle Button in Android

Question

Can anyone help or share a link on how to implement this toggle button in android:

I've tried using this:

<ToggleButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textOn="Active"
                android:textOff="Completed"/>

but it's not having the desired output.

It has only one button and it changes when i click on it. What i want is two buttons side by side as shown in the picture above.

Answer 1

With some research, i found a better way with the new Material Design. We need to use the MaterialButtonToggleGroup which is provided in the Android material library:

<com.google.android.material.button.MaterialButtonToggleGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:checkedButton="@id/active">

<com.google.android.material.button.MaterialButton
        android:id="@+id/active"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Active"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

<com.google.android.material.button.MaterialButton
        android:id="@+id/completed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Completed"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>
</com.google.android.material.button.MaterialButtonToggleGroup>

Hope this helps other persons as well...

Answer 2

Custom Implementation ----

Colors

<color name = "background">#5cc0fa</color>
<color name = "white">#FFFFFF</color>

XML layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
>

<LinearLayout
    android:id="@+id/linear_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/background"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textColor="@color/white"
        android:background="@color/background"
        android:text="All" />

    <Button
        android:id="@+id/btn_done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textColor="@color/background"
        android:background="@color/white"
        android:text="Done" />

</LinearLayout>
</android.support.constraint.ConstraintLayout>

Inside Activity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

int var = 0;
Button btnAll;
Button btnDone;
LinearLayout linearLayout;

public void toggle() {
    if(var == 0) {
        var = 1;
        btnAll.setBackgroundColor(getResources().getColor(R.color.white));
        btnAll.setTextColor(getResources().getColor(R.color.background));
        btnDone.setBackgroundColor(getResources().getColor(R.color.background));
        btnDone.setTextColor(getResources().getColor(R.color.white));
    } else {
        var = 0;
        btnAll.setBackgroundColor(getResources().getColor(R.color.background));
        btnAll.setTextColor(getResources().getColor(R.color.white));
        btnDone.setBackgroundColor(getResources().getColor(R.color.white));
        btnDone.setTextColor(getResources().getColor(R.color.background));
    }
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    linearLayout = findViewById(R.id.linear_layout);
    btnAll = findViewById(R.id.btn_all);
    btnDone = findViewById(R.id.btn_done);

    linearLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });

    btnAll.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });

    btnDone.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });
}
}