Android: Bar with centered image and buttons on the right

Question

Hi all,

I'm really struggling with a part of layout in my app. I have a header bar with a centered image and on the right there should be two buttons (or clickable images like I have right now). I managed to get the images next to eachother (all centered) but I want the images on the right. When I use layout_weight to make the 'first' one stretch, the buttons are on the right but they get so small. I want the buttons (images) to keep their original sizes. I even tried to hardcode that with minWidth and minHeight but that doesn't work.

Here is the code that centers everything:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/header_tile">

    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/header_logo">
    </ImageView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
           android:id="@+id/previous"
           android:src="@drawable/omhoog"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>

        <ImageView
           android:id="@+id/next"
           android:src="@drawable/omlaag"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>
    </LinearLayout>
</LinearLayout>

And here is the code that works, except that the last image gets so small:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/header_tile">

    <ImageView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:src="@drawable/header_logo"
        android:layout_weight="2">
    </ImageView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
           android:id="@+id/previous"
           android:src="@drawable/omhoog"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>

        <ImageView
           android:id="@+id/next"
           android:src="@drawable/omlaag"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>
    </LinearLayout>
</LinearLayout>

Any ideas? Thanks a lot!

Erik

Answer 1

Use relative layout, it is much more powerful, note the layout_centerInParent and layout_alignParentRight attributes:

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/header_tile">
    <ImageView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:src="@drawable/header_logo"
        android:layout_centerInParent="true">
    </ImageView>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true">
        <ImageView
           android:id="@+id/previous"
           android:src="@drawable/omhoog"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>
        <ImageView
           android:id="@+id/next"
           android:src="@drawable/omlaag"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        </ImageView>
    </LinearLayout>
</RelativeLayout>

Answer 2

layout_weight works differently when used with fill_parent & wrap_content;

• wrap_content: it tries to expand the items in the ratio of weights so as to cover the entire space

• fill_parent: it tries to compress the items in the ratio of weights.

All views must have the same type (fill_parent/wrap_content) when using weights

Answer 3

xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout android:id="@+id/LinearLayout01"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:gravity="center">
     <Button android:text="@+id/Button03"
         android:id="@+id/Button03" 
         android:layout_height="wrap_content"
          android:layout_weight="0" 
          android:layout_width="wrap_content">
    </Button>
</LinearLayout>

<LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">      
    <Button android:id="@+id/Button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:text="/\">
        </Button>
    <Button android:id="@+id/Button02" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="\/">
        </Button>
</LinearLayout>

Don't know the size of your images so i used buttons. Can the weight value be 2? 0 or 1 i'm always using.