Android - Two round ImageButtons with fill color, stroke and icon

Question

I am trying to create 2 Buttons/ImageButtons in Android. Both of them have an icon in them. The first button has stoke, and the second button is filled. I have tried creating drawable and some other combinations, but I am finding it hard to get the combinations right. Can anyone please help in generating the xml for the buttons? Following are the designs of the buttons. Edit - NOTE: I am working with Vector Drawables.

Thanks in advance.

Check https://stackoverflow.com/questions/9884202/custom-circle-button/57800511#57800511 — Gabriele Mariotti, Mar 13 '21 at 08:15

score 2 · Answer 1 · edited Feb 18 '23 at 12:30

You can achieve this using a MaterialButton. You can find all material button attributes in the Material Design Documentation. To use the material designs your app theme style must inherit from Theme.MaterialComponents. eg: Theme.MaterialComponents.DayNight.DarkActionBar

1.For the Stroke Image Button you can do it like below:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:padding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:backgroundTint="@android:color/white"
    app:strokeWidth="3dp"
    app:strokeColor="#3e3e3e"
    app:iconTint="#3e3e3e"
    app:icon="@drawable/ic_add_24dp"
    app:iconSize="34dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Button.Circle"/>

The key points here is the use of the style Widget.MaterialComponents.Button.OutlinedButton.Icon to set the Button Outline Style and the custom app:shapeAppearanceOverlay style where you can draw the circle shape by defining the corner size to be 50% in your styles.xml like below:

<style name="ShapeAppearanceOverlay.App.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
 </style>

2.For the Fill Image Button you can do it like below:

<com.google.android.material.button.MaterialButton
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:padding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:backgroundTint="#3e3e3e"
    app:icon="@drawable/ic_pedal_bike_24dp"
    app:iconSize="24dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Button.Circle"/>

which is the same as above without the style Widget.MaterialComponents.Button.OutlinedButton.Icon

Vector drawables for the above sample are: drawable/ic_add_24dp.xml:

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

and drawable/ic_pedal_bike_24dp.xml:

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M18.18,10l-1.7,-4.68C16.19,4.53 15.44,4 14.6,4H12v2h2.6l1.46,4h-4.81l-0.36,-1H12V7H7v2h1.75l1.82,5H9.9c-0.44,-2.23 -2.31,-3.88 -4.65,-3.99C2.45,9.87 0,12.2 0,15c0,2.8 2.2,5 5,5c2.46,0 4.45,-1.69 4.9,-4h4.2c0.44,2.23 2.31,3.88 4.65,3.99c2.8,0.13 5.25,-2.19 5.25,-5c0,-2.8 -2.2,-5 -5,-5H18.18zM7.82,16c-0.4,1.17 -1.49,2 -2.82,2c-1.68,0 -3,-1.32 -3,-3s1.32,-3 3,-3c1.33,0 2.42,0.83 2.82,2H5v2H7.82zM14.1,14h-1.4l-0.73,-2H15C14.56,12.58 14.24,13.25 14.1,14zM19,18c-1.68,0 -3,-1.32 -3,-3c0,-0.93 0.41,-1.73 1.05,-2.28l0.96,2.64l1.88,-0.68l-0.97,-2.67c0.03,0 0.06,-0.01 0.09,-0.01c1.68,0 3,1.32 3,3S20.68,18 19,18z"/>
</vector>

score 1 · Answer 2 · answered Mar 10 '21 at 04:00

For the first icon use this PNG from material design or use your own icon

<ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="TODO"
            app:srcCompat="@drawable/control_point" />

And for the second I used this icon

<ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#595959"
            app:srcCompat="@drawable/pedal_bike" />

Thank you for your answer @Pam. I forgot to mention that I am working with Vector Drawables. So, png's and icons would not work for me. Thanks. — Tajveer Singh Nijjar, Mar 10 '21 at 18:18

Android - Two round ImageButtons with fill color, stroke and icon

2 Answers2