How to create small round buttons that contains an icon at the centre?

Question

I want to create buttons in my android application, just like shown in the image below

you can se all the four buttons below.

I want to give them a custom color background and then an icon on the top. There is no way I'm able to adjust the icon at the centre of button.

How can I achieve the desired effect?

Here is the best library for the buttons - https://android-arsenal.com/details/1/6285 — Chirag, Jan 02 '18 at 08:04
Android library is enough. Just read [this answer](https://stackoverflow.com/a/10267166/5154891) — Thomas Mary, Jan 02 '18 at 08:04
@ThomasMary I know how to create round buttons but I am not able to put an icon at the centre of the button with a colored background. — Yatendra Rathore, Jan 02 '18 at 08:07

score 3 · Answer 1 · answered Jan 02 '18 at 08:09

You can do this with FrameLayout and for circle background you need to create a shape drawable file. Refer my answer here.

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_shape"
        android:clickable="true"
        android:focusable="true"
        android:visibility="visible"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="4dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star_border_black_24dp"/>
    </FrameLayout>

round_shape.xml add this file in drawable folder

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <gradient
        android:angle="270"
        android:startColor="@color/profile_grey"
        android:endColor="@color/profile_grey"/>

</shape>

score 0 · Answer 2 · answered Jan 02 '18 at 08:08

0

Create Drawable and use that drawable as Button Background.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
        <stroke android:color="#e1e1e1"
            android:width="0.5dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
  </item>
</selector>

This Code create a circle with white background.

answered Jan 02 '18 at 08:08

Yogesh Choudhary Paliyal

604
1
8
23

True that but putting an icon on the top of that background and that too in the middle is another story. – Yatendra Rathore Jan 02 '18 at 08:09
1

@YatendraRathore, Check my answer it may help for you – Naveen Kumar M Jan 02 '18 at 08:10
`` Try This. Take Image View Instead of Button. – Yogesh Choudhary Paliyal Jan 02 '18 at 08:11

How to create small round buttons that contains an icon at the centre?

2 Answers2