Showing one imageview above others?

Question

I want to show one Imageview above other imageview or view. Like below picture.

To achieve this I wrote code

<LinearLayout
        android:id="@+id/linear_restaurent_info"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight=".35"
        android:background="@color/white"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@+id/framelayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <ImageView
                android:id="@+id/frameImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:src="@drawable/demo_pics" />

            <ImageView
                android:id="@+id/imageView_restaurent_pic"
                android:layout_width="70dp"
                android:layout_height="55dp"
                android:layout_gravity="bottom"
                android:layout_marginBottom="-20dp"
                android:layout_marginLeft="10dp"
                android:src="@drawable/icon_search" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight=".15"
        android:orientation="vertical" >

        <!-- android:background="@color/Orange" -->

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TextView
                android:id="@+id/restaurent_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Laziz"
                android:textColor="@color/list_restaurent_name_text" />

            <TextView
                android:id="@+id/restaurent_address"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/restaurent_name"
                android:layout_below="@+id/restaurent_name"
                android:layout_marginTop="10dp"
                android:singleLine="true"
                android:paddingLeft="10dp"
                android:text="151 Radford Road, Nottingham, NG7"
                android:textColor="@color/list_restaurent_name_text" />
        </RelativeLayout>
    </LinearLayout>

But can't achieve the desired one.

My output looks like below. Any suggestion is appreciated.

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

There is your answer: Placing/Overlapping(z-index) a view above another view in android You can't use a LinearLayout for this, but you can use a FrameLayout. In a FrameLayout, the z-index is defined by the order in which the items are added. Credits to @kcoppock

edited May 23 '17 at 12:16

Community

1
1

answered Oct 14 '15 at 16:41

antoninkriz

966
4
18
36

i already use FrameLayout. but i am unable to solve the combination of the actual output. – Shihab Uddin Oct 14 '15 at 16:46
@shihab_returns What about that second part of your code (I mean that second linear layout)? Problem may be there... – antoninkriz Oct 14 '15 at 16:58

score 0 · Answer 2 · answered Oct 14 '15 at 16:54

0

i think you should try Relative layout for it...because by using it you can put android:layout_above="@+id/yourImageIdwhichYouWantToAboveFromAnImage" i hope by using this your problem being solved.!

answered Oct 14 '15 at 16:54

Aazi Shykh

1

score 0 · Answer 3 · answered Oct 14 '15 at 19:21

0

You have to use RelativeLayout that gives you many properties about positioning your views. So, all you have to do in my opinion, is to change the architecture of your view in order to realign them properly.

answered Oct 14 '15 at 19:21

karvoynistas

1,295
1
14
30

score 0 · Accepted Answer · answered Oct 15 '15 at 06:34

Here you go. You need to tweak some code here `

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="#FFFFFF">

    <ImageView
        android:id="@+id/imgCake"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/image_cake" />

    <ImageView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="55dp"
        android:src="@drawable/img_laziz"
        android:id="@+id/imgLaziz" />


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Laziz"
        android:textColor="#000000"
        android:textSize="28sp"
        android:layout_below="@+id/imgCake"
        android:layout_toRightOf="@+id/imgLaziz"
        android:layout_toEndOf="@+id/imgLaziz"
        android:layout_marginLeft="52dp"
        android:layout_marginStart="52dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="151 Radford Rasd Nott"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_below="@+id/textView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

`

Showing one imageview above others?

4 Answers4