Gaute Meek Olsen

Posted on Aug 7, 2019 • Edited on Jan 1, 2023 • Originally published at gaute.dev

Android: Button with Both Image and Text

#android

Let's say you want a button to show an image with accompanying text. Do you then add two views, align them together and have two click listeners?

No there is an easier way.

<?xml version="1.0" encoding="utf-8"?>
<Button 
android:text="Start" 
android:drawableTop="@drawable/start_wrap" 
android:drawableTint="@android:color/white" 
android:drawablePadding="10dp" 
android:background="@android:color/transparent" 
android:textColor="@android:color/white"/>

Add a drawable to the button like this. And if you want to change the size, I like to create a drawable wrapper which is responsible for sizing. Like this:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
  <item 
  android:drawable="@drawable/baseline_camera_enhance_24" 
  android:width="40dp" 
  android:height="40dp" 
  /> 
</layer-list >