Develop Reference

Creating a layout where a view is anchored to bottom (but also stacked on top) of ImageView

I'd like to start by showing what I'm trying to achieve, and I'll move on to what I I know and have tried.
• What I've tried:
I've tried Collapsing Toolbar Layout, which doesn't give the effect that's in the image, where the bottom view with Title and description is stacked on Top of ImageView.
I used BottomSheet, but unfortunately I don't see any way to anchor the BottomSheet to the bottom of ImageView, I tried to do it using app:layout_anchor="#id/imageView", but it still covers the complete image, and without that, it does as intended, but it doesn't stay below the ImageView, if the image is long, it'll cover a lot of part of that image.
I tried the following layout, (where #drawable/background_blog_description is the drawable with rounded corners at top). Also, in the layout below, I haven't added layout_anchor tag because it covers entire Image (Even if I specify the anchor_gravity="bottom").
<androidx.coordinatorlayout.widget.CoordinatorLayout
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">
<ImageView
android:id="#+id/iv_notice_image_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:transitionName="iv_notice_image" />
<androidx.core.widget.NestedScrollView
android:id="#+id/acm_nsv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_blog_description"
android:orientation="vertical"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:paddingEnd="20dp"
android:paddingBottom="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_notice_title_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:padding="5dp"
android:text="This will be the title of notice"
android:textColor="#color/black"
android:textSize="30sp"
android:textStyle="bold"
android:transitionName="tv_notice_title" />
<WebView
android:id="#+id/mdv_notice_description_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:transitionName="tv_notice_description" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_notice_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_gravity="top|start"
android:layout_margin="8dp"
app:backgroundTint="#color/white"
app:srcCompat="#drawable/ic_back" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
At this point I'm kinda blank as to what I should do to make something like below. It must be something really simple, but I'm not seeing it for some reason. My only requirement is that the bottom Layout/View of the ImageView should be on top of it, with a small part of Image (20dp maybe?) under that view, and when scrolled, it should cover the image.
So, BottomSheet which can be anchored at the bottom of ImageView, but with some part of Image going under the BottomSheet?

Put your image within an AppBarLayout and then add app:behavior_overlapTop=20dp to your NestedScrollView.
https://developer.android.com/reference/android/support/design/widget/AppBarLayout.ScrollingViewBehavior.html#setOverlayTop(int)

Anchoring a view to appear at position that was clicked?

I have a RecyclerView which contains many images. When an image is long clicked, I unhide an RelativeView (via setVisibility(View.VISIBLE)) to display a "preview" of the image in an ImageView until the long click is released at which point I hide the preview again. Currently, this is working as expected except that the preview always gets shown in the same spot on the screen.
Is there a way to anchor the preview to the position that the user clicked on? Ideally I'd like to have the bottom corner be aligned with the position at which the user is long clicking(or at least the bottom edge). This is what my preview looks like currently:
This is the RecyclerView and preview container layout:
<?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">
<!-- Recyclerview -->
<com.sometimestwo.moxie.MultiClickRecyclerView
android:id="#+id/recycler_zoomie_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Preview container that gets hidden/unhidden-->
<RelativeLayout
android:id="#+id/hover_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:visibility="gone">
<TextView
android:id="#+id/hover_view_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBgBlackTint"
android:gravity="center"
android:textColor="#color/colorWhite"
android:visibility="visible" />
<ImageView
android:id="#+id/hover_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/hover_view_title"
android:background="#color/colorBgBlackTint"
android:visibility="visible" />
</RelativeLayout>
</FrameLayout>

You can use the PopupWindow. In that you can set a particular view as anchor to show a window and inside the window you can show your preview.

How can i set an image to be in the bottom left corner of an activity AND in the background

I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?

i don't know if i understand correct. but what you ask is pretty simple.
<FrameLayout 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"
android:background="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>

Ripple is drawn below ImageView

I have an ImageView and a CheckBox inside a FrameLayout. Although the CheckBox is placed above the ImageView, its ripple feedback is drawn below the ImageView. Is there any way to draw the ripple on top? Tried adding elevation values but nothing changed.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_height="285dp"
android:layout_width="300dp"
android:src="#drawable/rectangle"
android:layout_gravity="center_horizontal|top" />
<CheckBox
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New CheckBox" />
</FrameLayout>

Seems that the ripples are drawn on top of their container's background. So I put the CheckBox in another container, set the container's background to transparent and the ripple showed up correctly.

ImageView with rounded corners via another Image as a background

I have two images - 1)a rectangular one, displaying the actual content and 2)a white image with rounded transparent corners
Is it possible to place image 1 inside image 2, keeping its size but making it to be the same shape as 2?
Basically I want Image 2 be the container of image 1.
I've tried layer and inset drawables but all the time image 1 overlapped image 2.
Thanks in advance!
UPDATE 1:
Here's my ImageView xml part:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="72dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/avatar"
android:src="#drawable/mainImg"
android:background="#drawable/backgroundImg"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="center"
android:contentDescription="#string/desc" />
</LinearLayout>
UPDATE 2:
Below is the link to three images
1) background
2) main image
3) expected result (with rounded corners)
ImageShack upload

I have had to deal with this issue with an app I recently made. Notice how, in the first and second screenshot, the thumbnails are all framed.
To accomplish this, I'm stacking the image and the frame on top of each other in a FrameLayout. First I layout the actual image (#id/thumbnail), followed by the frame (#id/frame).
Important things to note are that the thumbnail is using a scaleType of "fitXY", and has a slight margin so the corners don't stick out behind the frame's rounded corners.
This really only works if your frame border is opaque, so you may have to make your frame edges the same color as your background.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="#dimen/thumbnail_size"
android:layout_height="#dimen/thumbnail_size"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="4dp"
android:scaleType="fitXY" />
<ImageView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pixel_frame"
android:scaleType="fitXY" />
</FrameLayout>

One easy solution would be to use just one ImageView with android:background for your image2, which you say is the container, andr android:src for image1, which is the actual image :
<ImageView
...
android:background="#drawable/image2"
android:src="#drawable/image1"
android:padding="2dp" />
Just add a padding, to specify how much empty space you want to leave between the "frame" and your actual "picture".

Use ImageButton.. Set Background as Image1 and Image src as Image2
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image2"
android:src="#drawable/image1" />