How to create simple view separators

CV from http://envyandroid.com/archives/1193/view-separators

How to create simple view separators

12 Replies

This will show you three ways to create nice looking view separators, to use between a row of buttons for example.

The examples shows a LinearLayout with three buttons, that should get separators in between them.
The third example may be the easiest one to implement, while the other ones gives you better customizability.

 

 

Method one – Manually adding a view separator to the LinearLayout

We can create a simple View that represents the separator, and just add it in between our buttons.

As a separator, we can use a view like this:

<View

android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#90909090"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
/>

So the whole layout, as pictured, becomes:

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:orientation="horizontal">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Yes"
        android:layout_weight="1"
        android:id="@+id/button1"
        android:textColor="#00b0e4" />

    <View android:layout_height="fill_parent"
        android:layout_width="1px"
        android:background="#90909090"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:id="@+id/separator1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="No"
        android:layout_weight="1"
        android:id="@+id/button2"
        android:textColor="#00b0e4" />

    <View android:layout_height="fill_parent"
        android:layout_width="1px"
        android:background="#90909090"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:id="@+id/separator2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Neutral"
        android:layout_weight="1"
        android:id="@+id/button3"
        android:textColor="#00b0e4" />

</LinearLayout>

Method two – Specifying a divider for the LinearLayout

As pointed out by Paul Burke in the comments, you can specify a view divider on the linearlayout. This is obviously a better solution (and the solution I was searching for), that also works when you are dealing with an unknown number of items.

This methods only works for API level 11 and higher.

Create a new file called separator.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <size android:width="1dp" />
 <solid android:color="#90909090" />
</shape>

We can then use this separator in our LinearLayout like this:

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:divider="@drawable/separator"
    android:showDividers="middle"
    android:orientation="horizontal">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Yes"
        android:layout_weight="1"
        android:id="@+id/button1"
        android:textColor="#00b0e4" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="No"
        android:layout_weight="1"
        android:id="@+id/button2"
        android:textColor="#00b0e4" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Neutral"
        android:layout_weight="1"
        android:id="@+id/button3"
        android:textColor="#00b0e4" />

</LinearLayout>

The important part here is on the LinearLayout:

android:divider="@drawable/separator"
android:showDividers="middle"

 

Method three – ButtonBarStyle (the easiest way for default separators)

As danialgoodwin mentioned in the comments, adding the buttonBarStyle to the LinearLayout will show default separators.  This is also for api level 11 or higher only.

The important part here, is adding this line to the LinearLayout:

style="?android:buttonBarStyle"

And the whole code will look like this:

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        style="?android:buttonBarStyle"
        android:dividerPadding="15dp"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button1"
            android:layout_gravity="center_vertical" />

        <!-- more buttons/views -->
        
    </LinearLayout>

You can also adjust the paddings of the view separators with the “dividerPadding” setting.