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.

You can use linear layout with veritcal orientation having 2 childs : 1st Imageview, 2nd TextView. and can use onClick events on linear layout — Akash Bisht, May 25 '20 at 13:45
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 — Abraham Mathew, May 25 '20 at 13:57

score 13 · Accepted Answer · answered Jul 24 '20 at 08:14

13

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.

answered Jul 24 '20 at 08:14

Gabriele Mariotti

320,139
94
887
841

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]. – golkarm Jan 22 '21 at 18:29
@Mohammad7G Are you using the version 1.3.0? Here the 1.3.0-rc01 and the value exist: https://github.com/material-components/material-components-android/blob/1.3.0-rc01/lib/java/com/google/android/material/button/res/values/attrs.xml#L66 – Gabriele Mariotti Jan 23 '21 at 08:53

score 2 · Answer 2 · edited May 25 '20 at 14:23

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

Android Material Button with Icon on top of Text

2 Answers2

Linked

Related