While Android provides floating action buttons, navigation views, and other useful items in its design support library, there’s no out-of-the-box solution for the oft-used toggle button. Commonly applied to stylize text or filter search results and other content, the toggle button is a staple in most apps. It can also be time-consuming to create.

After crafting our own toggle button solution for use in several apps, including Share Our Strength’s Cooking Matters, we decided to take the time to create an open source version so others don’t have to make their own from scratch. It’s our way of giving back to the Android community. We’ve wrote ToggleButtonLayout in Kotlin but we have a branch with Java support. Take it as-is or customize and make it your own, ToggleButtonLayout is meant to save you time and energy.

Want it now and don’t care about the details? Go get your ToggleButtonLayout.

When to Use ToggleButtonLayout

ToggleButtonLayout is a view group containing typically three or more buttons that can be toggled on and off. These buttons visibly change to indicate whether an option is active or inactive. Toggle buttons are often found in apps where users are prompted to select between several states. For example, we’ve utilized toggle buttons to allow users to filter content and stylize text, among other use cases.

You may be familiar with segmented control, a similar iOS component to Android’s toggle button. Segmented control shares similar functions and use cases as the toggle button. It is part of the iOS UI framework, whereas there’s no ready-to-use Android solution for a toggle button. Use ToggleButtonLayout if you need a similar interface to a segmented control in your Android app.

What Makes ToggleButtonLayout Useful

We use ToggleButtonLayout as a filter menu in Share Our Strength’s Cooking Matters app.

There are a few ways you can configure ToggleButtonLayout combinations depending on how you want your users to interact with it. You can choose to allow users to toggle one option at a time or the ability to toggle multiple selections at once. ToggleButtonLayout also permits an empty state for those times when nothing is selected.

There’s an optional restriction you can apply to your toggle button that requires at least one selected option to be toggled on at all times. This is particularly useful for giving the user the ability to filter app content.

To get the same result without using ToggleButtonLayout you’d have to create a view and additional views for each toggle. With this open source project, you can inflate it through a menu resource, which gives each item an ID, an optional icon, and an optional name. You can then track when these toggles get selected/deselected by the user. This approach is similar to NavigationView from the Android support library in that you give it a menu item resource and it will inflate it and create the views for you.

ToggleButtonLayout supports icons and text, so you’re not limited to a certain type of toggle button. We crafted it using the Material Design Guidelines as a reference.

How to Use ToggleButtonLayout

Follow these directions to customize and added ToggleButtonLayout to your app.


Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        maven { url "https://jitpack.io" }

Then, add the library to your project build.gradle:

dependencies {
    implementation 'com.github.savvyapps:ToggleButtonLayout:latest.version.here'


Add the ToggleButtonLayout to your layout…

    app:menu="@menu/toggles" />

…where the toggles menu looks like:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

       android:icon="@drawable/ic_format_align_left_black_24dp" />

       android:icon="@drawable/ic_format_align_center_black_24dp" />

       android:icon="@drawable/ic_format_align_right_black_24dp" />

You can safely ignore lint warnings about needing a title on each item, unless you want a title to appear on each item. Later, you can get the selected items via:

List<Toggle> selectedToggles = toggleButtonLayout.getSelectedToggles();//do what you need to with these selected toggles


You can customize the ToggleButtonLayout via XML attributes:

    app:toggleMode="even" />

If you use the customLayout attribute, the layout is expected to have a TextView with an ID of android:id="@android:id/text1" if you are using a title, and if you are using an icon, android:id="@android:id/icon". You can omit either of these if you are only using a menu resource with a title or just an icon. See the sample for more.

Get ToggleButtonLayout

Additional documentation is on GitHub and the dependency is on JitPack. We’d love to hear your feedback on how to improve the ToggleButtonLayout project or how you’ve integrated it into your own apps. Be sure to keep in touch on Twitter and Facebook for updates, including announcements when we release additional open source projects.

John is an Android developer who loves open-source software, Material Design, and cats. Not always in that order.

Source link


  1. 541762 247251Youd outstanding guidelines there. I did a search about the field and identified that very likely the majority will agree together with your internet page. 919607

  2. I do love the way you have framed this difficulty and it does indeed offer us a lot of fodder for thought. However, coming from what I have observed, I really wish as other comments pack on that men and women keep on issue and don’t start on a tirade of the news of the day. Yet, thank you for this fantastic piece and while I do not necessarily agree with it in totality, I regard your point of view.


Please enter your comment!
Please enter your name here