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

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.

Dependency

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' }

Usage

Add the ToggleButtonLayout to your layout...

<com.savvyapps.togglebuttonlayout.ToggleButtonLayout android:id="@+id/toggle_button_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginBottom="16dp" 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"> <item android:id="@+id/toggle_left" android:icon="@drawable/ic_format_align_left_black_24dp" /> <item android:id="@+id/toggle_center" android:icon="@drawable/ic_format_align_center_black_24dp" /> <item android:id="@+id/toggle_right" android:icon="@drawable/ic_format_align_right_black_24dp" /> </menu>

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

Customization

You can customize the ToggleButtonLayout via XML attributes:

<com.savvyapps.togglebuttonlayout.ToggleButtonLayout android:id="@+id/toggle_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="16dp" app:allowDeselection="false" app:customLayout="@layout/view_toggle_button" app:dividerColor="@android:color/darker_gray" app:selectedColor="?attr/colorAccent" app:menu="@menu/toggles" app:multipleSelection="true" 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