Easy creation and management of toggle buttons on Android from the Material Design spec.

Overview

ToggleButtonLayout

Easy creation and management of toggle buttons from the Material Design spec. Read more about ToggleButtonLayout in our blog post.

Single Multiple Segmented

Build Status

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:

val selectedToggles = toggleButtonLayout.selectedToggles()
//do what you need to with these selected toggles

And you can listen for when toggles are switched:

toggleButtonLayout.onToggledListener = { toggle, selected ->
    Snackbar.make(root, "Toggle " + toggle.id + " selected state " + selected, Snackbar.LENGTH_LONG)
            .show()
}

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.

Notes

  • If you need to rely on a Java version of ToggleButtonLayout, you can use the java branch.
  • Please open an issue or make a pull request for additional features you might want. For PRs, please follow the Android Kotlin Style Guide

License

Copyright 2019 Savvy Apps

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • ToggleListener

    ToggleListener

    I tried setting a listener so as to get Toggle events using

    > toggleButtonLayout.setOnToggleSelectedListener(new ToggleButtonLayout.OnToggledListener() {
    >             @Override
    >             public void onToggled(Toggle toggle, boolean selected) {
    > 
    >             }
    >         });
    

    but this method doesn't resolve. Am using Java

    opened by KelvinPac 4
  • Making the layout take up the entire length of the screen

    Making the layout take up the entire length of the screen

    I have a Tabbed layout, and on the second tab the design people put another set of tabs, there's only 2 tabs, and I thought it was a bad idea to put tabs inside tabs. So I decided to make the second "tab" section 2 toggle buttons, since it just changes the values in a chart on the screen. The problem is, when using this layout the toggle buttons are very small and don't stretch to fill the screen. The way I am picturing it is, if you had a LinearLayout with layout_width set to match_parent, then weightSum set to 2, then each of the toggles would have layout_weight = 1 and they would stretch to fill in the width of the screen. The way I have it set right now in my layout is a LinearLayout with layout_width to "match_parent" and height to "wrap_content", then in my ToggleButtonLayout I have layout_width to "match_parent", but they are still just 2 small buttons on the left side of the screen, not stretching to fill the entire width. Is there a way to do this?

    opened by danwguy 2
  • Change textColor of selected menuItem

    Change textColor of selected menuItem

    I have been trying all kind of approaches, no success. I just want to change the text color of selected toggle, can you guide me on how to achieve that? Thanks alot.

    opened by DennisKragekjaer 1
  • How to check, which button has been pressed?

    How to check, which button has been pressed?

    I want to perform some action when one particular button is pressed. I'm using below code, but don't know what to do next.

        ToggleButtonLayout toggleButtonLayout = (ToggleButtonLayout) findViewById(R.id.toggleText);
        List<Toggle> selectedToggles = toggleButtonLayout.getSelectedToggles();
    
    opened by PrashantYadav 1
  • Cannot resolve artifact

    Cannot resolve artifact

    I'm trying to use the Java version of the library. The docs say to use

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

    Examining the source to find the version number, it looks like that should actually be

    implementation 'com.savvyapps:togglebuttonlayout:1.0'
    

    But gradle cannot resolve version 1.0 of either of those artifacts. What is the latest artifact, version, and repository information?

    opened by kjkrum 1
  • Ability to get ToggleButtonLayout from Toggle

    Ability to get ToggleButtonLayout from Toggle

    In Android from all listeners you can get a view which called this listener. e.g. View.OnClickListener::onClick(View v) or CompoundButton.OnCheckedChangeListener::onCheckedChanged(CompoundButton buttonView, boolean isChecked). It is convenient to use setTag()/getTag(Object) with view.

    At the same time it is not possible to get ToggleButtonLayout object from listener to use setTag()/getTag(Object) with the current implementation.

    There are two solutions:

    1. Change listener callback, e.g. onToggledListener: ((layout: ToggleButtonLayout, toggle: Toggle, selected: Boolean) -> Unit)?

    2. Allow to get ToggleButtonLayout from Toggle class.

    opened by alexeyvasilyev 0
  • The ability to block selection of items

    The ability to block selection of items

    Hello,

    I really like your library, it is useful and easy to use, but I miss one option. Could you add the option to enable / disable the ability to select items by user? In some case I need blocking for while selected item, but in this version i can't do this.

    opened by damson93 0
  • How to set one selected by default?

    How to set one selected by default?

    <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"
                    app:allowDeselection="false"
                    app:menu="@menu/toggles"
                    app:selectedColor="@color/colorPrimary" />
    

    And also want to set different color for two different selected toggle buttons.

    opened by harshad008 0
  • Can you please show me this in Java ?

    Can you please show me this in Java ?

    ` toggleButtonLayout.onToggledListener = { _, toggle, selected -> Snackbar.make(root, "Toggle ${toggle.id} selected state $selected", Snackbar.LENGTH_LONG) .show() }

        buttonSetSelectedColor.setOnClickListener {
            val primary = ContextCompat.getColor(this, R.color.colorPrimary)
            val accent = ContextCompat.getColor(this, R.color.colorAccent)
            if (toggleButtonLayoutText.selectedColor == accent) {
                toggleButtonLayoutText.selectedColor = primary
            } else {
                toggleButtonLayoutText.selectedColor = accent
            }
        }
    
        buttonSetDividerColor.setOnClickListener {
            val gray = Color.GRAY
            val red = Color.RED
            if (toggleButtonLayoutText.dividerColor == gray) {
                toggleButtonLayoutText.dividerColor = red
            } else {
                toggleButtonLayoutText.dividerColor = gray
            }
        }
    }
    

    }`

    opened by dedsec1911 0
  • AAR library assembling

    AAR library assembling

    Hi! I'm appologise for of-topic question, but how do you managed assembling of your project to .aar, which contains all sources and documentation? I'm trying to do same thing with my project, but still have no result. Sources are avalible after adding .jar in addition to .aar. Then i cloned your project and tryed to build .aar from it's sources and got same result. As a conclusion -- i`m doing something wrong...

    task sourceJar(type: Jar) {
        classifier = 'sources'
        from android.sourceSets.main.java.srcDirs
    }
    
    task javadoc(type: Javadoc) {
        failOnError  false
        source = android.sourceSets.main.java.sourceFiles
        classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
        classpath += configurations.compile
    }
    task addMySourcesToAar(type: Jar) {
        archiveName "ttsmanager.aar"
        destinationDir file("build")
        from zipTree("build/outputs/aar/ttsmanager-release.aar")
        from fileTree("build").include("libs/ttsmanager-sources.jar")
    }
    afterEvaluate { project ->
        project.tasks.preBuild.dependsOn sourceJar
        project.addMySourcesToAar.dependsOn build
    }
    artifacts {
        javadoc
        archives addMySourcesToAar.archivePath
    }
    

    Can you help me?

    opened by iqorqua 0
  • setSelected() does not set the background color

    setSelected() does not set the background color

    Hi,

    When invoking toggle.setSelected(true) the button gets selected but the button background doesn't show the selection. 2019-06-28_11:33:19-maindesk_001 I've already found a workaround for this issue: use toggle.setToggled(toggle.getId(), true);: 2019-06-28_11:33:27-maindesk_001

    As a developer I'm expecting that setSelected(true) selects the toggle and marks the toggle background as selected. Could you fix this small bug?

    With kind regards, Eimert

    opened by Eimert 1
Releases(1.3.0)
  • 1.3.0(Jun 7, 2019)

    • Migration to AndroidX
    • Add Toggle.toggleButtonLayout and Toggle.toggleView to allow for easier access to the views themselves.
    • Modify ToggleButtonLayout.onToggledListener to where it passes the toggleButtonLayout itself as well, thanks to @bmc08gt The upgrade path for this is simply to change your listener:
    toggleButtonLayout.onToggledListener = { toggle, selected ->
    
    }
    

    adding the first param:

    toggleButtonLayout.onToggledListener = { toggleButtonLayout, toggle, selected ->
    
    }
    
    Source code(tar.gz)
    Source code(zip)
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Jan 3, 2023
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included ?? • Setup ??️ • Migration Guide ??

Mike Penz 11.6k Dec 27, 2022
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Florent CHAMPIGNY 8.2k Jan 1, 2023
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Jan 9, 2023
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
Modular and customizable Material Design UI components for Android

Material Components for Android Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of eng

Material Components 14.4k Dec 31, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Jan 5, 2023
A library to bring fully animated Material Design components to pre-Lolipop Android.

Material MaterialLibrary is an Open Source Android library that back-port Material Design components to pre-Lolipop Android. MaterialLibrary's origina

Rey Pham 6k Dec 21, 2022
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
[] Android Library that implements Snackbars from Google's Material Design documentation.

DEPRECATED This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for a

null 1.5k Dec 16, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Jan 3, 2023
A library support form with material design, construct same with Android UI Framework

SwingUI A slight Java Swing library support form with material design, construct same with Android UI Framework writen in Kotlin Supported: 1. Screen:

Cuong V. Nguyen 3 Jul 20, 2021
Android Material Design Components

Android-Material-Design-Components Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. G

Velmurugan Murugesan 3 Jun 10, 2022
A gradle plugin that generates Material Design 3 theme for Android projects.

Same as Google's Material Theme Builder, but as a gradle plugin.

Rikka apps 41 Dec 6, 2022
Material Design icons by Google

Material design icons Material design icons is the official icon set from Google. The icons are designed under the material design guidelines. 4.0.0 U

Google 47.1k Jan 9, 2023
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Kai Zhu 6.1k Dec 30, 2022