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.
+3
source to share
3 answers
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.
+6
source to share