Android Material Button with Icon on top of Text

Question

Is it possible to have a material button with an icon on top of its text as such:

If yes, can you please explain how with some code?

Thank you.

Answer 1

You can use the Button attribute "drawableTop" to get the look you are looking for.

android:drawableTop="@drawable/YOUR_DRAWABLE_RESOURCE_NAME"

Below is a sample code on where it is applied:

<Button
     android:id="@+id/your_text_view"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Image"
     android:drawableTop="@drawable/YOUR_DRAWABLE_RESOURCE_NAME"/>

Answer 2

Now you can use the attribute iconGravity="top".

Something like:

<com.google.android.material.button.MaterialButton
    app:icon="@drawable/...."
    app:iconGravity="top" />

Note: It requires at least the version 1.3.0-alpha02.