I'm trying to make a custom switch like this:
with these properites:
- text on both sides always shown.
- different colors for on and off.
and these are two problems I faced since the switch only shows the text on the chosen side , and I can't seem to find a place where I can specify two different colors?
can I achieve this using the regular switch in android studio or must I use some library?
Thank you.
After researching I found a way that gives me exactly what I needed, this is what I got:
in case of anyone looking for a way to do it, this is how:
based on this post answer , which worked great for me.
this is what I did, I created two drawables one for On and another for Off :
switch_on.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="@color/colorGray"/>
<item android:drawable="@color/colorPrimary" android:state_checked="true" />
<item android:drawable="@color/colorPrimaryDark" android:state_pressed="true" />
<item android:drawable="@color/transparent" />
</selector>
switch_off.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="@color/colorGray"/>
<item android:drawable="@color/gray_light" android:state_checked="true" />
<item android:drawable="@color/black_overlay" android:state_pressed="true" />
<item android:drawable="@color/transparent" />
</selector>
Next , created a drawable for the outline of the switch. outline.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#80ffffff" />
<stroke
android:width="1dp"
android:color="@color/gray_light" />
</shape>
one thing that I added is a drawable for the text color, because the color of the text changes depending on whether it's checked or not, this is it : switch_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/colorWhite"/>
<item android:state_checked="true" android:color="@color/colorWhite"/>
<item android:color="@color/gray_light"/>
</selector>
and finally, created RadioGroup
in my layout this way:
<RadioGroup
android:id="@+id/toggle"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="@drawable/outline"
android:checkedButton="@+id/off"
android:orientation="horizontal">
<RadioButton
android:id="@+id/off"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="@drawable/switch_off"
android:button="@null"
android:gravity="center"
android:padding="@dimen/fab_margin"
android:text="@string/off"
android:textColor="@drawable/switch_text" />
<RadioButton
android:id="@+id/on"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="@drawable/switch_on"
android:button="@null"
android:gravity="center"
android:padding="@dimen/fab_margin"
android:text="@string/on"
android:textColor="@drawable/switch_text" />
</RadioGroup>
Notice the usage of each drawable in the right place:
android:background="@drawable/outline"
for the RadioGroup
android:background="@drawable/switch_off"
for the first RadioButton
android:background="@drawable/switch_on"
for the second RadioButton
android:textColor="@drawable/switch_text"
for both Radio Buttons
And that's all.
i think this library can help you
implementation 'com.github.angads25:toggle:1.0.0'
Usage
Start by adding a Switch (eg. LabeledSwitch) in your xml layout as:
<com.github.angads25.toggle.LabeledSwitch android:id="@+id/switch4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:textSize="14sp" app:on="false" app:textOn="ON" app:textOff="OFF" app:colorOn="#00c4a6" app:colorBorder="#00c4a6"/>
To the reference of Switch in your Activity/Fragment class set a Toggle Event Handler to it as below:
LabeledSwitch labeledSwitch = findViewById(R.id.switch); labeledSwitch.setOnToggledListener(new OnToggledListener() { @Override public void onSwitched(LabeledSwitch labeledSwitch, boolean isOn) { // Implement your switching logic here } });
That's It. All your switching callbacks would be handled in onSwitched method, parameter isOn will provide the current state of the switch.
Switches Available
Use ToggleButton(change height/width as per image ratio) & selector, here's the code
<ToggleButton
android:id="@+id/toggle_"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:background="@drawable/on_off"
android:textOff=""
android:textOn=""/>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="@drawable/ic_on" />
<item android:state_checked="false"
android:drawable="@drawable/ic_off" />
</selector>
To create ON and OFF labels for the switch you can use the attributes android:textOn
and android:textOff
with the switch declaration.
To ensure, that the text lebals are always displayed, especially for API Level bigger API21, also use this attribute: android:showText="true"
.
Then your switch should look like this:
<Switch
android:id="@+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
/>
In order to change the default color, you have to specify a seperate design for it like that:
1. In file values\styles.xml
define a style like that:
<style name="CustomSwitchTheme" parent="Theme.AppCompat.Light">
<item name="android:colorControlActivated">#FF0000</item>
</style>
It is important, that you also reference the correct parent theme.
2. After defining the new switch style, you can link your custom style to the switch with the attribute
android:theme="@style/CustomSwitchTheme"
Finally your Switch should look like that:
<Switch
android:id="@+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
android:theme="@style/CustomSwitchTheme"
/>
来源:https://stackoverflow.com/questions/52496853/android-custom-switch