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

19

117

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

Stench answered 13/1, 2012 at 19:3 Comment(1)
Similar #14046732Favor
S
165

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>
Stench answered 1/7, 2012 at 1:54 Comment(3)
Worth pointing out: this solution only works for API level 11+.Invalidate
If you use HoloEverywhere it works for API level 7+. You must change ?android:attr/selectableItemBackground for ?attr/selectableItemBackground and ?android:attr/dividerVerticalfor ?attr/dividerVerticalTroudeloup
?android:attr/dividerVerticalfor and ?attr/dividerVerticalalso works for absKissinger
C
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.

Conde answered 18/8, 2012 at 19:54 Comment(0)
A
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

Aviv answered 2/2, 2013 at 15:0 Comment(4)
This worked perfectly for both API Level 10 and API Level > 10!Taradiddle
This is better than doing it programmatically even though both would work.Faircloth
Attribute "exitFadeDuration" is only used in API level 11 and higher.Tantra
yep @Bevor, nice one. Readers consider that unknown xml tags are ignored so it will use fading for api >=11, and just work for < 11Aviv
E
18

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>
Empire answered 1/9, 2014 at 17:21 Comment(1)
plus for buttonBarStyle. and this is the answer btw.Johnnie
H
7

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

Hindbrain answered 11/3, 2016 at 14:57 Comment(0)
S
5

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.

Scrub answered 19/9, 2012 at 18:14 Comment(1)
how could i put this (?android:attr/buttonBarButtonStyle) in styles.xml as item of a style?Seedy
S
4

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

Shamblin answered 26/1, 2012 at 17:39 Comment(1)
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.Quenchless
G
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);
Graben answered 31/8, 2015 at 9:44 Comment(3)
It is working, thanks. But android.R.attr.selectableItemBackground requires API 21. Any idea how to do this on earlier versions?Armor
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.Scotism
use android.R.attr.selectableItemBackgroundGraben
D
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);
Dampier answered 21/4, 2014 at 21:17 Comment(1)
This is better, simpler than lsj's solution. Just setBackgroundResource(0)Incardinate
S
2

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.

Sclerosis answered 21/6, 2014 at 13:28 Comment(1)
I would add case MotionEvent.ACTION_CANCEL: below the case MotionEvent.ACTION_UP: as well.Sporran
G
2

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>
Grumous answered 30/6, 2014 at 15:43 Comment(0)
C
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);
Cooee answered 27/9, 2017 at 7:55 Comment(1)
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!Sublet
F
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"
/>
Fovea answered 17/2, 2015 at 11:22 Comment(0)
O
1

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"/>
Olives answered 6/12, 2016 at 13:51 Comment(0)
D
1

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"
    .../>
Detonator answered 23/5, 2017 at 14:22 Comment(0)
A
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);
Anta answered 4/7, 2018 at 10:31 Comment(2)
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation 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.Nettienetting
Interesting solution, and useful. Does what it promises. The button looks wonderful. Remember the text color is also settable.Orrin
F
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.

Fetter answered 19/4, 2012 at 14:38 Comment(4)
Setting the background to @android:color/transparent worked for me, without the need for the extra XML file.Cabman
This fails to include how to get the divider.Numerology
@Numerology 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.Fetter
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.Numerology
I
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.

Inactivate answered 19/1, 2014 at 9:45 Comment(1)
Note that link-only answers 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.Heigl
S
0

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.

Secrest answered 11/3, 2016 at 16:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.