Android Layout with ImageButton overlapping other elements

Question

I am trying to offset a button and have its location be so that it appears to hang over other elements. What I am looking for can be seen in this image... notice the image button, which is id ibLoginButton in my xml, where the red arrow is pointing:

Here is the xml for my layout, but I do not know how to make ibLoginButton have that effect. Do I need to do this programmatically? If so, how?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/db1_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        style="@style/TitleBar"
        android:layout_height="54dp">
        <ImageView
            android:id="@+id/ivLoginPicture"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/MDSLogoForLoginTrans"
            android:background="#ffffffff"
            android:layout_width="32dp"
            android:layout_height="44dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_centerVertical="true" />
        <TextView
            android:id="@+id/tvLoginName"
            android:text="Dr. Dentist"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="230.5dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/ivLoginPicture"
            android:layout_centerVertical="true" />
        <ImageButton
            android:id="@+id/ibLogout"
            android:src="@drawable/logoutButton"
            android:layout_width="80dp"
            android:layout_height="38dp"
            android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:paddingTop="0dp"
            android:paddingRight="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp" />
        <ImageButton
            android:src="@android:drawable/ic_menu_gallery"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/ibLoginButton"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/HomePage"
        android:layout_weight="1"
        android:background="@drawable/home_background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <GridView
            android:id="@+id/Grid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnWidth="90dp"
            android:numColumns="auto_fit"
            android:listSelector="@android:color/transparent"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center"
            android:scrollbars="vertical" />
    </LinearLayout>
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradientNews"
        android:id="@+id/webView1" />
</LinearLayout>

Anyone with knowledge of Android Layouts please shed some light!!! I am stumped.

Thanks for the help.

Answer 1

Couple changes that need to be made

• Need to make the top LinearLayout into a RelativeLayout.
• Need to move the ibLoginButton button outside of its RelativeLayout
• ibLoginButton needs to be after both regions it overlays, since items at the bottom of RelativeLayout's are drawn on the top.

Full example code that will give you what you want (looks good in Eclipse's Graphical Layout preview).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/db1_root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <RelativeLayout
        style="@style/TitleBar"
        android:id="@+id/first_relative"
        android:layout_width="wrap_content"
        android:layout_height="54dp" >

        <ImageView
            android:id="@+id/ivLoginPicture"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/MDSLogoForLoginTrans"
            android:background="#ffffffff"
            android:layout_width="32dp"
            android:layout_height="44dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_centerVertical="true" />
        <ImageButton
            android:id="@+id/ibLogout"
            android:src="@drawable/logoutButton"
            android:layout_width="80dp"
            android:layout_height="38dp"
            android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:paddingTop="0dp"
            android:paddingRight="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp" />

        <TextView
            android:id="@+id/tvLoginName"
            android:layout_width="230.5dp"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/ibLogout"
            android:text="Dr. Dentist"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>
    <LinearLayout
        android:id="@+id/HomePage"
        android:layout_weight="1"
        android:background="@drawable/home_background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/first_relative">

        <GridView
            android:id="@+id/Grid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnWidth="90dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:listSelector="@android:color/transparent"
            android:numColumns="auto_fit"
            android:scrollbars="vertical"
            android:stretchMode="columnWidth"
            android:verticalSpacing="10dp" >
        </GridView>

    </LinearLayout>
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradientNews"
        android:id="@+id/webView1" />

    <ImageButton
        android:id="@+id/ibLoginButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="22dp"
        android:src="@android:drawable/ic_menu_gallery" />

</RelativeLayout>

As an aside, it should be possible to only use a single relative layout. Using the minimal number of containers is best practice for performance reasons.