Monday, 27 February 2017

Custom Toggle Button In Android

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    tools:context="com.androidsimplifycodes.example.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_on"
            android:text="Button 1"
            android:textColor="@android:color/white"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_off"
            android:text="Button 2"
            android:textColor="@android:color/white"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5"
        android:gravity="center">

        <TextView
            android:id="@+id/tvSelected"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button One Selected"
            android:textAppearance="?android:textAppearanceLarge"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>
toggle_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">
            <stroke
                android:width="5dp"
                android:color="#3876BA" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#3876BA" />
        </shape>
    </item>
</layer-list>
toggle_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">
            <stroke
                android:width="5dp"
                android:color="#4D4D4D" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#4D4D4D" />
        </shape>
    </item>
</layer-list>
MainActivity.java

package com.androidsimplifycodes.example;

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

public class MainActivity extends AppCompatActivity {

    protected Button btnOne;
    protected Button btnTwo;
    protected TextView tvSelected;

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

        btnOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                btnOne.setBackgroundResource(R.drawable.toggle_on);
                btnTwo.setBackgroundResource(R.drawable.toggle_off);
                tvSelected.setText("Button One Selected");
            }
        });

        btnTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                btnOne.setBackgroundResource(R.drawable.toggle_off);
                btnTwo.setBackgroundResource(R.drawable.toggle_on);
                tvSelected.setText("Button Two Selected");
            }
        });
    }

    private void initView() {
        btnOne = (Button) findViewById(R.id.btnOne);
        btnTwo = (Button) findViewById(R.id.btnTwo);
        tvSelected = (TextView) findViewById(R.id.tvSelected);
    }
}
Output :