Scroll a hidden view/layout from bottom

Question

This is what I want to achieve :

I wanted to use AbsoluteLayout but it is deprecated. So I made a RelativeLayout beneath the blue view in the image above, and then put everything inside a ScrollView, but the hidden view is still 'on' the blue view, and not below it. Also, the screen scrolls, but the hidden part is just cut , and instead I see the my app's default background..

Any ideas?

EDIT : my current try :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:fillViewport="true"
    android:layout_height="wrap_content">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/imageView" />

    <LinearLayout
        android:id="@+id/centerHolder"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

       .....
       .....
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:layout_below="@id/main_holder"
        android:background="@color/black_color">

    </RelativeLayout>

</RelativeLayout>
</ScrollView>

Answer 1

I am taking this from a project of mine which displays a RecyclerView where you can add data if you click on a row - because the click "opens" the bottom sheet.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".view.fragment.BlockFragment">

        <include
            android:id="@+id/ll_header"
            layout="@layout/layout_header_names" />

        <include
            android:id="@+id/divider_header"
            layout="@layout/layout_divider_horizontal"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@+id/ll_header" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_block"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/divider_footer"
            android:layout_below="@+id/divider_header" />

        <include
            android:id="@+id/divider_footer"
            layout="@layout/layout_divider_horizontal"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#767676"
            android:layout_above="@+id/ll_footer" />

        <include
            android:id="@+id/ll_footer"
            layout="@layout/layout_footer_score"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_alignParentBottom="true"/>

    </RelativeLayout>

    <!-- Here comes my bottom sheet.
         It is wrapped inside a FrameLayout, because an include cannot 
         have a behaviour. The included layout is every layout you 
         can imagine - mine is a RelativeLayout with two EditTexts 
         for example. The layout_behaviour is the second important line.  -->
    <FrameLayout
        android:id="@+id/container_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e3e3e3"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <include layout="@layout/layout_bottom_sheet"/>

    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>

For the behaviour itself, you'll need to get the FrameLayout (the View with the app:layout_behavior="android.support.design.widget.BottomSheetBehavior").

private BottomSheetBehavior bottomSheetBehavior;

bottomSheetBehavior = BottomSheetBehavior.from((FrameLayout)findViewById(R.id.container_bottom_sheet);

//for the sheet to "peek":
bottomSheetBehavior.setPeekHeight(200);


//now you can set the states:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

It is also possible to set a BottomSheetCallback() in which you can get all the state changes and also the slideOffset!

    bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            switch (newState) {
                case BottomSheetBehavior.STATE_DRAGGING:
                case BottomSheetBehavior.STATE_EXPANDED:
                    break;
                case BottomSheetBehavior.STATE_COLLAPSED:
                default:

            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {

        }
    });