DEV Community

Cover image for Android: Button with Both Image and Text
Gaute Meek Olsen
Gaute Meek Olsen

Posted on • Edited on • Originally published at gaute.dev

Android: Button with Both Image and Text

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"/>
Enter fullscreen mode Exit fullscreen mode

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 > 
Enter fullscreen mode Exit fullscreen mode

That is all, simple and easy

Top comments (0)