How to create a circular Button or ImageButton or ImageView with a bitmap drawable and padding

Question

I can't figure out how to create a Button or ImageButton or ImageView or anything that has:

A bitmap drawable with the icon
A padding

What i have try now is this:

<ImageButton
            android:id="@+id/ShowInstructionsImageButton"
            android:contentDescription="@string/Common_InformationIconContentDescription"
            android:layout_alignParentRight="true"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="14dp"
            android:backgroundTint="@color/normalTextColorPrimaryDark"
            android:background="@drawable/ic_info_bitmap"
            android:layout_centerVertical="true" />

Which works but the clickable area of the ImageButton is 20dp, how i can make the clickable area 48dp?

I have check this discussion here Padding not working on ImageButton but if i use android:src instead of android:background i get a black box in the place of the icon

the icon is this:

That should be easy i guess. Just have the selector circular background without Bitmap . and keep the icon as src . If that doesn't not work pls add the drawable with question and also add expected output image . — ADM, Oct 11 '20 at 08:33

score 1 · Answer 1 · answered Oct 11 '20 at 08:53

You can use a MaterialButton:

    <com.google.android.material.button.MaterialButton
        android:layout_width="48dp"
        android:layout_height="48dp"
        style="@style/Widget.App.Button.IconOnly"
        app:icon="@drawable/ic_add_24px"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
        />

with:

<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton" >
    <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>
    <item name="strokeWidth">3dp</item>
    <item name="strokeColor">@color/...</item>
</style>

and a circular shape:

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

Im getting an error that attr/cornerSize and attr/cornerFamily not found, Maybe Xamarin.Android does not have the same styles with Java, if you have use this code in Java — CDrosos, Oct 11 '20 at 09:01

aminography · Answer 2 · 2020-10-11T08:48:40.437

0

First, try to use androidx.appcompat.widget.AppCompatImageButton or androidx.appcompat.widget.AppCompatImageView instead of ImageButton to gain the advantage of backward compatibility.

After that, to show a drawable using it, you should use app:srcCompat, and not android:background. Now, if you add some padding to the view, it will be applied to the showing drawable.

<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/ShowInstructionsImageButton"
    android:contentDescription="@string/Common_InformationIconContentDescription"
    android:layout_alignParentRight="true"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:padding="14dp"
    android:layout_centerVertical="true"
    app:tint="@color/normalTextColorPrimaryDark"
    app:srcCompat="@drawable/ic_info_bitmap" />

edited Oct 11 '20 at 08:48

answered Oct 11 '20 at 08:34

aminography

21,986
13
70
74

1

when i use app:srcCompat instead of background i get a black box in the place of the icon. my icon is a bitmap .png file – CDrosos Oct 11 '20 at 08:40
Is it possible to post the image? – aminography Oct 11 '20 at 08:44
i get the same result with android:src, i have post the image – CDrosos Oct 11 '20 at 08:46
I found out. The problem is `android:backgroundTint`. Replace it with `app:tint` in addition to using `app:srcCompat`. – aminography Oct 11 '20 at 08:49
1

im still getting the same black box, im starting to wonder if it is because im coding on Xamarin and it has to do something about it – CDrosos Oct 11 '20 at 08:59
So weird! Please replace `AppCompatImageButton` with `AppCompatImageView` and check it again. – aminography Oct 11 '20 at 09:01

CDrosos · Accepted Answer · 2020-10-12T07:22:25.440

I found a solution that works for me:

<ImageButton
            android:id="@+id/ShowInstructionsImageButton"
            android:contentDescription="@string/Common_InformationIconContentDescription"
            android:layout_alignParentRight="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="14dp"
            android:backgroundTint="@color/normalTextColorPrimaryDark"
            android:background="@drawable/ic_info_layer"
            android:layout_centerVertical="true" />

with ic_info_layer.xml:

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

  <item
      android:drawable="@drawable/ic_info_bitmap"
      android:width="@dimen/IconSize"
      android:height="@dimen/IconSize"
      android:right="@dimen/ButtonIconPadding"
      android:left="@dimen/ButtonIconPadding"
      android:top="@dimen/ButtonIconPadding"
      android:bottom="@dimen/ButtonIconPadding"
      />

</layer-list >

On API < 23 it is important the ImageButton to have fixed width and height because layer width and height is being ignored.

You can mark this answer later which will help more people with same problem:). — nevermore, Oct 12 '20 at 06:48
This doesn't work for me: I only have the ic_info_bitmap that is visible, with a transparent background. — Gold.strike, Mar 22 '22 at 14:20

How to create a circular Button or ImageButton or ImageView with a bitmap drawable and padding

3 Answers3