Adding borderless buttons in Android xml with divider

Question

I'm trying to follow the guidelines laid out by the Android team from this document:

https://docs.google.com/file/d/0Bz3qX4EBhUvwZWlHekI3Y0wxSUk/edit

According to the doc I should use these framework resources. enter image description here

This is my code, but none of the borders show. Any ideas?

<LinearLayout
            android:id="@+id/buttonLayout"
            style="?android:buttonBarButtonStyle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:divider="?android:dividerVertical"
            android:orientation="horizontal"
            android:showDividers="middle" >

            <Button
                android:id="@+id/button1"
                style="?android:buttonBarButtonStyle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test" />

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

Note: I understand there is a similar/exact question, but my resource seems to be more recent, yet the solution presented by the Google team doesn't work.

score 4 · Answer 1 · answered Mar 24 '14 at 13:45

The top border is a "divider" which separates elements in a linear layout. If your buttons bar is on the bottom of a vertical layout, you have to activate the display of the divider, in the vertical layout. Generally, I do that by adding these attributes:

android:showDividers="middle"
android:divider="?android:dividerHorizontal" 
android:dividerPadding="8dp"

The full layout code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="?android:dividerHorizontal"
    android:dividerPadding="8dp"
    android:orientation="vertical"
    android:showDividers="middle" >

    <TextView
        android:id="@+id/url"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="dummyText" />

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

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

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

</LinearLayout>

user3055552 · Accepted Answer · 2014-03-06T05:23:50.430

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>

Aha. I've been working on this for too long apparently. This added the diver in between, but how would you add the divder on top of the buttons? — EGHDK, Mar 06 '14 at 04:51
Not quite sure about that, apparently I have never used it. But I guess I could try and mess with it a bit to find out. — user3055552, Mar 06 '14 at 04:54
Ok so flipped through the docs a bit and it seems that the top border will only appear if you have more content on top of the buttons, in the same layout. — user3055552, Mar 06 '14 at 05:07
Hmm, I have a listView on top of those buttons and they don't show. Can you post an example of something that works like you mentioned? — EGHDK, Mar 06 '14 at 05:10

score 1 · Answer 3 · answered Jun 28 '14 at 09:47

I ran into the same issue following the document. The solution provided by user3055552 will give the middle divider but no top divider when there aren't other views on buttons. Try:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical">

  <View 
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="?android:attr/dividerVertical"/>

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

        <Button style="?android:buttonBarButtonStyle"
            android:id="@+id/back"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="@string/back"/>
        <Button style="?android:buttonBarButtonStyle"
            android:id="@+id/next"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="@string/next"/>
    </LinearLayout>
</LinearLayout>

score 0 · Answer 4 · answered Mar 06 '14 at 04:44

Preview enter image description here

You can create this without using a button with just color of views.Try this

<LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="#2B1B17" >

        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Cancel"
            android:textColor="@drawable/text_changepassword_selector"
            android:textSize="19sp" />

        <View
            style="@style/Divider"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp" />

        <TextView
            android:id="@+id/tv_apply"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Select"
            android:textColor="@drawable/text_changepassword_selector"
            android:textSize="19sp" />
    </LinearLayout>

Thanks, but according to Google, I don't need to use an extra ``, and that's why I'm bringing up this question. I appreciate a working workaround though. — EGHDK, Mar 06 '14 at 04:46
@EGHDK Hmmm this is how i am doing it. Would be great if you find it without using a . — Jitender Dev, Mar 06 '14 at 04:52
@Brontok so far it works with the answer provided by user3055552. I'm still wondering if there is a solution for a divder on top of the buttons as well. — EGHDK, Mar 06 '14 at 04:54

Adding borderless buttons in Android xml with divider

4 Answers4