Make borderless image button small on Android

Question

There is some closeable view in my app and it has a close button in header. I want make this button borderless and small.
The code:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="?android:attr/borderlessButtonStyle"
    android:layout_margin="0dp"
    android:padding="0dp"
    android:src="@android:drawable/ic_menu_close_clear_cancel"/>

In result the button is borderless but has much empty place around cross image (button is hitted on screenshot to make empty space visible)

How could I fix it?

will you share image of your output ...... – sushildlh Sep 08 '16 at 13:34 — sushildlh, Sep 08 '16 at 13:34

score 7 · Accepted Answer · answered Apr 05 '18 at 14:10

7

You should use:

  android:background="?selectableItemBackgroundBorderless"

answered Apr 05 '18 at 14:10

hector6872

1,336
14
18

Couldn't check your solution, but I believe it workable and it looks pretty. Accepted! – Yara_M May 15 '18 at 07:31

score 3 · Answer 2 · edited Oct 06 '19 at 17:30

3

Added

 android:minHeight="0dp"
 android:minWidth="0dp"
 android:padding="2dp"

The result

Also I'll use negative margins to place the button closer to corner.

edited Oct 06 '19 at 17:30

Glorfindel

21,988
13
81
109

answered Sep 08 '16 at 14:04

Yara_M

633
9
29

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

You can use the following on your ImageButton to remove the 'border':

android:background="@android:color/transparent"

or

android:background="@null"

If you would like change the background when the user clicks the button you can create a selector. Example ImageButton doesn't highlight on click with Transparent background.

edited May 23 '17 at 11:53

Community

1
1

answered Sep 08 '16 at 13:53

Goldfish

66
4

score 0 · Answer 4 · answered May 24 '18 at 11:47

With the introduction of ConstraintLayout, you can use constraints to reduce the width of the borderless ImageButton, that's way too wide by default, by constraining it to be as wide as the height:

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_closeable_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:contentDescription="@string/action_close"
        android:src="@android:drawable/ic_menu_close_clear_cancel"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

I don't recommend you to make it any smaller than this because the touch target needs to be at least 48dp x 48dp, as for Google's Material Design guidelines, otherwise a user would have a hard time trying to touch it.

If you really need it to look like it's closer to the edges of the view, you can always use an image that's not centered (has transparent padding on one or two sides), but I'd try my best to avoid doing this workaround and try rethinking my app's design in order to accommodate the button as it is.

score -1 · Answer 5 · answered Sep 08 '16 at 13:40

-1

use textView for that.. and use textview.OnTouchListener finally onTouch change the color of text.. thats it

or else in your code just use

     android:background="@null"

answered Sep 08 '16 at 13:40

snehasish

171
2
10

I believe there is more admissible solution – Yara_M Sep 08 '16 at 13:46
android:background="@null" use this..this is the only one solution – snehasish Sep 08 '16 at 14:22
@snehasish but then it prevents the button from being highlighted when pressed. – Isaac Darlong Jun 02 '17 at 08:47

Make borderless image button small on Android

5 Answers5