Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android round button with icon

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" />
like image 393
Simonas Petkevičius Avatar asked Apr 15 '17 13:04

Simonas Petkevičius


2 Answers

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>
like image 77
Simonas Petkevičius Avatar answered Nov 09 '22 21:11

Simonas Petkevičius


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>
like image 21
Muhib Pirani Avatar answered Nov 09 '22 22:11

Muhib Pirani