Add images to Custom Window Title Bar in Android

Question

I need to add 3 images in my custom window title bar. gravity of 1st image is left. gravity of 2nd image is center and gravity of 3rd image is right. I used the below code. but 3rd image not displaying. I think it is covered by 2nd image.

How can I display 3 images in above positions ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="35dip"
    android:background="#323331"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingLeft="5dip" >

    <ImageView
        android:id="@+id/header_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/header_img_dec"
        android:src="@drawable/left_logo" />

    <ImageView
        android:id="@+id/header_middle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/header_img_dec"
        android:gravity="center" />

    <ImageView
        android:id="@+id/header_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:contentDescription="@string/header_img_dec"
        android:src="@drawable/right_img" />

</LinearLayout>

Answer 1

Use layout weights for this, also set android:layout_gravity="center_horizontal" for parent LinearLayout

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="35dip"
    android:background="#323331"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal"
    android:paddingLeft="5dip" >

        <ImageView
            android:id="@+id/header_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/header_img_dec"
            android:src="@drawable/left_logo"
           android:layout_weight="1"
              />

        <ImageView
            android:id="@+id/header_middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/header_img_dec"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/header_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:layout_weight="1"
            android:contentDescription="@string/header_img_dec"
            android:src="@drawable/right_img" />

    </LinearLayout>

Answer 2

Change android:layout_width="fill_parent" to android:layout_width="wrap_content"

Answer 3

try this way

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="35dip"
    android:background="#323331"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingLeft="5dip" >

<ImageView
    android:id="@+id/header_left"
    android:layout_alignParentLeft="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/header_img_dec"
    android:src="@drawable/left_logo" />

<ImageView
    android:id="@+id/header_right"
    android:layout_width="wrap_content"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content"
    android:contentDescription="@string/header_img_dec" />

<ImageView
    android:id="@+id/header_middle"
    android:layout_width="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_height="wrap_content"
    android:contentDescription="@string/header_img_dec"
    android:src="@drawable/right_img" />
</RelativeLayout>

Answer 4

In the second imageView it missed android:src= and you have used android:layout_width="fill_parent". so use instead android:layout_width="wrap_content" otherwise the image will fill the entire space of the container. To arrange the images with each other, I advise you to use a RelativeLayout

Try this :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#323331"
    >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="82dp"
        android:layout_toRightOf="@+id/imageView1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>