Android : how to achieve view like this, Image view over two relative layout

Question

Android : how to achieve view like this, Image view over two relative layout enter image description here

Hello friends i want imageview over two layout. you can see in header. there is one imageview between two layout. i need same view. but i cannot do this.

please help

Thanks in Adavance.

    <RelativeLayout
        android:id="@+id/relative_header"
        style="@style/tab_bar_style" >

        <ImageView
            android:id="@+id/menu_img_view"
            style="@style/menu_btn_style"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/tv_titile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="New Deal"
            style="@style/title_text_stye"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="-15dp"
            android:layout_marginLeft="22dp"
            android:src="@drawable/ic_launcher" />

    </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relative_middle_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/relative_header"
            android:layout_above="@+id/Relative_bottom_bar"
            android:background="@drawable/bg"
             >

    </RelativeLayout>

        <RelativeLayout
        android:id="@+id/Relative_bottom_bar"
        style="@style/bottom_bar_style" >


    </RelativeLayout>

</RelativeLayout>

here what i have did enter image description here

Possible duplicate of: http://stackoverflow.com/questions/961944/overlapping-views-in-android — bstar55, Jun 06 '14 at 16:09
Well, there is a container with a background image and 3 other layouts. The top one is tall enough to include the full bottom image too and and the rest is TRANSPARENT. Then there's the bottom one. In between, another layout takes the remaining space — Phantômaxx, Jun 06 '14 at 16:25
Not sure why this question was closed, it seems legit. I asked it myself. And I like that you have screen shots to indicate exactly what you are going after. My 1 suggestion would be to maybe not make it so *vertically-long* (lots of scrolling now :)). For both images, full screen seems unnecessary; the top portion is understandable as to what you are trying to show there. I would take just top 1/3. Answer to your question is here: http://stackoverflow.com/a/4685019/2162226 - Use a `FrameLayout` . To set the image you want in the foreground - add it as the last element in that layout — Gene Bo, Feb 22 '17 at 21:33

score 0 · Answer 1 · answered Jun 06 '14 at 16:06

Maybe use three layouts - a general, all-encompassing one, then your two layouts for the header and body. Place the image within the general layout and position that way, so that it is not within the header and body layouts, thus not limiting it to their domain.

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

It looks like you might be able to get away with using .bringToFront() on the view you want to overlap:

http://developer.android.com/reference/android/view/View.html#bringToFront%28%29

Either that or maybe you can try some things with FrameLayout rather than RelativeLayout:

Placing/Overlapping(z-index) a view above another view in android

edited May 23 '17 at 12:31

Community

1
1

answered Jun 06 '14 at 16:14

bstar55

3,542
3
20
24

I have used .bringToFront() method, but didn't work. :( – Sandy Angel Jun 06 '14 at 17:23

Phantômaxx · Accepted Answer · 2014-06-06T17:51:06.780

I made this layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/stripes_vert_4"
    >
    <!-- This is the header -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@drawable/card"
        android:gravity="center"
        android:drawableRight="@drawable/ic_launcher"
        android:drawablePadding="8dp"
        android:text="New Deal"
        android:textColor="#ffff"
        android:textAppearance="?android:attr/textAppearanceMedium"
    />
    <!-- This is the footer -->
    <RelativeLayout
        android:id="@+id/relative_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingRight="-32dp"
        android:layout_marginRight="-32dp"
        android:background="#b91e4b"
        >
        <!-- A textView, just to give the footer some height -->
        <TextView
            android:id="@+id/txt_footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Footer"
            android:textColor="#ffff"
            android:textAppearance="?android:attr/textAppearanceMedium"
        />
    </RelativeLayout>
    <!-- This is the content area -->
    <RelativeLayout
        android:id="@+id/relative_middle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv_title"
        android:layout_above="@+id/relative_bottom_bar"
        >
    </RelativeLayout>
</RelativeLayout>

And this is the result I got:

enter image description here

Since I don't have your background image nor the menu icon, I used what I had. I also removed your styles, since I don't have them.

Note that the header is simply a TextView.
I'm using a 9 patch for the background, here it is (card.9.png):

enter image description here

I had to add a TextView to the footer container, just to inflate some height.

Android : how to achieve view like this, Image view over two relative layout

3 Answers3