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    http   developer android com design building-blocks buttons html http   developer android com guide topics ui controls button html Borderless

User · Answer

Look into the theme attributes buttonBarStyle  buttonBarButtonStyle  and borderlessButtonStyle

User · Answer

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     lt RelativeLayout         android layout width  match parent          android layout height  48dp          android layout alignParentBottom  true  gt           lt 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   gt           lt 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   gt           lt 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   gt           lt 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   gt       lt  RelativeLayout gt

User · Answer

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    lt 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  gt        lt 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            gt        lt 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            gt    lt  LinearLayout gt

User · Answer

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

User · Answer

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

User · Answer

For material style add style   style Widget AppCompat Button Borderless  when using the AppCompat library

User · Answer

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

User · Answer

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    lt shape xmlns android  http   schemas android com apk res android       android shape  rectangle   gt   lt  shape gt    Plain head through the wall approach

User · Answer

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

User · Answer

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  gt                                            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    lt 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  gt       lt  --- A view  this approach only works with a single view here -- gt       lt 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  gt           lt 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    gt           lt 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    gt       lt  your package ButtonBar gt   lt  LinearLayout gt    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

User · Answer

For anybody who s still searching   inherit your own style for Holo buttonbars    lt style name  yourStyle  parent   android style Holo ButtonBar  gt         lt  style gt    or Holo Light    lt style name  yourStyle  parent   android style Holo Light ButtonBar  gt         lt  style gt    and for borderless Holo buttons    lt style name  yourStyle  parent   android style Widget Holo Button Borderless Small  gt         lt  style gt    or Holo Light    lt style name  yourStyle  parent   android style Widget Holo Light Button Borderless Small  gt         lt  style gt

User · Answer

Late answer  but many views  As APIs  lt  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  lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android             android exitFadeDuration   android integer config shortAnimTime  gt        lt item android state pressed  true           android drawable   color blue    gt       lt item android drawable   color transparent    gt   lt  selector gt    And the button should have android background   drawable selector transparent button   PS  let you container have the dividers  android divider   android drawable     for API  lt  11   PS  Newbies   you should define those colors in values colors xml

User · Answer

Use the below code in your xml file  Use android background   00000000  to have the transparent color    lt 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    gt

User · Answer

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       lt Button        style   style Widget AppCompat Button Borderless Colored           gt

User · Answer

Adding on to the top answer you can also use views with a dark gray background color in a Linear Layout like so    lt 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   gt    lt LinearLayout     android layout width  match parent      android layout height  wrap content      android layout marginBottom  4dip      android orientation  horizontal      android weightSum  1  gt        lt 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   gt        lt View         android layout width  1dip          android layout height  match parent          android layout marginLeft  4dip          android layout marginRight  4dip          android background   android color darker gray   gt        lt 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   gt   lt  LinearLayout gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can use AppCompat Support Library for Borderless Button   You can make a Borderless Button like this    lt 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   gt    You can make Borderless Colored Button like this     lt 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   gt

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

Examples related to android

Examples related to layout

Examples related to button

Examples related to borderless