CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
user5188154
user5188154

Reputation: 161

Creating a button with an icon in the middle

I'm trying to replicate the look of the Like and Comment button in this image:

https://i.sstatic.net/ibWsE.png

I understand how to create a shape, but I'm not sure how I could add the image icon in the middle of the button (and the "Like" text).

Here's the shape layout I have so far:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

            <solid android:color="@color/gray"/>
            <size android:width="40dp" android:height="24dp"/>
        </shape>
    </item>
</layer-list>

For the like button, how do I add the drawable heart icon I have next to the text "Like". And for the comment button, how do I add the drawable comment icon I have and center it in the button?

Upvotes: 1

Views: 1587

Answers (1)

Faizan Tariq
Faizan Tariq

Reputation: 371

This is simple

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:src="@drawable/comments"
    android:background="@drawable/rounded_corner_grey_bg"
    android:layout_gravity="center"/>

and here is rounded_corner_grey_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#d3d3d3"/>
    <stroke android:width="3dip"
        android:color="#d3d3d3" />
    <corners android:radius="5dip"/>/>
</shape>

enter image description here

Upvotes: 5

Related Questions