Home Material 3 MaterialSwitch size is too large by default? How to make it smaller?

Questions

Material 3 MaterialSwitch size is too large by default? How to make it smaller?

June 30, 2023

I’m using the code below to create a material 3 switch in Android using XML, and it’s much larger than a normal switch. Is there any way to make it smaller?

<com.google.android.material.materialswitch.MaterialSwitch   
   android:id="@+id/biometrics_switch"   
   style="@style/Widget.Material3.CompoundButton.MaterialSwitch"   
   android:layout_width="wrap_content"   
   android:layout_height="wrap_content"   
   app:layout_constraintEnd_toEndOf="parent"   
   app:layout_constraintTop_toTopOf="parent"   
   app:switchPadding="@dimen/_10sdp" android:minHeight="@dimen/_10sdp" 
   app:thumbTint="@color/white" app:trackTint="@color/neutral_800" />

>Solution :

In Material Switch width and height affect on clickable area for switch
you should use scaleX and scaleY to change the size of it.
Also In jetpack compose you should use Modifier.scale()

This is a sample code for it:

<com.google.android.material.materialswitch.MaterialSwitch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.8"
android:scaleY="0.8"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>