Android round button with icon

Question

I am trying to make a button like this Button Image but I cannot put the icon in front of the text. The button I made now looks like this button image now. So, the main problem is how could I get the icon to be near in front of the text?

This is my button shape code:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="50dp"
        />
    <solid
        android:color="#00A651"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="300dp"
        android:height="20dp"
        />
</shape>

This is the code I use to implement button into activity:

<Button
        android:id="@+id/problem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/buttonshape"
        android:drawableStart="@drawable/ic_rate_review_black_24dp"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:text="@string/button_problem" />

Solution 1

Everything worked as Muhib Pirani suggested. Thanks to him.

Button's code now looks like this:

<Button
    android:id="@+id/problem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/buttonshape"
    android:drawableStart="@drawable/ic_rate_review_black_24dp" 
    android:drawablePadding="5dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    android:text="@string/button_problem"
    android:textColor="#FFFFFF"
    android:textSize="15sp" />

The ButtonShape.xml looks like this:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="50dp"/>
    <solid
        android:color="#00A651"
        /> </shape>

Solution 2

remove size and padding from your buttonXml reduce your radius

and add paddingTop and paddinBottom to your or you can also use TextView as button have some padding already assigned with it.

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:radius="10dp"
    />
<solid
    android:color="#00A651"
    />


</shape>

Solution 3

You can use the MaterialButton:

 <MaterialButton
     style="@style/Widget.MaterialComponents.Button.IconOnly"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     .../>

with:

<style name="Widget.MaterialComponents.Button.IconOnly">
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">12dp</item>
    <item name="android:minHeight">12dp</item>
    <item name="iconGravity">textStart</item>
</style>