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.

Bethesda

You can use linear layout with veritcal orientation having 2 childs : 1st Imageview, 2nd TextView. and can use onClick events on linear layout – Dalston

You can use a drawableTop in your layout and give whatever icon you want.If its a textView it will be more easy.If it's a button then you will have to provide a transparent background – Wideangle

Answer 1

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.

Sejm

it does not work for me. == > AAPT: error: 'top' is incompatible with attribute iconGravity (attr) flags [end=3, start=1, textEnd=4, textStart=2] [weak]. – Masinissa

@Mohammad7G Are you using the version 1.3.0? Here the 1.3.0-rc01 and the value exist: github.com/material-components/material-components-android/blob/… – Sejm

Answer 2

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

Zloty