How to Create Borderless Buttons in Android

Question

The Android Design Guidelines say to use borderless buttons (see picture below), but don't really explain how. Someone asked this same question a few weeks ago here: How to create standard Borderless buttons (like in the design guidline mentioned)? and there was an answer marked as "the" answer, but I am still lost and I don't see a way to add comments to a question that has been "closed"

The answer-er said

"Look into the theme attributes buttonBarStyle, buttonBarButtonStyle, and borderlessButtonStyle"

but I still can't figure out how to actually use those things. I Googled around a bit and couldn't find anything so I figured I'd just ask the question again, and hopefully someone can provide a little more detail on how this works.

enter image description here

Paul Drummond · Answer 1 · 2012-03-30T23:07:43.777

154

I thought I had this solved when I looked here a few weeks ago and noticed the answer about using a transparent background but it isn't quite good enough because it prevents the button from being highlighted when pressed.

Also, setting the style to Widget.Holo.Button.Borderless isn't appropriate because it makes the button boundaries to big.

To figure this out once and for all, I check the android source code for the standard Calendar app and found that it uses the following:

android:background="?android:attr/selectableItemBackground"

Doing it this way ensures the button is borderless and the correct size.

edited Mar 30 '12 at 23:07

answered Mar 30 '12 at 23:00

Paul Drummond

6,043
6
30
38

3

how can this be done from java code rather than XML? I'm creating an ImageButton in code and want it to be borderless but also have the highlight colour when touched – dsample Jun 22 '12 at 14:23
It does the trick, but it seems to me like a very convoluted and non-intuitive way. And this is for something Google is promoting in their official UI guidelines... – Stelian Iancu Sep 09 '12 at 08:18
11

selectableItemBackground is only supported from API level 11, is there a solution for older versions? – alexandroid Nov 27 '12 at 06:14
you can try setting the background to @android:color/transparent for older versions. but it takes away the touch effect im afraid. – Ε Г И І И О May 01 '13 at 07:30
2

@alexandroid You will have to create your own for lower versions – Sudarshan Bhat May 22 '13 at 12:06
1

@alexandroid `android:background="?attr/selectableItemBackground"` will work on API < 11 using the AppCompat library (note exclusion of `android:` prefix) – Peter Gordon Nov 04 '15 at 18:15

score 92 · Answer 2 · edited Aug 18 '12 at 20:16

92

Look at this: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

The attribute on your Button or ImageButton tag:

    style="?android:attr/borderlessButtonStyle"

edited Aug 18 '12 at 20:16

Diego V

6,189
7
40
45

answered Jul 10 '12 at 17:08

Dalc

1,138
8
10

what about the style that makes a ripple effect that goes a bit outside the view? for example, in Lollipop's contacts app, when you search for a contact, and then you click the "up" button (the arrow) ? It's as if the button itself is circular, but has transparent background... – android developer Dec 30 '14 at 14:16
1

@Dalc, awesome working – Hiren Patel Jul 14 '15 at 13:06
@Dalc How can i apply it programtically ..? – Moinkhan Jan 06 '16 at 09:52
2

This works for Buttons, but when you do this for ImageButtons, though the border goes away, it loses its ability to wrap its width only to the image provided, and starts behaving like a normal button with a minimum width. So for ImageButtons, the best way is `android:background="?android:attr/selectableItemBackground"` – Anshu Dwibhashi May 14 '16 at 05:34

score 23 · Answer 3 · answered Dec 07 '12 at 13:34

23

If you use ActionbarSherlock...

<Button 
  android:id="@+id/my_button" 
  style="@style/Widget.Sherlock.ActionButton" />

answered Dec 07 '12 at 13:34

WindRider

11,958
6
50
57

2

If you use HoloEverywhere `` – Brais Gabin Sep 02 '13 at 18:04
Worked perfectly for me with minimumSdk 9 < style="@style/Widget.Sherlock.ActionButton" > – ieselisra Sep 29 '14 at 09:29

score 19 · Answer 4 · answered Jul 14 '12 at 05:27

Some days ago a stumbeled over this again.

Here my solution:

This is done in 2 steps: Setting the button background attribute to android:attr/selectableItemBackground creates you a button with feedback but no background.

android:background="?android:attr/selectableItemBackground"

The line to divide the borderless button from the rest of you layout is done by a view with the background android:attr/dividerVertical

android:background="?android:attr/dividerVertical"

For a better understanding here is a layout for a OK / Cancel borderless button combination at the bottom of your screen (like in the right picture above).

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_width="1dip"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="4dip"
            android:layout_marginTop="4dip"
            android:background="?android:attr/dividerVertical" 
            android:layout_centerHorizontal="true"/>
        <Button
            android:id="@+id/BtnColorPickerCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/ViewColorPickerHelper"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/cancel" 
            android:layout_alignParentBottom="true"/>
        <Button
            android:id="@+id/BtnColorPickerOk"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/ok" 
            android:layout_alignParentBottom="true" 
            android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>

score 15 · Answer 5 · answered Apr 27 '13 at 18:04

This code works for me:

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:background="?android:attr/dividerVertical" />

<LinearLayout
    style="?android:attr/buttonBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:measureWithLargestChild="true"
    android:orientation="horizontal"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:paddingTop="0dip" >

    <Button
        android:id="@+id/cancel"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickCancel"
        android:text="@string/cancel" />

     <Button
        android:id="@+id/info"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickInfo"
        android:visibility="gone"
        android:text="@string/info" />

    <Button
        android:id="@+id/ok"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickSave"
        android:text="@string/save" />
</LinearLayout>

I show 3 buttons at the bottom

score 10 · Answer 6 · answered Feb 06 '12 at 21:58

10

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

answered Feb 06 '12 at 21:58

Rich

36,270
31
115
154

If the image background is not transparent by itself, it won't help much. – Gangnus Feb 06 '12 at 22:02
also android:background="@null" works – david72 Jul 10 '15 at 21:04

score 9 · Answer 7 · answered Feb 08 '12 at 07:38

9

<Button android:id="@+id/my_button" style="@android:style/Widget.Holo.Button.Borderless" />

answered Feb 08 '12 at 07:38

jgani

186
1
4

score 0 · Answer 8 · edited May 23 '17 at 12:18

0

You should also set margins and padding of the picture to 0. Also look at the second, not marked answer at How to create standard Borderless buttons (like in the design guidline mentioned)?

edited May 23 '17 at 12:18

Community

1
1

answered Feb 06 '12 at 22:01

Gangnus

24,044
16
90
149

How to Create Borderless Buttons in Android

8 Answers8

Linked