Android ImageButton without border but still with click indication

Question

How to create an ImageButton without border (just the image should be visible)? One could achieve this by setting imageButton.setBackgroundDrawable(null), but this also removes the focus and selection colors.

The goal is that initially only the image without borders is visible. But when the user focuses/touches/clicks the image this should be indicated by hightlighting the image like regular buttons.

Solution in Java-Code for API 14 is preferred. Thank you!

did u tried in your imagebutton xml code by setting android:background="null". this will sets the transparent background — manivannan, Jun 19 '13 at 13:21

score 14 · Accepted Answer · answered Jun 20 '13 at 15:05

As has been mentioned, the borderlessButtonStyle built into the default themes on API11 and above is the simplest way to achieve this effect. You mentioned you are creating your buttons in Java code instead of XML, so there are two options depending on how you need to apply the style.

Option #1: Add it to the theme

If all the Button or ImageButton instances in your application (or at least within the Activity) need to have this style applied, add the styling to your theme instead:

<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light">
        <!-- Default style for ImageButtons -->
        <item name="android:imageButtonStyle">?android:borderlessButtonStyle</item>
        <!-- Default style for Buttons -->
        <item name="android:buttonStyle">?android:borderlessButtonStyle</item>
    </style>
</resources>

With this theme applied to your Application or Activity, you won't have to declare the style of each element, you can just declare them as

Button button = new Button(context);
ImageButton imageButton = new ImageButton(context);

And the styling will be pulled from the theme.

Option #2: Declare it in the constructor

If only a couple buttons need to be styled this way, you can pass the style attribute you want to apply directly to each view, like so:

Button button = new Button(context, null, android.R.attr.borderlessButtonStyle);
ImageButton imageButton = new ImageButton(context, null, android.R.attr.borderlessButtonStyle);

This version supplies a different default style attribute for the widget to use.

This does not work for me with – Display name Oct 14 '16 at 11:51 — Display name, Oct 14 '16 at 11:51

score 7 · Answer 2 · answered Jun 20 '13 at 05:39

7

Use borderlessButtonStyle to ImageButton

 <ImageButton
        style="?android:borderlessButtonStyle"
        android:layout_width="58dp"
        android:layout_height="wrap_content"
        android:contentDescription="Delete"
        android:src="@android:drawable/ic_delete" />

Ref : Google I/O 2013 - Android Design for UI Developers

answered Jun 20 '13 at 05:39

Kirit Vaghela

12,572
4
76
80

Any idea, how to set the style attribute to ImageButton in Java code? Without having the ImageButton in any XML file? – Witek Jun 20 '13 at 06:40
I don't have any idea but I find one line from theme.xml `?android:attr/buttonStyle` – Kirit Vaghela Jun 20 '13 at 08:37

Ken Wolf · Answer 3 · 2013-06-20T16:56:33.903

6

Use a selector for the background like this:

/res/drawable/my_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/my_drawable" /> 
    <item android:drawable="@android:color/transparent" />  
</selector>

my_drawable is whatever drawable you want as your border.

Then your ImageButton

<ImageButton
  android:layout_height="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/my_selector"
  android:src="@drawable/your_bitmap" />

your_bitmap is your actual image.

edited Jun 20 '13 at 16:56

answered Jun 10 '13 at 15:40

Ken Wolf

23,133
6
63
84

But what is @drawable/my_drawable? I want the default Holo highlighting and focusing. I would like to do the opposite. Default drawables for pressed, focused,... and 'no image' for default. Is this somehow possible? Isn't it what every app with clickable images does? – Witek Jun 10 '13 at 15:47
@Witek - I would look into the source and copy it. – Ken Wolf Jun 10 '13 at 15:48
Which source file do you mean? – Witek Jun 10 '13 at 15:49
Take a look in `android-sdk\platforms\android-17\data\res` - all the buttons/drawables/layouts for holo are there. Replace `17` with whatever platform (>11) you have – Ken Wolf Jun 10 '13 at 15:53
I have copied the from btn_default_holo_light.xml. But then I get the following error for every -line: Error: No resource found that matches the given name (at 'drawable' with value '@drawable/btn_default_normal_disable_focused'). – Witek Jun 11 '13 at 06:30
1

@Witek put that selector xml in drawable folder – dharmendra Jun 20 '13 at 16:53

jpardogo · Answer 4 · 2013-07-12T10:50:18.627

Your answer is here in the Nick Butcher and Roman Nurik talk for Google I/O 2013 about android design for UI developers.

Min: 31:40:

https://www.youtube.com/watch?v=Jl3-lzlzOJI#t=31m40s

The only problem with this approach is that style="?android:borderlessButtonStyle" is available for API 11 and above so if you want the same behaviour on any API before the 11, then you will have to stick with selectors.

By the way I highly recommend you to watch the whole talk because it is really interesting.

score 0 · Answer 5 · answered Jun 10 '13 at 15:35

0

You have to add

imageButton.setClickable(true);
imageButton.setFocusable(true);

And it will works...

That's the way in your xml file :

android:clickable="true"
android:focusable="true"

Hope this help

answered Jun 10 '13 at 15:35

Adrien Cerdan

1,005
1
11
21

The image is clickable and the OnClickListener is executed. But the image still isn't highlighted when I touch it. – Witek Jun 10 '13 at 15:43

score 0 · Answer 6 · answered Jun 18 '13 at 13:21

I hope this will help you. please give the background as transparent

<ImageButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/facebookbuttonanimation"
            android:background="#00000000"

            />

score 0 · Answer 7 · edited May 23 '17 at 10:30

0

You can design different images for clicked/not clicked states and set them in the onTouchListener as shown in the selected answer for this SO post.

Then you can set the image back to the previous image on post longclick or click.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 20 '13 at 17:13

Cheney Hester

528
1
5
22

Android ImageButton without border but still with click indication

7 Answers7