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 :

How can I create a CardView and ImageView with a rounded border?

I want to make the following design:
But I do not know how to round up the ImageView and vertical lines.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="10dp"
app:cardCornerRadius="40dp">
</android.support.v7.widget.CardView>
</LinearLayout>
minSdkVersion 16
targetSdkVersion 28
EDIT:
According to document: CardView
Due to expensive nature of rounded corner clipping, on platforms
before Lollipop, CardView does not clip its children that intersect
with rounded corners. Instead, it adds padding to avoid such
intersection (See setPreventCornerOverlap(boolean) to change this
behavior).
I wrote this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#cccccc"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="40dp"
app:cardElevation="0dp"
app:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="170dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/test_ex"
app:riv_corner_radius_bottom_left="40dp"
app:riv_corner_radius_top_left="40dp" />
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#color/colorPrimaryDark" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the result in the Android 4.3 emulator:
How can I do the clipping? What is the best solution?

Try below code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="10dp"
app:cardCornerRadius="40dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="150dp"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher_background"
android:scaleType="centerCrop"
android:id="#+id/image_"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:rotation="15"
android:layout_marginLeft="-30dp"
android:layout_marginBottom="-40dp"
android:layout_toRightOf="#id/image_">
</View>
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#be0202"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"/>
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#be0202"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Result :

Already answered by charan
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:map="http://schemas.android.com/tools"
android:id="#+id/cardview1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="26dp"
card_view:cardElevation="10dp"
card_view:cardMaxElevation="2dp"
card_view:contentPadding="0dp"
android:layout_margin="#dimen/dp_8">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:padding="5dp">
<TextView
android:id="#+id/name_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="HELLO!"
android:textSize="40sp"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
Result

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>

Scrollview not working for Relative Layout

I am trying to populate a Relative layout with 4 card views in it. Each cardview consists one image and a text view. I wrapped all the card views in a relative layout and the relative layout in a scroll view. It's not working. If I remove scrollview, its working fine. Tried by putting scrollview inside the relative layout. But didnt work
Code:
<?xml version="1.0" encoding="utf-8"?>
<Scrollview
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#659D32"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
tools:context="com.example.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:id="#+id/cardview_1"
app:cardElevation="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_1"
android:id="#+id/cardImage_bang"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_1"
android:id="#+id/cardTitle_1"
android:gravity="center_horizontal"
android:text="Text1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:layout_below="#+id/cardview_1"
android:id="#+id/cardview_2"
app:cardElevation="10dp"
android:layout_marginTop="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_2"
android:id="#+id/cardImage_2"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_2"
android:id="#+id/cardTitle_2"
android:gravity="center_horizontal"
android:text="Text2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Hope this will help you.. (this snippet worked in my case)
<?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"
android:fillViewport="true"
android:paddingLeft="5dp"
android:background="#color/bg"
android:paddingRight="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:padding="10dp"
android:weightSum="1">
<!-- put entire thing here -->
</RelativeLayout>
</ScrollView>

you have written the scroll view tag wrong. That's the reason its not working. Change it from <Scrollview> to <ScrollView> and add the Scroll view end tag like </ScrollView>and re run the project, it will work fine.
Hope this will help you !

1) You've misspelled the ScrollView tag it must be <ScrollView> not <Scrollview>
2) You didn't close the <ScrollView> tag at the end of the code
-->Here's the right code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#659D32"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
tools:context="com.example.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:id="#+id/cardview_1"
app:cardElevation="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_1"
android:id="#+id/cardImage_bang"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_1"
android:id="#+id/cardTitle_1"
android:gravity="center_horizontal"
android:text="Text1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:layout_below="#+id/cardview_1"
android:id="#+id/cardview_2"
app:cardElevation="10dp"
android:layout_marginTop="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_2"
android:id="#+id/cardImage_2"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_2"
android:id="#+id/cardTitle_2"
android:gravity="center_horizontal"
android:text="Text2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>

Why the background image of Linearlayout not showing in Android?

I have some layout question for Android , the following code is my layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context="com.wen.test.MainActivity">
<LinearLayout
android:id="#+id/dashboard_layout"
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/dashboard_item1_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/no_signal">
</RelativeLayout>
<RelativeLayout
android:id="#+id/dashboard_item2_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp">
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_weight="0.7"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
It seems like the following picture:
Question:
Why the background of dashboard_item1_layout and dashboard_item2_layout did not show via following code?
android:background="#drawable/no_signal"
But I can set the background image to the dashboard_layout.
Did I missing something? Thanks in advance.

I do nothing except adding background for dashboard_item1_layout and dashboard_item2_layout as you expected.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical">
<LinearLayout
android:id="#+id/dashboard_layout"
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/dashboard_item1_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/like_outline">
</RelativeLayout>
<RelativeLayout
android:id="#+id/dashboard_item2_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:background="#drawable/like_star_outline"
android:layout_height="match_parent"
android:layout_margin="5dp">
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_weight="0.7"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
The result:

set background in your code is ok but the problem seems like in no_signal.xml file. Can you show code this file?

Check this out on your phone. I just added background as expected in your code. Also, replace background image with the native one. If it is run then issue with your asset only.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/dashboard_layout"
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/color_red_fab"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/dashboard_item1_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#android:drawable/ic_menu_close_clear_cancel">
</RelativeLayout>
<RelativeLayout
android:id="#+id/dashboard_item2_layout"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:drawable/ic_menu_close_clear_cancel">
android:layout_margin="5dp">
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_weight="0.7"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:src="#android:drawable/ic_menu_close_clear_cancel"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>