Question

I’m trying to create a better looking button bar for my app to match the theme.
So far, I’m using the following code:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer"
    style="@android:style/ButtonBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/Formula"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Formula" />

    <Button
        android:id="@+id/Solve"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Solve" />

    <Button
        android:id="@+id/Clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Clear" />
</LinearLayout>

And it gives me a result like this:

I’m also working on some code to replace that bar with a better looking one. It is as follows:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_alignParentBottom="true" >

    <View
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@drawable/black_white_gradient" />

    <View
        android:id="@+id/ViewOne"
        android:layout_width="1dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="4dip"
        android:layout_marginTop="4dip"
        android:background="@drawable/black_white_gradient" />

    <Button
        android:id="@+id/ButtonOne"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/ViewOne"
        android:background="@color/button_blue_background"
        android:paddingTop="5dp"
        android:text="Cancel"
        android:textColor="@color/button_dark_text" />

    <Button
        android:id="@+id/ButtonTwo"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/ViewOne"
        android:background="@color/button_blue_background"
        android:text="OK"
        android:textColor="@color/button_dark_text" />
</RelativeLayout>

Which results in:

So my issue is that I’m unable to get three buttons on the new black bar. I’ve tried adding more views and buttons with the android:layout_toRightOf attributes but it still won’t work.
Are there any ideas on what I could possibly do to achieve this?

Answer 1

You don’t need to add Views to the layour just to show your gradients.

I suggest you to use your LinearLayout with those three buttons and set a layer-list xml as the background of the layout itself.

1. Create the layer-list xml file, eg, layerlist.xml with your gradients:

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <item
        android:drawable="@drawable/gradient1"
        android:id="@+id/grad1"
      />
   
      <item
        android:drawable="@drawable/gradient2"
        android:id="@+id/grad2"
      />
   </layer-list>
   

   If you have just one gradient then you don’t need a layer-list xml file. Set it directly as background of the LinearLayout.

2. As I said before, set the layerlist.xml (or your single gradient xml file) as background of the layout:

   <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/footer"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:gravity="bottom"
     android:orientation="horizontal"
     android:background="@drawable/layerlist" >
   
       <Button
         android:id="@+id/Formula"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="Formula" />
   
      <Button
         android:id="@+id/Solve"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="Solve" />
   
      <Button
         android:id="@+id/Clear"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="Clear" />
   </LinearLayout>
   

Let me know if it works!

EDIT:

As far as I know, you can define a proper height to the gradient. Add android:top="3dp" to the desired item of your layerlist.xml file. That means your gradient will have height of 3dp starting from the top.
Or, if you are using a single gradient file you can define the grandient’s height adding to your shape:

<size
      android:height="3dp" />