Android Layout with ImageButton overlaps other elements
I am trying to offset a button and position it so that it hovers over other elements. What I'm looking for can be seen in this image ... notice the image button, which is the id ibLoginButton in my xml, where the red arrow is pointing:
Here is the xml for my layout, but I don't know how to make the ibLoginButton look like this. 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 familiar with Android Layouts will shed some light! I'm stumped.
Thanks for the help.
A couple of changes to make
- It is necessary to make the top
LinearLayout
cRelativeLayout
. - You need to move the button
ibLoginButton
outsideRelativeLayout
-
ibLoginButton
should be after both areas overlap as the elements at the bottomRelativeLayout
are drawn on top.
Complete code example that will give you what you want (looks good in Eclipse 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 only be possible to use one relative layout. Using the minimum number of containers is the best practice for performance reasons.
Try to install betwen titlebar and homepage
<View android:layout_width="40dp"
android:layout_height="40dp"
layout_gravity="center_horizontally"
layout_margin_top="-20dp" background="ef0"/>
The idea here is negative margins
Center horizontally and then adjust margins. You know the height of the top bar, you can set the top edge to 44 - half the height of the image