ToggleIconView

ToggleIconView is a collection library of animated two-stage toggle icons for Android.

Requirements

• Android 5.0 (API 21) or higher

Installation

JitPack repository

// Project level build.gradle
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

If the above doesn't work for you, try the following:

// settings.gradle
...
dependencyResolutionManagement {
    ...
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
...

Implementation

// App level build.gradle
dependencies {
    implementation "com.github.ozgurg:ToggleIconView:3.3.0"
}

Usage

<!-- See "Built-in icons" section for other icons -->
<og.android.lib.toggleiconview.rounded.PlayPause
    android:layout_width="24dp"
    android:layout_height="24dp" />

API

ToggleIconView, uses AnimatedVectorDrawableCompat under the hood and extends AppCompatImageView. So you can do anything you can with AppCompatImageView like tinting and other stuff. That's why I called it "collection library".

Attributes

Attribute	Description	Type	Default
app:checked	Sets the initial state of the icon	Boolean	false
app:checkedContentDescription	Sets the initial checked content description of the icon	String	null
app:uncheckedContentDescription	Sets the initial unchecked content description of the icon	String	null
app:checkedTooltipText	Sets the initial checked tooltip text of the icon	String	null
app:uncheckedTooltipText	Sets the initial unchecked tooltip text of the icon	String	null

Methods

Method	Description	Return
toggle()	Toggles between the checked and unchecked state of the icon	-
.isChecked isChecked()	Returns the checked state of the icon	Boolean
.isChecked = Boolean setChecked(isChecked: Boolean)	Sets the checked state of the icon	-
.checkedContentDescription getCheckedContentDescription()	Returns the checked content description of the icon	String?
.checkedContentDescription = String? setCheckedContentDescription(value: String?)	Sets the checked content description of the icon	-
.uncheckedContentDescription getUncheckedContentDescription()	Returns the unchecked content description of the icon	String?
.uncheckedContentDescription = String? setUncheckedContentDescription(value: String?)	Sets the unchecked content description of the icon	-
.checkedTooltipText getCheckedTooltipText()	Returns the checked tooltip text of the icon	String?
.checkedTooltipText = String? setCheckedTooltipText(value: String?)	Sets the checked tooltip text of the icon	-
.uncheckedTooltipText getUncheckedTooltipText()	Returns the unchecked tooltip text of the icon	String?
.uncheckedTooltipText = String? setUncheckedTooltipText(value: String?)	Sets the unchecked tooltip text of the icon	-

Events

Event	Description
onCheckedChanged(view: ToggleIconView, isChecked: Boolean)	Triggers when the checked state of the icon changed

Built-in icons

All icons have the same duration (@android:integer/config_shortAnimTime) and interpolator (@android:interpolator/fast_out_slow_in), but I manually capture their previews; so timings may look different.

Preview	Package
	[Rounded] PlayPause og.android.lib.toggleiconview.rounded.PlayPause
	[Sharp] PlayPause og.android.lib.toggleiconview.sharp.PlayPause
	[Rounded] SoundOnOff og.android.lib.toggleiconview.rounded.SoundOnOff
	[Sharp] SoundOnOff og.android.lib.toggleiconview.sharp.SoundOnOff
	[Sharp] FlashOnOff og.android.lib.toggleiconview.sharp.FlashOnOff
	[Sharp] AirplaneModeOnOff og.android.lib.toggleiconview.sharp.AirplaneModeOnOff
	[Sharp] CameraSwitch og.android.lib.toggleiconview.sharp.CameraSwitch
	[Sharp] Refresh og.android.lib.toggleiconview.sharp.Refresh

How do you create your custom icon?

1) Create an icon

First, you need to create an AnimatedVectorDrawable icon. I highly recommend using Shape Shifter.

After creating and exporting your icon, add the icon to your project's drawable folder.

2) Implement the icon

Extend ToggleIconView class and set checked and unchecked icon you created.

package [PACKAGE_NAME]

import android.content.Context
import android.util.AttributeSet
import og.android.lib.toggleiconview.ToggleIconView

class [NAME_YOUR_ICON] @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) :
    ToggleIconView(
        context, attrs, defStyleAttr,
        R.drawable.[CHECKED_ICON],
        R.drawable.[UNCHECKED_ICON]
    )

Then, use it in your layout.

<[PACKAGE_NAME].[NAME_YOUR_ICON]
    android:layout_width="24dp"
    android:layout_height="24dp" />

License