How to make a button with rounded corners, background image and text in android

Question

I'm trying to create an android button whose text can be changed (to be able to internationalize the app easily), but at the same time have a background, and using rounded corners if possible.

So far, if I use a background image I can not get the corners to be round and vice versa.

The last thing I tried is to create these xml file

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="2dp" android:color="#FF404040" />
    <corners android:radius="6dp" />
    <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="2dp" android:color="#FF404040" />
    <corners android:radius="6dp" />
    <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>

and this button, but I can not put a background image:

 <Button
        android:id="@+id/button"
        android:layout_width="235dp"
        android:layout_height="wrap_content"
        android:background="@drawable/background_selector"
        android:text="Button"
        tools:layout_editor_absoluteX="101dp"
        tools:layout_editor_absoluteY="277dp" />

What I'm trying to achieve is a result similar to the Morning Ritual button in this app, for example, if that is a button, which I do not know either.

Answer 1

You can use CardView or If you want to create Button, try this xml drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="5dp">
            <corners
                 android:bottomRightRadius="4dp"
                 android:bottomLeftRadius="4dp"
                 android:topLeftRadius="4dp"
                 android:topRightRadius="4dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/yourImage" />
</layer-list>

Answer 2

You can use ImageButton, where android:src - image you need and android:background - rounded shape:

<ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/roundedImageButton"
            android:src="@drawable/backgound"
            android:text="TEXT" 
            android:background="@drawable/roundedShape" />

Or CardView:

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="5dp"> 

     <ImageView
        android:src="@drawable/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

     <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TEXT"/>

   </androidx.cardview.widget.CardView>