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.

Siracusa

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.

Vibratile

Thanks, I knew it was simple. ;) I feel stupid now. I'm using #90AAAAAA as color. – Siracusa

@William Tate : can we apply this using java code.. because i am creating radiobuttons dynamically and appending them to the radio group – Carnay

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" />

Lemieux

nicee i have been looking for that for ages! – Munroe

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.

Led