Develop Reference

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>

Linear Layout does not fill the whole screen

Why the linear layout does not fill the whole screen?
As you can see I am using match parent in the linear layout.
If I delete the Scrollbar nothing changes. The button is not at the bottom of the screen.
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context="com.sarahp.demo.MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout ----------> HERE
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview_demo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32dp"
android:layout_marginTop="32dp"
android:text="#string/demo"
android:textSize="42dp"/>
<RelativeLayout
android:id="#+id/fragment_container_a"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/fragment_container_b"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/transparent"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
F A is the fragment part.

Give android:fillViewport="true" to your ScrollView.
Your xml will looks like below. Main_Activity.xml
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Test Demo"
android:textStyle="bold"
android:gravity="center"/>
<RelativeLayout
android:id="#+id/fragment1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:background="#drawable/border_image">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:text="Test text Fragement1" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/fragment2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:text="Test text Fragement2" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

Remove the relative layout
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview_demo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32dp"
android:layout_marginTop="32dp"
android:text="#string/demo"
android:textSize="42dp"/>
<RelativeLayout
android:id="#+id/fragment_container_a"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/fragment_container_b"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/transparent"/>
</LinearLayout>
</ScrollView>

Android - selectableItemBackground doesn't showed when click on item

I have a Recycler view and their items should be clickable. I want that all line do apply the ?selectableItemBackground effect but this does not occurs. The imageview is occupying all the item layout as an background. Why the selectable effect doesn't working as well?
this is my xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?listPreferredItemHeightLarge"
android:background="?selectableItemBackground"
android:descendantFocusability="blocksDescendants">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:src="#drawable/holder"
android:scaleType="centerCrop"
android:focusableInTouchMode="false"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:alpha="0.3" />
</FrameLayout>
<br.com.lexsis.pizzahut.presentation.widgets.CustomFontTextView
android:id="#+id/group_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
style="#style/TextView.EMenu" />
</RelativeLayout>

You can add another RelativeLayout and add android:background="?attr/selectableItemBackground" to it:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?listPreferredItemHeightLarge"
android:background="?selectableItemBackground"
android:descendantFocusability="blocksDescendants">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:src="#drawable/holder"
android:scaleType="centerCrop"
android:focusableInTouchMode="false"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:alpha="0.3" />
</FrameLayout>
<br.com.lexsis.pizzahut.presentation.widgets.CustomFontTextView
android:id="#+id/group_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
style="#style/TextView.EMenu" />
</RelativeLayout>
</RelativeLayout>
Setting it to the root layout never worked for me.