Develop Reference

How to stick Linear Layout(with child as recyclerview) in ScrollView at top of screen

How to stick linear layout at top and allow nested scrolling in Recycler view after it get stick to top of screen. Linear layout should stick as header in ScrollView then allow its children nested scrolling in recyclerview
Below is image of how initial layout will look like
After Scroll stick linear layout to top of screen and allow nested scrolling in recyclerview like below image
Below is layout xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:scrollbars="none"
tools:context=".ui.fragment.HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/background_gradient_primary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/layout_divider_16dp"
android:orientation="vertical"
android:visibility="gone"
android:showDividers="middle|end">
<include layout="#layout/layout_toolbar_dashboard" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/categoriesRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:layout_marginVertical="#dimen/margin_16dp"
android:orientation="horizontal"
android:paddingHorizontal="#dimen/margin_16dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:itemCount="6"
tools:listitem="#layout/adapter_categories_item" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background_light_grey_top_corners">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="36dp"
android:gravity="center"
android:layout_marginVertical="#dimen/margin_8dp"
android:orientation="vertical">
<ImageView
android:id="#+id/right_action"
android:layout_width="40dp"
android:layout_height="6dp"
android:src="#drawable/background_line_divider_icon" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dashboardRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:itemCount="3"
android:overScrollMode="never"
tools:listitem="#layout/shimmer_category_item"
android:padding="#dimen/margin_8dp"/>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>

Bottom Sheet Behaviour in Constraint Layout

I've got a simple application and I'm trying to add Bottom Sheet Behaviour. I want to keep Constraint Layout but I want to get Bottom Sheet Behaviour too. I don't want Coordinator Layout and Bottom Sheet Dialog.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:enabled="false"
android:onClick="btn"
android:text="#string/btn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include
layout="#layout/activity_shop"/>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_shop.xml
<?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:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/shop"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_hideable="false"
app:behavior_peekHeight="48dp">
<ImageView
android:id="#+id/arrow"
android:layout_width="match_parent"
android:padding="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/arrow"
app:srcCompat="#drawable/baseline_keyboard_arrow_up_white_48dp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
What I need to change to get this thing working?

For using that use Hierarchy like this for using constraint layout:
<CoordinatorLayout>
// *ViewGroup containing your fixed screen*
<Linear/Relative/Constraint Layout>
</Linear/Relative/Constraint Layout>
// *ViewGroup containing your bottom sheet*
<ConstraintLayout
app:behavior_hideable="false"
app:behavior_peekHeight="90dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" >
</Constraintlayout>
</CoordinatorLayout>

Just add
app:layout_constraintBottom_toBottomOf="parent"
to you activity_shop.xml root
and change it's height to be wrap_content

Android: Make an overlay match content height instead of expanding parent's height

I have the following code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars[1]" />
<!-- This is the element of interest.
View is actually a custom element, but for this example, View has same behavior -->
<View
android:id="#+id/MyView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#A4D38D14" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Which results in the following. Orange is the size of the View of interest. No-matter what I try, it seems I cannot get the View to not expand the parent.
What I really want, is for the View to scale to the same height as the Image like this:
How can this be achieved?
Note: I do not know the size of the Image..

Please replace the code and you are good to go.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars[1]" />
<View
android:id="#+id/MyView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView"
android:background="#A4D38D14" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
The key is to specify android:layout_alignBottom on the View and change the frame layout to relative layout

If I understand your question correctly, you may also try this
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<ImageView
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars[1]" />
<!-- This is the element of interest.
View is actually a custom element, but for this example, View has same behavior -->
<View
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/MyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#A4D38D14" />
</android.support.constraint.ConstraintLayout>
I am posting this because as far as I am concerned ConstraintLayout is designed to use a single layout for the entire design,

I also faced a problem like you and figure out that the problem is generated for the <View> item. I fixed the problem by replacing the <View> with <Linearlayout>. Maybe <View> had a special characteristic that's why it is being overflown. My code snippet is -
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- This is the view intended to be the overlay-->
<LinearLayout
android:id="#+id/ll_overlay"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
</FrameLayout>

ScrollView isn't placed below ToolBar

I faced with the following problem: ScrollView in my activity should be placed below ToolBar. Here's the layout of this activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".SongLyricsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
tools:ignore="MissingConstraints" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</android.support.constraint.ConstraintLayout>
But when I run the app, I see this:
I don't understand, why it happens, as I position it below the toolbar, so, what's the matter?

I solved this problem using a marginTop parameter (equals to toolbar height), like this:
<ScrollView
android:id="#+id/activity_show_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/transparent_background"
>
This works for my app.

This is happening because your scroll views height is match_parent and not 0dp - so your scroll view will not respect your constraints and will spread all over your screen.
Please notice that you are using tools:ignore="MissingConstraints" and the tool attribute will only affect the preview so you will see your layout in a different way from the preview.
In addition, you were missing some constraint - app:layout_constraintTop_toTopOf="parent"
Now with that constraint, it should work:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

you might try:
<LinearLayout>
vertical
<RelativeLayout>
<Toolbar>
someID
parent top
parent left
<Scrollview>
below someID
parent left

Relative Layout inside Card View is not filling the parent even after giving match_parent

I have a cardView layout as below. I have used Stetho to inspect layout in chrome. I could see that Linear Layout is filling the screen width. However, relative Layout is not filling the parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view_show_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:clickable="true"
android:elevation="100dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_layout_show_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view_show_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

Relative layout fills the parent. Try applying different for the layouts to prove it. Something like this...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3367bb"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_layout_show_card"
android:layout_width="match_parent"
android:background="#000000"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view_show_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
You will see that the complete layout becomes black, that means it covers the parent.
If you remove background color of relative layout, you will get to see blue color of linear layout.
If the issue is something else, please ask a new question

The solution is to add this inside of your CardView:
app:cardPreventCornerOverlap="false"