I have been trying to create a customized toggle button in native android, But I'm not able to achieve it. Here is the Image which I want to look like :
can someone help me on this?
CodePudding user response:
If you need to create a custom switch
, you don't have to create a custom view. In fact, with the help of some drawables you will be able to achieve what you want.
I will give an example and you can customize it to your needs.
There are three main resources that you need.
- Thumb
- Track
- Text Coloring.
Let's start with the Thumb
which represents the moving part in the Switch
.
thumb_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@android:color/white" />
<size android:width="120dp" android:height="@dimen/toggle_button_height" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@android:color/white" />
<size android:width="120dp" android:height="@dimen/toggle_button_height" />
</shape>
</item>
</selector>
Then we need to draw the track which represents the bottom layer of the Switch
.
track_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@android:color/darker_gray" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@color/colorPrimary" />
</shape>
</item>
</selector>
Now moving to the last part which is the text coloring to give our text a different color depending on the selection state.
text_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/darker_gray" android:state_checked="false" />
<item android:color="@color/colorPrimary" android:state_checked="true" />
</selector>
We need to create a style for this text because it can't be added directly to the Switch
.
So, in your styles.xml
create a new style for the text color.
styles.xml
<style name="SwitchTextAppearance" parent="@android:style/TextAppearance.Holo.Small">
<item name="android:textColor">@drawable/text_color_selector</item>
<item name="android:textSize">14sp</item>
</style>
Finally, we need to tie all parts together in our layout.
layout.xml
...
<androidx.appcompat.widget.SwitchCompat
android:id="@ id/switch"
android:layout_width="240dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:checked="false"
android:textAllCaps="false"
android:textOff="Off"
android:textOn="On"
android:textSize="15sp"
android:thumb="@drawable/thumb_selector"
app:showText="true"
app:switchTextAppearance="@style/SwitchTextAppearance"
app:track="@drawable/track_selector" />
...
Results
CodePudding user response:
Key classes are the following:
ToggleButton Switch SwitchCompat CompoundButton
You can even use Slider. Init the thumb and the track.
CodePudding user response:
To achieve this you can use a TabLayout
inside a MaterialCardView
. The MaterialCardView
is needed to draw the corner radius for the outer section. In the TabLayout
you can use the app:tabBackground
to set a Drawable Selector for the Tab selected/unselected state and the app:tabTextAppearance
where you can set a custom font style or size for the Tab.
Xml Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:cardBackgroundColor="#7a87a4"
app:cardCornerRadius="10dp">
<com.google.android.material.tabs.TabLayout
android:id="@ id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:backgroundTint="@android:color/transparent"
android:layout_margin="1dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="@android:color/transparent"
app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="@android:color/black"
app:tabBackground="@drawable/tabs_selector"
app:tabTextAppearance="@style/CustomTabTextAppearance">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Current Location" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Location Name" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
where @drawable/tabs_selector
is a drawable Selector to set the Tab Selected/Unselected state like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:state_selected="false">
<shape android:shape="rectangle">
<solid android:color="@android:color/transparent" />
<corners android:radius="0dp" />
</shape>
</item>
</selector>
and @style/CustomTabTextAppearance
is a Custom Tab Text Appearance in case you want to change the Tab size or Font Family like below:
<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
<item name="fontFamily">@font/roboto_mono</item>
<item name="android:fontFamily">@font/roboto_mono</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">14sp</item>
</style>
Result: