Develop Reference

Android FrameLayout Views Overlapping not Working

I Have the following layout and I need the favorite image to placed on the upper right corner of the itemImage using FrameLayout
<?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"
tools:context=".ItemDetails"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
tools:srcCompat="#mipmap/ic_launcher"
/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
tools:srcCompat="#mipmap/ic_launcher_round"
android:elevation="10dp"/>
</FrameLayout>
But the favorite image is never show ?? what is wrong with my layout
Any help will be much appreciated

Maybe this layout will work. I changed tools:srcCompat to android:src. tools: attributes are only visible in AndroidStudio, they are removed from the build.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
android:elevation="10dp"
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
</LinearLayout>
</ScrollView>
The result is this :

RelativeLayout with overlapping views

I need to create a UI design like image below. I have used RelativeLayout, but the top view is hiding behind the CardView. I have tried so many ways, couldn't get it done.
here is my code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="150dp"
tools:context=".activity.LoginActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:elevation="4dp"
android:layout_margin="10dp"
>
</android.support.v7.widget.CardView>
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:background="#drawable/square_items">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_aboutus"/>
</FrameLayout>
</RelativeLayout>

You need to put ImageView in Cardview so that elevation becomes equal for both. Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:elevation="4dp"
android:padding="10dp"
app:cardCornerRadius="6dp">
</android.support.v7.widget.CardView>
</RelativeLayout>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#color/red" />
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>

Imageview alignment issue

I want to achieve my layout with image-view and relative layout as like as picture shows here.
I tried with this code but not works.
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview_ratting"
android:layout_margin="5dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"/>
</RelativeLayout>

This worked for me...Provide negative paddingTop equal to half of the size of the imageview .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="70dp"
android:background="#color/colorAccent" />
<ImageView
android:id="#+id/widget_title_icon"
android:paddingTop="-70dp"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
android:contentDescription="#string/action_settings"
android:scaleType="fitStart"
android:src="#mipmap/ic_launcher" />
</FrameLayout>

We normally use FrameLayout for this case:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:background="#color/colorAccent"/>
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>
We can also play with android:paddingTop="-10dp" as you like.
See FrameLayout definition:
Child views are drawn in a stack, with the most recently added child
on top.
Hope this will help....

android:layout_marginTop="-35dp" -35dp is the half of your image size (70dp/2) but margin in the reverse direction so use "-" sign.
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview_ratting"
android:layout_margin="5dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="-35dp"
android:src="#drawable/icon"/>
</RelativeLayout>

used FrameLayout, using frameLayout you can do it.

For this, you should use FrameLayout. FrameLayout provides a layered layout to overlap items in UI. Example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center|center_horizontal"
android:background="#color/colorAccent" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginBottom="100dp"
android:layout_gravity="center|center_horizontal"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
Arpan has already proposed a similar answer. He is using padding and margin of both elements, whereas this one uses layout gravity and relative margin of ImageView. Doing this will always place the contents in the center of the screen on all devices.
ImageView(android:layout_marginBottom) = 0.5 * RelativeLayout(android:layout_height)

Please use circleimageview and relativelayout as a child of framelayout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="0dp"
android:paddingBottom="0dp"
android:paddingTop="0dp">
</RelativeLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cir_img_ptv"
android:layout_width="#dimen/cir_img_diameter_ptv"
android:layout_height="#dimen/cir_img_diameter_ptv"
android:layout_gravity="center|top"
android:layout_marginTop="#dimen/cir_img_top_margin_ptv"
android:scaleType="centerCrop"
android:src="#drawable/profile_user"
app:civ_border_color="#color/white"
app:civ_border_width="#dimen/cir_img_stroke_ptv"
app:civ_fill_color="#color/white"
app:civ_border_overlay="true"/>
</FrameLayout>

Try this code,
activity_main.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relCustomerEditProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginTop="100dp">
<LinearLayout
android:id="#+id/linRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/imgBackground"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:layout_alignBottom="#+id/relProfile"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_black"></RelativeLayout>
<RelativeLayout
android:id="#+id/relProfile"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerHorizontal="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgViewProfilePhoto"
android:layout_width="90dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:background="#drawable/red"></de.hdodenhof.circleimageview.CircleImageView>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Hereby,I am attaching screenshot,
Hope, it helps you!!

How to design this?

I am designing a registration screen.Here I need to place the button on circular image bottom corner,this is my output and I am using 3rd party library from github de.hdodenhof:circleimageview:2.0.0
Now I want to place camera bottom on bottom- right corner of image view
Need Output
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.this_pc.framelayout.MainActivity"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:contentDescription="Image Border"
android:padding="0dp"/>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"
android:layout_gravity="center_horizontal"
android:background="#drawable/round_border"/>
<Button
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|right"
android:background="#drawable/camera"/>
</FrameLayout>
</RelativeLayout>
</ScrollView>

Do like this...
<Button
android:id="#+id/uploadImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="//define according to your layout"
android:layout_marginTop="//define according to your layout"
android:layout_toRightOf="#+id/profile_Image"
android:background="#drawable/camera" />

create view over cardview in android

I want to create this layout
this is a cardview (gray view) and imageview(blue view) for that i use this code
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/abc_search_url_text_normal"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:paddingTop="5dp"
app:cardBackgroundColor="#color/abc_input_method_navigation_guard">
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:layout_marginRight="10dp"
android:scaleType="fitXY"
android:src="#drawable/abc_ratingbar_full_material" />
</FrameLayout>
but in result my image view going to back of cardview i try reletivelayout instead of framelayout but same result.

The CardView has by default elevation in API 21+, you can manipulate the elevation to be less than that of the ImageView
<android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="1dp"/>
<ImageView
android:id="#+id/image_view_user"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="2dp"/>
in Pre 21 you can use
overlayView.bringToFront();
root.requestLayout();
root.invalidate();
This will not work in 21+ if you have different elevation

Just put CardView in other view like in FrameLayout.
Just like below:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginStart="10sp"
android:layout_marginEnd="10sp"
>
<FrameLayout
android:layout_marginTop="15sp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100sp"
app:cardCornerRadius="5sp"
app:cardBackgroundColor="#color/colorPrimary">
<!--other view items -->
</android.support.v7.widget.CardView>
</FrameLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90sp"
android:layout_height="90sp"
app:civ_border_width="2dp"
android:layout_marginStart="10sp"
app:civ_border_color="#color/colorPrimaryDark"
android:id="#+id/profileImg"
android:background="#drawable/ic_if_profle_1055000"
xmlns:app="http://schemas.android.com/apk/res-auto"/>
Screenshot:

Try:
Use a RelativeLayout
Align the ImageView to the parent right/end and add a right/end margin
Align the FAB to the top of the card view and add a negative margin
<RelativeLayout
...>
<CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="120dp"
/>
<ImageView
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/cardView"
android:layout_marginTop="-32dp"
android:layout_marginRight="20dp"
/>
</RelativeLayout>

Just add elevation to ImageView greater than CardView elevation
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/abc_search_url_text_normal"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:paddingTop="5dp"
app:cardBackgroundColor="#color/white">
</androidx.cardview.widget.CardView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:layout_marginRight="10dp"
android:scaleType="fitXY"
android:elevation="8dp"
android:src="#drawable/ic_launcher_background" />

You can wrap CardView in FrameLayout but then the shadow will be cropped.
Set android:clipChildren="false" to fix it
<android.support.constraint.ConstraintLayout 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="wrap_content"
android:clipChildren="false"
android:layout_height="140dp">
<FrameLayout
android:id="#+id/frameLayout4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:clipChildren="false">
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/card_radius"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Another way around it would be to wrap the image view in a card view. Just ensure the background is transparent with height and width wrapping content and it will go on top of the previous card view.