Selector Switches
This UI component, built for android 5.0+, is inspired from the switches found in the Active Dynamics Panel of the McLaren road cars. It allows the user to quickly toggle through different modes, using a much smaller screen footprint than the conventional buttons. This article is divided into:
- How does it look like ?
- Looks awesome! How do I use it ?
- Whoa! I wanna know how it's built ?
- What else should I know?
- How do I contribute my own designs ?!
Let's get started!
The Styles
The switch can have three styles each one of which offers a different look and usability. Right now the mini and the max are under development but the Normal one works perfectly!
| NORMAL | MAX | MINI |
|---|---|---|
 |
 |
 |
| Optimized for 5 modes or below. | Suitable for 6 or more modes. | Suitable for a refined look. |
| The dial is continuous and the modes are static. | The dial is non-continuous and the modes are recycled, similar to a recycler view, when the dial is revolved. | Also a recycled dial, but more layout friendly, as the switch can be stacked up against the border of the screen. |
Add a selector switch in your app!
This is how you bring this goodness into your project!
1. Download the code
First clone the repo or download the .AAR file and then follow these steps to integrate them into your project.
2. Declare the modes and their colors
Every switch needs a set of modes and each one of these modes has its own color on the dial. These modes and colors are stored in the app in form of array resources. Thus, we need to create two array resources as shown -
<resources>
<!-- The names of the modes -->
<array name="modes">
<item>Low</item>
<item>Medium</item>
<item>High</item>
</array>
<!-- The colors for the modes -->
<array>
<item>@color/lowColor</item>
<item>@color/midColor</item>
<item>@color/highColor</item>
</array>
</resources>Note : The number of modes and colors should be same. If not, the app will crash after throwing an IllegalSelectorException.
3. Add the switch and link the colors and modes
Now let's add a switch to the layout and link the modes and colors ,that we created earlier, to the switch.
<SelectorSwitch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
colors="@array/colors"
modes="@array/modes" />Structure of the switch
You might want to zoom into the this a bit!
A few things about the inner workings
This section will be added soon. Until then you can refer to the docs.
Contribute!
You can check out these issues and help me solve them. Thanks in advance!
I hope you like and find this little thing I made useful for your projects. Cheers!
ADK
Follow me here.
I post awesome stuff here.