ToggleButton (On/Off) Tutorial With Example In Android
In Android, ToggleButton is utilized to show checked and
unchecked condition of a button. ToggleButton essentially an off/on button with
a light marker which demonstrate the present condition of flip button. The most
basic example of ToggleButton is doing on/off in sound, Bluetooth, wifi,
hotspot and so on. It is a subclass of compoundButton.
ToggleButton Vs Switch In Android:
ToggleButton enable the clients to change the setting
between two states like kill on/your wifi, Bluetooth and so on from your
phone's setting menu. Since, Android 4.0 version ( API level 14 ) there is an
another sort of ToggleButton called Switch which give the client slider
control. You can take in more about it perusing Switch tutorial.
Important
Note: Android Switch and ToggleButton both are the
subclasses of CompoundButton class.
ToggleButton code in XML:
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
How To Check Current State Of ToggleButton:
To check current state of a toggle button automatically we
use isChecked() strategy. This strategy restores a Boolean esteem either
obvious or false. In the event that a toggle button is checked, it returns
genuine else it returns false. The following is the code which checks the
present state of a toggle button.
/*Add in Oncreate() funtion after setContentView()*/
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate a toggle button
Boolean ToggleButtonState = simpleToggleButton.isChecked();
Attributes of ToggleButton: |
Presently allows we examine important attributes that
encourages us to configure a Toggle Button in XML document (layout).
1.
id: id is a credit used to extraordinarily identify a
toggle button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
2. checked: checked is an attribute of toggle
button used to set the present state of a toggle button. The value ought to be
true or false where true shows the checked state and false shows unchecked
state of a toggle button. The default value of checked attribute is false. We
can likewise set the present state automatically.
Below we set true value for checked attribute sets the
present state to checked.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" /><!-- set the current state of the toggle button-->
Setting Checked Of ToogleButton Current State In Java Class:
Below we set the present state of toggle button to checked:
/*Add in Oncreate() funtion after setContentView()*/
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate a toggle button
simpleToggleButton.setChecked(true);
3. gravity: The gravity attribute is an
optional attribute which is utilized to control the arrangement of the content
in ToogleButton like left, right, focus, top, bottom, center_vertical,
center_horizontal and so on.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:checked="true"
android:gravity="right|center_vertical"/>
4. textOn And textOff: textOn attribute is
utilized to set the content when toggle button is in checked/on state. We can
set the textOn in XML and in addition in the java class.
Below is the example code with explanation incorporated into
which we set the textOn "Enabble Attribute Of Toggle button" for a
toggle button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_centerHorizontal="true"
android:textOff="Disable"
android:textOn="Enable"/>
Setting textOn and textOff Of ToggleButton In Java class:
/*Add in Oncreate() funtion after setContentView()*/
// initiate toggle button
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton);
// displayed text of the toggle button whenever it is in checked or on state
simpleToggleButton.setTextOn("TextOn Attribute Of Toggle b3`utton");
// displayed text of the toggle button whenever it is in unchecked or off state
simpleToggleButton.setTextOff("TextOff Attribute Of Toggle b3`utton");
5. textColor: textColor attribute is utilized
to set the content shade of a toggle button. Shading value is as
"#argb", "#rgb", "#rrggbb", or
"#aarrggbb".
Below we set the red shading for the showed content of a
Toggle button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:textOff="On State"
android:textOn="Off State"
android:layout_centerHorizontal="true"
android:textColor="#f00" />
Setting textColor Of ToggleButton In Java class:
/*Add in Oncreate() funtion after setContentView()*/
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton);// initiate toggle button
simpleToggleButton.setTextColor(Color.RED); //red color for displayed text of toggle button
6. textSize: textSize attribute set the span
of the content of a toggle button. We can set the content size in sp(scale free
pixel) or dp(density pixel).
Below we set the 25sp size for the content of a toggle
button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:textOff="On State"
android:textOn="Off State"
android:layout_centerHorizontal="true"
android:textColor="#f00"
android:textSize="25sp"/> <!-- 25sp displayed text size-->
Setting textSize Of ToggleButton Text In Java class:
/*Add in Oncreate() funtion after setContentView()*/
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate toggle button
simpleToggleButton.setTextSize(25); // set 25sp displayed text size of toggle button
7. textStyle: textStyle attribute is utilized
to set the content style of the content of a Toggle button. You can set strong,
italic and ordinary. On the off chance that you have to utilize at least two
styles for a content view then "|" operator is utilized for that.
Below we set the striking and italic content styles for
content of a toggle button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="Off State"
android:textOn="On State"
android:textSize="25sp"
android:layout_centerHorizontal="true"
android:textColor="#f00"
android:textStyle="bold|italic"/> <!-- bold and italic text style for displayed text-->
8. background: background attribute is
utilized to set the background of a toggle button. We can set a shading or a
drawable out of sight of a toggle button.
Below we set the dark shading for the background and red
shading for the showed content of a ToggleButton.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="Off State"
android:textOn="On State"
android:textSize="25sp"
android:layout_centerHorizontal="true"
android:textStyle="bold|italic"
android:textColor="#f00"
android:background="#000"/><!--Black Color Background-->
Setting Background Of ToggleButton Text In Java class:
/*Add in Oncreate() funtion after setContentView()*/
ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton);
simpleToggleButton.setBackgroundColor(Color.BLACK);
9. padding: padding attribute is utilized to
set the padding from left, right, top or bottom.
- paddingRight :set the padding from the correct side of the toggle button.
- paddingLeft :set the padding from the left side of the toggle button.
- paddingTop :set the padding from the top side of the toggle button.
- paddingBottom :set the padding from the bottom side of the toggle button.
- Padding :set the padding from the all side's of the toggle button.
Below we set the 40dp padding from all the side's of the
toggle button.
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="Off State"
android:textOn="On State"
android:textSize="25sp"
android:layout_centerHorizontal="true"
android:textColor="#f00"
android:padding="40dp"/>
10. drawableBottom, drawableTop, drawableRight And
drawableLeft: These attribute draw the drawable below, top, right
and left of the content of ToggleButton.
Below we set the icon to the Top of the content of a
ToggleButton. In the comparable way you can strive for other three attribute
yourself.
<!--Make sure to add ic_launcher image in drawable folder-->
<ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="Off State"
android:textOn="On State"
android:layout_centerHorizontal="true"
android:textColor="#000"
android:drawableTop="@drawable/ic_launcher" />
ToggleButton Example In Android Studio: |
Below is the example of ToggleButton in Android Studio. In
this example we show two toggle button with background and one
"submit" button utilizing attributes examined before in this post. At
whatever point client tap on the submit button, the present state of both
toggle button's is shown in a Toast. Below is the last yield, download code and
well ordered explanation:
Stage 1: Create a new project and name it
ToggleButtonExample
In this progression we create a new project for ToggleButton
in Android Studio by filling all the necessary details of the app like app
name, package name, api versions and so on.
Select File -> New -> New Project -> Fill the forms and click "Finish" button.
Stage 2: Open res - > layout - >
activity_main.xml (or) main.xml and add following code:
In this progression we open a xml document and add the code
for displaying two toggle button and one normal Button.
<LinearLayout 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:orientation="vertical"
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<ToggleButton
android:id="@+id/simpleToggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:checked="false"
android:drawablePadding="20dp"
android:drawableRight="@drawable/ic_launcher"
android:textColor="#000" />
<ToggleButton
android:id="@+id/simpleToggleButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="50dp"
android:checked="true"
android:drawableLeft="@drawable/ic_launcher"
android:drawablePadding="20dp"
android:textColor="#000" />
</LinearLayout>
<Button
android:id="@+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:background="#0f0"
android:padding="10dp"
android:text="Submit"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
Stage 3: Open app - > java - > package -
> MainActivity.java
In this progression we open MainActivity where we add the
code to initiate the Toggle Buttons and normal Button. After initiating we
perform click occasion on button and display the content of current state of
ToggleButton utilizing a Toast.
package example.abhiandriod.togglebuttonexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ToggleButton;
public class MainActivity extends AppCompatActivity {
ToggleButton simpleToggleButton1, simpleToggleButton2;
Button submit;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate toggle button's
simpleToggleButton1 = (ToggleButton) findViewById(R.id.simpleToggleButton1);
simpleToggleButton2 = (ToggleButton) findViewById(R.id.simpleToggleButton2);
submit = (Button) findViewById(R.id.submitButton);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String status = "ToggleButton1 : " + simpleToggleButton1.getText() + "\n" + "ToggleButton2 : " + simpleToggleButton2.getText();
Toast.makeText(getApplicationContext(), status, Toast.LENGTH_SHORT).show(); // display the current state of toggle button's
}
});
}
}
Output:
Presently start the AVD in Emulator and run the App. You
will see two ToggleButton and submit Button. Tap on the submit button which
will display the state of ToggleButton.
No comments:
Post a Comment