Search code examples
androidmaterial-designandroid-buttonmaterial-componentsmaterial-components-android

How to create material design button with image and text vertically aligned?


Using Material design, I need to create a button with text and Image aligned vertically.

  <com.google.android.material.button.MaterialButton
                                android:id="@+id/btn"
                                style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
                                android:layout_width="160dp"
                                android:layout_height="160dp"
                                android:clickable="true"
                                android:elevation="4dp"
                                android:fontFamily="@font/roboto_bold"
                                android:onClick="myfunction()"
                                android:text="BUTTON"
                                android:textColor="@android:color/black"
                                android:textSize="20dp" />

Solution

  • Use android:drawableBottom="..." or android:drawableTop="..." to align text and an image vertically.

    Button with drawableTop

    dependencies {
      implementation "com.google.android.material:material:1.2.0-alpha01"
    }
    
      <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@drawable/ic_android_black_24dp"
        android:drawableTint="@color/white"
        app:backgroundTint="#429835"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Hello world" />