Separator between buttons in custom button bar

Question

I have made a custom button bar as described here.

Now, I want to add a separator between the first and the second and between the second and the third button. My button bar is defined as follows:

<LinearLayout
            android:id="@+id/buttonBar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/buttonbarstyle"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            >
            <ImageButton
                android:id="@+id/buttonBarImageButton1" 
                android:scaleType="centerInside"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/copy"
                android:padding="2dip"
                android:background="@drawable/buttonbar_background_selector"
                android:layout_gravity="center_vertical"
            />              
            <ImageButton 
                android:id="@+id/buttonBarImageButton2"
                android:scaleType="centerInside"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/options"
                android:padding="2dip"
                android:background="@drawable/buttonbar_background_selector"
                android:layout_gravity="center_vertical"
            />              
            <ImageButton
                android:id="@+id/buttonBarImageButton3" 
                android:scaleType="centerInside"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/media_play"
                android:padding="2dip"
                android:background="@drawable/buttonbar_background_selector"
                android:layout_gravity="center_vertical"
            />              
        </LinearLayout>

The task seems so simple, but I can't find a good way to do it. It's supposed to have a grey-ish separator between each button, so that it looks somewhat like this.

I'm sure it's easy, please just point me to the right direction.

Answer 1

Place this in between each button.

<View android:layout_height="fill_parent"
    android:layout_width="2px"
    android:background="#90909090"/>

should give you a slim greyish vertical bar.

Answer 2

you can even place a nicely shaped seperator by fill_parent and adding marginTop|Bottom

  <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_marginBottom="7dp"
        android:layout_marginTop="7dp"
        android:background="@color/dark_grey" />

Answer 3

Adding a separator line view is a choice but instead of adding multiple views you can simply set the background of your buttonBar layout greyish and give margin to your buttons from each other. This way views will be separated and background of buttonBar will look like a separator.