How to Create Borderless Buttons in Android
Solution 1
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.
Solution 2
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"
Solution 3
If you use ActionbarSherlock...
<Button
android:id="@+id/my_button"
style="@style/Widget.Sherlock.ActionButton" />
Solution 4
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>
Solution 5
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
demarcmj
Updated on April 28, 2020Comments
-
demarcmj about 4 years
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
, andborderlessButtonStyle
"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.
-
Gangnus over 12 yearsIf the image background is not transparent by itself, it won't help much.
-
Admin about 12 yearsThis is the correct way to do this.
-
Sandra about 12 yearsI've been looking for this for quite some time now. Thx!
-
dsample almost 12 yearshow 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
-
Xin Guo over 11 yearsIt 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...
-
alexandroid over 11 yearsselectableItemBackground is only supported from API level 11, is there a solution for older versions?
-
Ε Г И І И О about 11 yearsyou can try setting the background to @android:color/transparent for older versions. but it takes away the touch effect im afraid.
-
Sudarshan Bhat about 11 years@alexandroid You will have to create your own <selector> for lower versions
-
Brais Gabin over 10 yearsIf you use HoloEverywhere
<Button android:background="?selectableItemBackground" />
-
ieselisra over 9 yearsWorked perfectly for me with minimumSdk 9 < style="@style/Widget.Sherlock.ActionButton" >
-
Paul Woitaschek over 9 yearsReally, this should be the accepted answer.
-
android developer over 9 yearswhat 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...
-
david72 almost 9 yearsalso android:background="@null" works
-
Hiren Patel almost 9 years@Dalc, awesome working
-
Peter Gordon over 8 years@alexandroid
android:background="?attr/selectableItemBackground"
will work on API < 11 using the AppCompat library (note exclusion ofandroid:
prefix) -
Moinkhan over 8 years@Dalc How can i apply it programtically ..?
-
Anshu Dwibhashi about 8 yearsThis 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"
-
Sahil Shokeen almost 8 yearsAwesome.....thanks :)
-
Bharat Dodeja almost 8 yearshow to get it in java code?
-
Neon Warge almost 8 yearsI always come back to this answer because I always forgot the syntax. It is so confusing!