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)

Linear Layout won't take the height of its parent in percentRelativeLayout

I am using Xamarin Android, and I have a list view with row views that have the following content in them:
All of these views are wrapped in a PercentRelativeLayout, because I want to keep the widths proportional. So the issue I'm running into is that since the two layouts on the left are left empty and filled at runtime (there is absolutely no way around this) their height is measured out to 0, which then sets the Rowview height to 0, and that then sets the controls layout off to the right to have a height of 0, which then stretches to the size of the largest control inside of it (ex:)
I have tried:
Using layout weights and a height of 0 to allow the layout itself to stretch to fill the parent
Using layout weights on the controls themselves within the layout
Scrapping a layout altogether, and simply wrapping the image buttons in the PercentRelativeLayout, and using layout positions to position them properly
Using percentage based layout widths and heights within the children to fill the height (this only seems to work for the width, but not height)
Adding dummy views as padding to push the controls layout into position
Adding percentage based margins to the layout itself, the children, the padding dummy views, and every combination of those
Not one single thing I have tried has had any effect, the only thing that affects the height of the linear layout is simply hard-coding the height.
My question then is how can I tell this layout to occupy the full height of the rowview once everything has been measured? (Please let me know if you have any other questions to help address this, I'm happy to oblige)
EDIT #1: Here is my xml for the rowview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="400dp"
android:layout_height="match_parent"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:paddingTop="10dp"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="match_parent"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_below="#id/LeadTagLayout"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"
android:background="#drawable/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"
android:background="#drawable/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>

I've played a bit with your code, and the result seems good.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a test"/>
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_marginTop="5dp"
android:layout_below="#id/LeadTagLayout">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
Let me know if this works for you at runtime (i've removed some background drawable files which you didn't provided to test this XML).
I've added a TextView inside the RelativeLayout to test his height

Wrap content is not working on Vertical line in Relative Layout?

I am using View with a background colour to create a vertical line in a Relative layout . Wrap content is not working , the line is taking the entire viewport as height. Why is this happening ? attaching my code which is not working
<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="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
tools:ignore="MissingPrefix">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="2dp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_marginLeft="21.5dp"
android:background="#a9382b" />
<TextView
android:id="#+id/seeall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:textColor="#a9382b"
android:textSize="11sp"
tools:text="SEE ALL" />
</RelativeLayout>
</LinearLayout>

Setting the height to wrap_content in this case simply will not work.
In general, wrap_content will give the view enough size to contain everything "inside" it (whether that's child views or just the text in a TextView, etc), but your View tag doesn't have anything "inside" it to define the height. In this case, it will grow to fill all available space.
If you want your RelativeLayout to be as tall as the TextView inside of it, and you want the line to go from top to bottom of that size, use the following for your View tag:
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/seeall"
android:layout_alignBottom="#+id/seeall"
android:layout_marginLeft="21.5dp"
android:background="#a9382b">

Android | CardView stays above TextView

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/create_workout_fab_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/fab"
android:stateListAnimator="#anim/fab_elevation"
android:clickable="true"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/create_workout_fab_anim_helper"
android:layout_width="#dimen/fab_size"
android:layout_height="#dimen/fab_size"
card_view:cardBackgroundColor="#color/primary_dark"
card_view:cardCornerRadius="#dimen/fab_radius"
android:visibility="invisible"
/>
<TextView
android:id="#+id/create_workout_fab_label"
android:layout_width="#dimen/fab_size"
android:layout_height="#dimen/fab_size"
android:background="#drawable/fab_ripple_selector"
android:textAppearance="?android:textAppearanceLarge"
android:text="+"
android:textColor="#color/fab_label_color"
android:duplicateParentState="true"
android:gravity="center"
tools:text="+"
tools:textColor="#color/fab_label_color"
/>
</FrameLayout>
The CardView is only there to use it for an smooth animation from a cirle button to a rectangle view by animation a radius change.
But the problem is, wheneever the CardView becomes visible it stays above the TextView. Why is that and how do I get it to lay under the TextView

FrameLayout draws children in order, first to last. Therefore you need to swap the CardView with the TextView.
UPDATE:
Also if you are running on android L+ you need to set a higher elevation on the CardView than the TextView

Android: Draw line behind ImageView in list item

I would like to draw a line behind an ImageView in a list item which fills the entire height of the list item. The image in the following link shows my desired result. The blue line is the one I want.
https://www.dropbox.com/s/fbdsuvcyxaz1pnj/listViewDesired.png?dl=0
I have a ListView with a custom adapter and layout for each row. The row is comprised of a relative layout with a few elements: an image with a specific size anchored to the left, a text view with a specific size anchored to the right, and a text view which fills the rest of the space in between.
I want to show a thin line coming out of the top and bottom of the ImageView and fill the rest of the space for that list item. The List item's size can become larger than the image size if there is a lot of text in the middle. How can I achieve this?
I have tried multiple approaches with a framelayout with a view that matches/fills the parent and the ImageView, and a linearlayout with 3 views (top line, imageView, bottom line that fills the parent), and the image looks correct in the IDE render, but the lines do not extend all the way or even show up when the app is actually running.
This is my layout without a line behind the imageview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<ImageView
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_marginTop="#dimen/margin"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toRightOf="#id/tabIcon"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>

You just need to create separate layout for Image as well as Vertical Line and to draw Vertical Line you need to add a View with width of 1dp or the thickness you want.
Try with the following Code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered -->
<RelativeLayout
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tabText" >
<View
android:id="#+id/verticleLine"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#0000ff" />
<ImageView
android:id="#+id/tabIcon"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"
android:layout_centerInParent="true"
android:layout_marginTop="#dimen/margin"
android:src="#drawable/face" />
</RelativeLayout>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/margin" />
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_toRightOf="#id/image"
android:text="#string/long_string" />
</RelativeLayout>

So I managed to solve the issue by using an enclosing LinearLayout instead. I have changed some of the margin stuff but I get my desired effect. :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingLeft="#dimen/marginTop"
android:paddingRight="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<LinearLayout
android:orientation="vertical"
android:clipChildren="false"
android:id="#+id/frameTabIcon"
android:layout_marginRight="#dimen/margin"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:id="#+id/tabTopLine"
android:layout_width="#dimen/lineThickNess"
android:layout_height="#dimen/marginTop"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"/>
<ImageView
android:onClick="deletePersonOnClick"
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<View
android:id="#+id/tabBottomLine"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"
android:minHeight="#dimen/marginTop"
android:layout_width="#dimen/lineThickNess"
android:layout_height="match_parent"/>
</LinearLayout>
<RelativeLayout
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>