androidxmlkotlinandroid-layoutmaterial3

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


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"/>