How to create standard Borderless buttons (like in the design guideline mentioned)?

Question

I was just checking the design guidelines and wondering about the borderless buttons. I goggled and tried to find in the source but can't bring it together by myself. Is this the normal Button widget but you add a custom (Android default) style? How to make these borderless buttons (of course you can set the background to empty, but then I don't have the divider)?

Here links to the design guidelines:

enter image description here

Similar http://stackoverflow.com/questions/14046232/my-app-force-closes-on-setcontentview-when-using-the-holoeverywhere-library — Khaled Annajar, Mar 27 '13 at 11:48

score 165 · Accepted Answer · answered Jul 01 '12 at 01:54

To clear some confusion:

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>

Worth pointing out: this solution only works for API level 11+. — , Jan 30 '13 at 05:18
If you use [HoloEverywhere](https://github.com/Prototik/HoloEverywhere/) it works for API level 7+. You must change ````?android:attr/selectableItemBackground```` for ````?attr/selectableItemBackground```` and ````?android:attr/dividerVertical````for ````?attr/dividerVertical```` — Brais Gabin, Apr 16 '13 at 11:33
`?android:attr/dividerVerticalfor` and `?attr/dividerVertical`also works for abs — oscarthecat, Dec 07 '13 at 11:53

score 51 · Answer 2 · edited May 23 '17 at 11:55

51

Simply add the following style attribute in your Button tag:

    style="?android:attr/borderlessButtonStyle"

source: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Then you can add dividers as in Karl's answer.

edited May 23 '17 at 11:55

Community

1
1

answered Aug 18 '12 at 19:54

Diego V

6,189
7
40
45

score 22 · Answer 3 · edited Aug 16 '15 at 08:51

22

Late answer, but many views. As APIs < 11 ain't dead yet, for those interested here is a trick.

Let your container have the desired color (may be transparent). Then give your buttons a selector with default transparent color, and some color when pressed. That way you'll have a transparent button, but will change color when pressed (like holo's). You can also add some animation (like holo's). The selector should be something like this:

res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:exitFadeDuration="@android:integer/config_shortAnimTime">
     <item android:state_pressed="true"
         android:drawable="@color/blue" />

   <item android:drawable="@color/transparent" />
</selector>

And the button should have android:background="@drawable/selector_transparent_button"

PS: let you container have the dividers (android:divider='@android:drawable/... for API < 11)

PS [Newbies]: you should define those colors in values/colors.xml

edited Aug 16 '15 at 08:51

Bevor

8,396
15
77
141

answered Feb 02 '13 at 15:00

aacotroneo

2,170
16
22

This worked perfectly for both `API Level 10` and `API Level > 10`! – theblang Aug 25 '14 at 23:32
This is better than doing it programmatically even though both would work. – Eran Goldin Oct 25 '14 at 19:05
1

Attribute "exitFadeDuration" is only used in API level 11 and higher. – Bevor Aug 16 '15 at 09:00
yep @Bevor, nice one. Readers consider that unknown xml tags are ignored so it will use fading for api >=11, and just work for < 11 – aacotroneo Aug 16 '15 at 16:41

score 18 · Answer 4 · answered Sep 01 '14 at 17:21

For the one who want borderless buttons but still animated when clicked. Add this in the button.

style="?android:attr/borderlessButtonStyle"

If you wanted a divider / line between them. Add this in the linear layout.

style="?android:buttonBarStyle"

Summary

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   style="?android:buttonBarStyle">

    <Button
        android:id="@+id/add"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:id="@+id/cancel"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/cancel_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

</LinearLayout>

plus for buttonBarStyle. and this is the answer btw. – frostymarvelous Jun 22 '15 at 10:57 — frostymarvelous, Jun 22 '15 at 10:57

score 7 · Answer 5 · edited Oct 05 '16 at 17:46

7

For material style add style="@style/Widget.AppCompat.Button.Borderless" when using the AppCompat library.

edited Oct 05 '16 at 17:46

Androiderson

16,865
6
62
72

answered Mar 11 '16 at 14:57

Roel

3,089
2
30
34

Dandre Allison · Answer 6 · 2012-09-19T19:21:54.010

From the iosched app source I came up with this ButtonBar class:

/**
 * An extremely simple {@link LinearLayout} descendant that simply reverses the 
 * order of its child views on Android 4.0+. The reason for this is that on 
 * Android 4.0+, negative buttons should be shown to the left of positive buttons.
 */
public class ButtonBar extends LinearLayout {

    public ButtonBar(Context context) {
        super(context);
    }

    public ButtonBar(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public ButtonBar(Context context, AttributeSet attributes, int def_style) {
        super(context, attributes, def_style);
    }

    @Override
    public View getChildAt(int index) {
        if (_has_ics)
            // Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
            return super.getChildAt(getChildCount() - 1 - index);

        return super.getChildAt(index);
    }

    private final static boolean _has_ics = Build.VERSION.SDK_INT >= 
                                        Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}

This will be the LinearLayout that the "OK" and "Cancel" buttons go into, and will handle putting them in the appropriate order. Then put this in the layout you want the buttons in:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:divider="?android:attr/dividerHorizontal"
          android:orientation="vertical"
          android:showDividers="middle">
    <!--- A view, this approach only works with a single view here -->
    <your.package.ButtonBar style="?android:attr/buttonBarStyle"
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

This gives you the look of the dialog with borderless buttons. You can find these attributes in the res in the framework. buttonBarStyle does the vertical divider and padding. buttonBarButtonStyle is set as borderlessButtonStyle for Holo theme, but I believe this should be the most robust way for displaying it as the framework wants to display it.

how could i put this (?android:attr/buttonBarButtonStyle) in styles.xml as item of a style? — lis, Nov 04 '13 at 19:03

score 4 · Answer 7 · answered Aug 31 '15 at 09:44

4

You can make buttons borderless through code as well:

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);

answered Aug 31 '15 at 09:44

Isj

2,020
1
14
20

It is working, thanks. But `android.R.attr.selectableItemBackground` requires API 21. Any idea how to do this on earlier versions? – arenaq Apr 27 '16 at 11:29
It's not working. I am trying to set the resource of android.R.attr.buttonBarButtonStyle and it says that the resource cannot be found. – Kristy Welsh Dec 03 '16 at 13:40
use android.R.attr.selectableItemBackground – Isj Dec 05 '16 at 08:34

score 4 · Answer 8 · answered Jan 26 '12 at 17:39

4

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

answered Jan 26 '12 at 17:39

Josh Lee

171,072
38
269
275

If I use `buttonBarButtonStyle` I get an exception `E/AndroidRuntime(17134): Caused by: java.lang.reflect.InvocationTargetException E/AndroidRuntime(17134): Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValue{t=0x1/d=0x1030281 a=2 r=0x1030281}` No idea why, but using `selectableItemBackground` works wonders. – Someone Somewhere Oct 15 '14 at 00:00

score 2 · Answer 9 · answered Apr 21 '14 at 21:17

2

For those who want to create borderless button programmatically for API's >= 8

ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);    
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);

answered Apr 21 '14 at 21:17

Sohail

225
1
11

This is better, simpler than lsj's solution. Just setBackgroundResource(0) – jk7 Apr 21 '17 at 22:00

score 2 · Answer 10 · answered Jun 21 '14 at 13:28

Another solution that should work on both older and newer android platform is to use

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

attribute for Button view. But after adding above line button will not provide touch feedback.

To provide touch feedback add the following code to Activity class

button.setOnTouchListener(new View.OnTouchListener() {          
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:    
                ((Button)view).setBackgroundColor(Color.LTGRAY);
                break;
            case MotionEvent.ACTION_UP:
                ((Button)view).setBackgroundColor(Color.TRANSPARENT);
        }
        return false;
    }
});

Its working fine for me.

I would add `case MotionEvent.ACTION_CANCEL:` below the `case MotionEvent.ACTION_UP:` as well. — Medo, Jan 12 '15 at 00:23

score 2 · Answer 11 · answered Jun 30 '14 at 15:43

For anybody who's still searching:

inherit your own style for Holo buttonbars:

<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
  ...
</style>

or Holo Light:

<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
  ...
</style>

and for borderless Holo buttons:

<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

or Holo Light:

<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>

score 2 · Answer 12 · answered Sep 27 '17 at 07:55

2

This is how you create a borderless (flat) button programmatically without using XML

ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Button myButton = new Button(myContext, null, 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

answered Sep 27 '17 at 07:55

MW.

544
5
19

I was using: `ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), R.style.Widget_AppCompat_Button_Borderless_Colored); Button myButton = new Button(myContext);` and it would not work. After adding the 2nd and 3rd parameter, it is working! – levibostian Dec 01 '19 at 20:54

score 1 · Answer 13 · edited May 27 '15 at 03:38

1

Use the below code in your xml file. Use android:background="#00000000" to have the transparent color.

<Button
   android:id="@+id/btnLocation"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="#00000000"
   android:text="@string/menu_location"
   android:paddingRight="7dp"
/>

edited May 27 '15 at 03:38

gilchris

1,231
17
24

answered Feb 17 '15 at 11:22

Kayuri Ravrani

11
2

score 1 · Answer 14 · answered Dec 06 '16 at 13:51

You can use AppCompat Support Library for Borderless Button.

You can make a Borderless Button like this:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_button"/>

You can make Borderless Colored Button like this:

<Button
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_colored_button"/>

score 1 · Answer 15 · answered May 23 '17 at 14:22

If you want to achieve the same programmatically :

(this is C# but easily transatable to Java)

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

Match

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>

Ramesh kumar · Answer 16 · 2018-09-27T09:43:50.993

1

Try this code, to remove the background drawable (@drawable/bg) programmatically, just we need to provide null as a parameter.

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);

edited Sep 27 '18 at 09:43

answered Jul 04 '18 at 10:31

Ramesh kumar

935
14
16

2

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – NOhs Jul 04 '18 at 10:53
Interesting solution, and useful. Does what it promises. The button looks wonderful. Remember the text color is also settable. – carloswm85 Dec 04 '20 at 15:54

score 0 · Answer 17 · answered Apr 19 '12 at 14:38

0

For some reason neither style="Widget.Holo.Button.Borderless" nor android:background="?android:attr/selectableItemBackground" worked for me. To be more precise Widget.Holo.Button.Borderless did the job on Android 4.0 but didn't work on Android 2.3.3. What did the trick for me on both versions was android:background="@drawable/transparent" and this XML in res/drawable/transparent.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
</shape>

Plain head through the wall approach.

answered Apr 19 '12 at 14:38

Emperor Orionii

703
10
22

2

Setting the background to @android:color/transparent worked for me, without the need for the extra XML file. – Nicolai Buch-Andersen Apr 22 '12 at 12:47
This fails to include how to get the divider. – Navarr Jun 21 '12 at 21:30
3

@Navarr according to the Blundell's answer, divider is not a part of the "borderless button". Nor it should be because buttons and any other view class should not be informed about surrounding GUI components. That's container's responsibility. In the comments to Blundell's post there is a link to what appears to be ICS contact detail item layout. There is extra view (with vertical_divider id) for displaying divider. No out of the box solution for automatic dividers though there is a neat `android:background="?android:attr/dividerVertical"` trick. – Emperor Orionii Jun 27 '12 at 11:39
OPs question referred to the Android UX "Borderless Buttons", and in all examples they have the divider - which is apparently part of buttonBarStyle. Though You've given me some very helpful information, thank you. – Navarr Jun 27 '12 at 16:16

score 0 · Answer 18 · edited Jun 08 '14 at 09:26

0

A great slide show on how to achieve the desired effect from Googles Nick Butcher (start at slide 20). He uses the standard android @attr to style the button and divider.

edited Jun 08 '14 at 09:26

JJD

50,076
60
203
339

answered Jan 19 '14 at 09:45

Moritz

10,124
7
51
61

Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 19 '14 at 13:17

score 0 · Answer 19 · answered Mar 11 '16 at 16:20

Adding on to the top answer you can also use views with a dark gray background color in a Linear Layout like so.

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:layout_marginBottom="4dip"
    android:layout_marginLeft="4dip"
    android:layout_marginRight="4dip"
    android:layout_marginTop="4dip"
    android:background="@android:color/darker_gray"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

    <Button
        android:id="@+id/button_decline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/decline"/>

    <View
        android:layout_width="1dip"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

    <Button
        android:id="@+id/button_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/accept"/>
</LinearLayout>

If your line is horizontal you'll want to set the height to 1dip and the width to match the parent and vice-versa if your line is vertical.

How to create standard Borderless buttons (like in the design guideline mentioned)?

19 Answers19

Linked

Related