Posted October 24, 2015

Tutorial How To Make A Toggle Button With Two Images

(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

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

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

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" />
</selector>

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

   <!-- Remember to assign the selector_toggle_button to source of ImageView-->
   <ImageView
       android:id="@+id/iv_toggle"
       android:src="@drawable/selector_toggle_button"
       android:layout_width="80dp"
       android:layout_height="50dp" />
</RelativeLayout>

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.

MainActivity

public class MainActivity extends AppCompatActivity {
   ImageView mIvToggle;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       mIvToggle = (ImageView) findViewById(R.id.iv_toggle);
       mIvToggle.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               mIvToggle.setActivated(!mIvToggle.isActivated());
           }
       });
   }
}

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