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.

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

Preview

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>