Tutorial How To Make A Toggle Button With Two Images


1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4.60 out of 5)



Recently, I worked on a project where I had to make a custom toggle button. I found out a little trick that helped me get my work done with just a few lines of code. And here I am going to share with you that magic trick on How to make a toggle button with two images.

You just need to prepare two images/icons eg the following 2 images

Tutorial How To Make A Toggle Button With Two Images


Now we’re going to make a new project and name it as ToggleButtonExample.

Tutorial How To Make A Toggle Button With Two Images


Then, copy the above buttons and put them into the drawable folder.

Tutorial How To Make A Toggle Button With Two Images


Create a file and name it as “selector_toggle_button” and place it into the drawable folder too. Copy and paste the following code:

<?xml version = "1.0" encoding = "utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/ic_toggle_on" android:state_activated="true" />
   <item android:drawable="@drawable/ic_toggle_off" />


Later, we will assign this selector to an ImageView. Ic_toggle_on is going to be shown when the ImageView is in activated state, if not ic_toggle_off icon will take the place.


We will edit the main_activity.xml in layout folder by adding an ImageView to it. The important thing you need to remember is not to forget to assign selector_toggle_button to the ImageView. Here is how our xml file looks like:

<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:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

   <!-- Remember to assign the selector_toggle_button to source of ImageView-->
       android:layout_height="50dp" />


The last thing we need to do to get our work done is edit our MainActivity to get the ImageView acts like a toggle button.


public class MainActivity extends AppCompatActivity {
   ImageView mIvToggle;
   protected void onCreate(Bundle savedInstanceState) {

       mIvToggle = (ImageView) findViewById(R.id.iv_toggle);
       mIvToggle.setOnClickListener(new View.OnClickListener() {
           public void onClick(View view) {

Now let’s run the program and see the result.

Tutorial How To Make A Toggle Button With Two Images


That’s all. With just a few lines of code and two images, you can get your own toggle button.

Hope you will find this post helpful.


Brought to you by RobustTechHouse team



Recommended Posts

Leave a Comment

Contact Us

We look forward to your messages. Please drop us a note for any enquiries and we'll get back to you, asap.

Not readable? Change text. captcha txt
Weird3Artificial Intelligence