CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
Bir Nepali
Bir Nepali

Reputation: 439

How to put ImageView over RelativeLayout?

I'm designing a Profile Layout. For which I'm using Imageview and RelativeLayout. I'm trying put ImageView on top of RelativeLayout.I used both elevation and android:scaleType="centerCrop" but it shows okay in the design editor but when I compile and run app then ImageView always stays behind the RelativeLayout.

In Design Editor it shows

enter image description here

Which is what I want but in the device, it shows like this

enter image description here

Please help..

Below is my XML File

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout">


        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#000000"
            android:scaleType="centerCrop"
            android:src="@drawable/nav_menu_heade" />


        <ImageView
            android:clickable="true"
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-130dp"
            android:scaleType="fitStart"
            android:elevation="8dp"
            android:padding="20dp"
            android:src="@drawable/passport" />


        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#eb0772ca"
            android:elevation="2dp"
            android:paddingBottom="2dp">



            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="70dp"
                android:text="Sagar Rawal"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />



            <TextView
                android:id="@+id/quote"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Don't Cry cuz it's over, Smile cuz it happen"
                android:textColor="#ffffff"
                android:textSize="18sp" />
            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/quote"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Jumla, Nepal"
                android:textColor="#ffffff"
                android:textSize="16sp" />

        </RelativeLayout>



    </RelativeLayout>
</ScrollView>

Upvotes: 0

Views: 2325

Answers (6)

Rahul Kushwaha
Rahul Kushwaha

Reputation: 6722

I was also in trouble of that type of problem some days ago.But i resolved this type of problem using some logic. This is my .xml file . Hope you will understand it.

<ScrollView
        android:fillViewport="true"
        android:scrollbars="none"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:orientation="vertical"
                android:weightSum="10"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <RelativeLayout
                    android:layout_weight="1.3"
                    android:id="@+id/linear1"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:background="@color/colorBackFilled">
                    <com.prymepharm.android.CustomClass.MarkSimonsonRegulerTextView
                        android:text="@string/pleaeEnterMobno"
                        android:textColor="@color/colorWhite"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="@dimen/twenty"
                        android:textSize="@dimen/ssixteen"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </RelativeLayout>

                <RelativeLayout
                    android:layout_weight="2.7"
                    android:id="@+id/relative1"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:background="@color/colorBackFilled">

                    <LinearLayout
                        android:orientation="vertical"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:background="@color/colorBackFilled"
                            android:layout_weight="1" />
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:background="@color/colorWhite"
                            android:layout_weight="1" />
                    </LinearLayout>
                    <LinearLayout
                        android:layout_centerInParent="true"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/phn96" />
                    </LinearLayout>
                </RelativeLayout>
                <LinearLayout
                    android:layout_weight="6"
                    android:id="@+id/linear2"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:background="@color/colorWhite"
                    android:orientation="vertical">
                    <com.prymepharm.android.CustomClass.MarkSimonsonSemiTextView
                        android:id="@+id/phoneNum"
                        android:layout_marginLeft="@dimen/thirty"
                        android:layout_marginTop="@dimen/thirty_five"
                        android:layout_marginStart="@dimen/thirty"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/phonenNum"
                        android:textSize="@dimen/ssixteen" />

                    <LinearLayout
                        android:orientation="horizontal"
                        android:layout_marginStart="@dimen/thirty"
                        android:layout_marginEnd="@dimen/thirty"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/fifty"
                        android:layout_marginTop="@dimen/eight"
                        android:layout_marginBottom="@dimen/eight">

                        <com.hbb20.CountryCodePicker
                            android:id="@+id/ccp"
                            android:layout_marginTop="@dimen/eight"
                            app:ccp_areaCodeDetectedCountry="true"
                            app:ccp_contentColor="@color/colorBackFilled"
                            app:ccpDialog_showNameCode="false"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent" />
                        <android.support.design.widget.TextInputLayout
                            android:id="@+id/firstName"
                            android:orientation="horizontal"
                            android:layout_height="match_parent"
                            android:layout_width="match_parent">
                            <EditText
                                android:id="@+id/entetPhoneNum"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:inputType="phone"
                                android:maxLength="15"
                                android:singleLine="true"
                                android:hint="@string/typeInHere" />
                        </android.support.design.widget.TextInputLayout>
                    </LinearLayout>
                    <com.prymepharm.android.CustomClass.MarkSimonsonSemiTextView
                        android:id="@+id/send1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="@dimen/forty"
                        android:textSize="@dimen/ssixteen"
                        android:text="@string/send1"/>

                    <com.prymepharm.android.CustomClass.MarkSimonsonSemiTextView
                        android:id="@+id/send2"
                        android:layout_marginTop="@dimen/ten"
                        android:layout_gravity="center_horizontal"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="@dimen/ssixteen"
                        android:text="@string/send2"/>
                    <LinearLayout
                        android:id="@+id/llbottom"
                        android:orientation="vertical"
                        android:layout_gravity="center"
                        android:layout_width="@dimen/eighty"
                        android:layout_marginBottom="@dimen/hundred"
                        android:layout_marginTop="@dimen/forty"
                        android:layout_height="@dimen/eighty">
                        <ImageView
                            android:id="@+id/button_round"
                            android:layout_gravity="center_horizontal"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/arn96" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

Image of above XML

Upvotes: 1

Parisa Baastani
Parisa Baastani

Reputation: 1911

I see that you use negative margin, if I were you, I never use negative number for margin, because it makes some problem. please try this way:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res android"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

     <ImageView
        android:clickable="true"
        android:id="@+id/profile"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="fitStart"
        android:elevation="8dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:padding="20dp"
        android:src="@drawable/ic_launcher_background" />

     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:weightSum="2">

        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:background="#000000"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background" />

        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#eb0772ca"
            android:elevation="2dp"
            android:paddingBottom="2dp">


            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="70dp"
                android:text="Sagar Rawal"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />


            <TextView
                android:id="@+id/quote"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Don't Cry cuz it's over, Smile cuz it happen"
                android:textColor="#ffffff"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/quote"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Jumla, Nepal"
                android:textColor="#ffffff"
                android:textSize="16sp" />

         </RelativeLayout>
      </LinearLayout>
  </FrameLayout>

Upvotes: 1

Firoz Memon
Firoz Memon

Reputation: 4650

Move your profile ImageView below RelativeLayout,

In most layouts(like RelativeLayout and FrameLayout), the z-index is defined by the order in which the items are added

Your XML should look like this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout">


        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#000000"
            android:scaleType="centerCrop"
            android:src="@drawable/nav_menu_heade" />


        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#eb0772ca"
            android:elevation="2dp"
            android:paddingBottom="2dp">



            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="70dp"
                android:text="Sagar Rawal"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />



            <TextView
                android:id="@+id/quote"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Don't Cry cuz it's over, Smile cuz it happen"
                android:textColor="#ffffff"
                android:textSize="18sp" />
            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/quote"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Jumla, Nepal"
                android:textColor="#ffffff"
                android:textSize="16sp" />

        </RelativeLayout>


        <ImageView
            android:clickable="true"
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-130dp"
            android:scaleType="fitStart"
            android:elevation="8dp"
            android:padding="20dp"
            android:src="@drawable/passport" />



    </RelativeLayout>
</ScrollView>

Upvotes: 3

Prithvi Bhola
Prithvi Bhola

Reputation: 3151

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout">

        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#000000"
            android:scaleType="centerCrop"
            android:src="@drawable/nav_menu_heade" />

        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#eb0772ca"
            android:elevation="2dp"
            android:paddingBottom="2dp">

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="70dp"
                android:text="Sagar Rawal"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/quote"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Don't Cry cuz it's over, Smile cuz it happen"
                android:textColor="#ffffff"
                android:textSize="18sp" />
            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/quote"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Jumla, Nepal"
                android:textColor="#ffffff"
                android:textSize="16sp" />

        </RelativeLayout>
        
        //<ImageView should come below <RelativeLayout>
        <ImageView
            android:clickable="true"
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-130dp"
            android:scaleType="fitStart"
            android:elevation="8dp"
            android:padding="20dp"
            android:src="@drawable/passport" />
    </RelativeLayout>
</ScrollView>

Put profile <ImageView/> below <RelativeLayout/>

Upvotes: 2

Bunny
Bunny

Reputation: 1064

You can try to call bringToFront() on the view you want to get in the front

view.bringToFront();

Upvotes: 1

Ashvin solanki
Ashvin solanki

Reputation: 4809

Edit Xml Like This

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout">


        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#000000"
            android:scaleType="centerCrop"
            android:src="@drawable/back" />


        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#eb0772ca"
            android:elevation="2dp"
            android:paddingBottom="2dp">


            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="70dp"
                android:text="Sagar Rawal"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />


            <TextView
                android:id="@+id/quote"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Don't Cry cuz it's over, Smile cuz it happen"
                android:textColor="#ffffff"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/quote"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="Jumla, Nepal"
                android:textColor="#ffffff"
                android:textSize="16sp" />

        </RelativeLayout>

        <ImageView
            android:clickable="true"
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-130dp"
            android:scaleType="fitStart"
            android:elevation="8dp"
            android:padding="20dp"
            android:src="@drawable/app_icon" />


    </RelativeLayout>
</ScrollView>

Upvotes: 1

Related Questions