How to Create Standard Borderless Buttons (Like in the Design Guideline Mentioned)

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

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>

Adding borderless buttons in Android xml with divider

You have the wrong style in LinearLayout. It should be

style="?android:buttonBarStyle"

Not...

style="?android:buttonBarButtonStyle"

Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttonLayout"
    style="?android:attr/buttonBarStyle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test"/>

    <TextView
        android:layout_height="wrap_content"
        android:text="TextView (Place Holder)"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="15dp"/>

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button2"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Test"/>

        <Button
            android:id="@+id/button3"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Test"/>
    </LinearLayout>
</LinearLayout>

Example 2 (ListView):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttonLayout"
    style="?android:attr/buttonBarStyle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ListView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1.0"/>
    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:id="@+id/button2"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Test"/>
        <Button
            android:id="@+id/button3"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Test"/>
    </LinearLayout>
</LinearLayout>

Android borderless buttons

Check out my answer here. In a nutshell the correct solution is to use the following:

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

Change Padding on Borderless Buttons

One option is to apply the AlertDialog button style to your button:

style="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog"

For a more detailed answer, the space around the text here isn't exactly padding as such. The minimum size is determined by other attributes set in the style which is why trying to tweak the padding doesn't work, padding only starts to have an effect on bigger buttons(ie. longer text).

If we dip into the styles, it reveals a potentially useful technique to help. The AlertDialog button style looks like this:

<!-- Alert dialog button bar button -->
<style name="Widget.Material.Button.ButtonBar.AlertDialog" 
    parent="Widget.Material.Button.Borderless.Colored">
    <item name="minWidth">64dp</item>
    <item name="minHeight">@dimen/alert_dialog_button_bar_height</item>
</style>

So the AlertDialog button actually inherits from the Borderless.Colored style and only tweaks a couple of attributes: minWidth and minHeight.

You could also do this, either by making your own style similar to the one above, or by setting minWidth and/or minHeight directly on the button.

<Button
    ....
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:minWidth="48dp"
    android:minHeight=... />

Playing around with these will hopefully get the result you're looking for, and if you go as far as setting the minWidth and minHeight to 0dp, then it becomes all about the content and the padding.

How to make a simple borderless button in MATLAB GUI

You shoud add two lines:

jh.setBorderPainted(false);    
jh.setContentAreaFilled(false);

Show four button in same line without any space between them?

You need to add to buttons borderless style.

style="?android:attr/borderlessButtonStyle"

It is a default system style, that using in themes, to create button bars.

Without it, always will be a small margin. You can read about it here, and here, from official documentation. It allows you to create button bars, like in your screenshot.

---

Related Topics