Android FrameLayout Views Overlapping not Working - android

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 :

Related

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>

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" />

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.

Overlap Layout with ImageView

Im trying to create the following Layout:
The border of the RelativeLayout is realized with a rectangle shape as background, but I cannot get the ImageView overlap the RelativeLayout with half of it in and half of it out of the border. Is this even possible with RelativeLayout (And if not: What alternative do I have)?
layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/imageresource"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:padding="#dimen/item_inner_margin"
android:background="#drawable/item_border"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relativeLayout"
android:layout_below="#+id/imageView">
<!-- Stuff in the layout -->
</RelativeLayout>
</RelativeLayout>
Thanks in advance
danijoo

This might be what you're looking for:
<?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"
android:background="#android:color/darker_gray"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:paddingTop="30dp">
<!-- add content here -->
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/imageview1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:background="#android:color/holo_blue_bright"
android:elevation="4dp"
/>
</RelativeLayout>

Categories

Resources