Custom Toggle Button
Toggle buttons are an extraordinary method for getting user data when we require just either yes or no from the user. Actually, when we require user enter into the boolean structure toggle buttons can come into the picture.
Adding a toggle button to your perspective and getting its status is simple, you can explore more about toggle buttons on Google developer’s site though I will cover major portion in this tutorial.
However, toggle buttons provide by SDK are marginally dull and you simply can’t go around and use them all over the place. All things considered, you can utilize various pictures for toggle button states. You can characterize a catch for its checked state and other catch for unchecked state. With this you can get a switch-look too.
Let’s look how you can get a custom toggle button in your application.
Steps:
1.) Put toggleoff.png and toggleon.png in drawable folder.
and
2.) Create and write below in toggle_selector.xml in drawable.
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/toggleon" android:state_checked="true"/> <item android:drawable="@drawable/toggleoff" android:state_checked="false"/> </selector>
3.) Write following into activity_main.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=".MainActivity" > <ToggleButton android:id="@+id/toggleButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:background="@drawable/toggle_selector" android:checked="false" android:text="" android:textOff="" android:textOn=""/> </RelativeLayout>
We need to set bg of toggle button to toggle_selector characterized in drawable. It will set the picture as indicated by its state. Additionally, to get the wanted impact as demonstrated in demo above – we must set android:textoff and android:texton to exhaust string overall content will show up on top of our picture.
4.) Write below in your MainActivity.java:
package com.example.customtogglebutton;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;
public class MainActivity extends Activity {
ToggleButton toggleButton;
TextView text;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggleButton = (ToggleButton) findViewById(R.id.toggleButton1);
toggleButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
CharSequence c = "Status : "+isChecked;
Toast.makeText(MainActivity.this,c,Toast.LENGTH_SHORT).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
To get the status from ToggleButton, we can set a onCheckedChangeListener on ToggleButton as shown above. Here We are displaying a toast when toggle button is tapped.
OutPut:
You can also check my previous posts on How to create a toggle button .
Related Posts
Create A Toggle Button
Using a Button As A Toggle
Creating And Handling Custom Button
Top 10 Android App Development Trends | 2020 Guide
5 Best Resources to Get Started with Android Nougat
Android Studio Introduction
Services – An Android Component
Applying MediaCodec On An Open Source Android Audio Player