Mahdi Hraybi Mahdi Hraybi -3 years ago 149
Android Question

How to make recyclerview items overlap image slider

i have an image slider and a recyclerview which contains news.

When scrolling recyclerview from bottom to top the recyclerview is going (hiding) under the image slider as this picture shows from my app i am currently developing:

enter image description here

And this a screenshot from a news app on my device :

enter image description here

As you can see in the last picture how the recyclerview is overlapping the image slider.

How can i achieve that ?

This my fragment xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="@+id/framelayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linearFragmentOne"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.baoyz.widget.PullRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
app:refreshColors="@array/colors_swipe"
app:refreshType="ring"
android:layout_height="200dp">

<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:indicator_visibility="visible"
custom:pager_animation="Accordion"
custom:pager_animation_span="1100" />

</com.baoyz.widget.PullRefreshLayout>

<TextView
android:id="@+id/txt_marquee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:singleLine="true"
/>

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"

>

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_post"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>

</android.support.v4.widget.NestedScrollView>

</LinearLayout>


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


i have UPDATED the fragment xml as this one :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


<LinearLayout
android:orientation="vertical"
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.baoyz.widget.PullRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
app:refreshColors="@array/colors_swipe"
app:refreshType="ring"
android:layout_height="200dp">

<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:indicator_visibility="visible"
custom:pager_animation="Accordion"
custom:pager_animation_span="1100" />

</com.baoyz.widget.PullRefreshLayout>

<TextView
android:id="@+id/txt_marquee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:singleLine="true"
/>

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"

>

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_post"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_overlapTop="100dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>

</android.support.v4.widget.NestedScrollView>

</LinearLayout>
</android.support.design.widget.AppBarLayout>


Nothing changed just a simple toolbar was added in the top of the imageslider

FINAL_UPDATE :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView

android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/tools">

<LinearLayout
android:orientation="vertical"
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.baoyz.widget.PullRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
app:refreshColors="@array/colors_swipe"
app:refreshType="ring"
android:layout_height="200dp">

<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:indicator_visibility="visible"
custom:pager_animation="Accordion"
custom:pager_animation_span="1100" />

</com.baoyz.widget.PullRefreshLayout>

<TextView
android:id="@+id/txt_marquee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:textSize="15sp"
android:textColor="#FFFFFF"
android:singleLine="true"
/>

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_post"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</LinearLayout>

</android.support.v4.widget.NestedScrollView>

Answer Source

IDK what your PullRefreshLayout widget does but you can get the behaviour you want by adding an AppBarLayout with the Slider inside and the PullRefreshLayout if necessary. And then add app:behavior_overlapTop="here goes the amount of dp you want to overlap over the AppBarLayout"on the NestedScrollView and/or the RecyclerView.

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        <com.daimajia.slider.library.SliderLayout
            android:id="@+id/slider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            custom:indicator_visibility="visible"
            custom:pager_animation="Accordion"
            custom:pager_animation_span="1100" />
    </LinearLayout>
</android.support.design.widget.AppBarLayout>

...

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_vertical"

    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_post"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_overlapTop="100dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.v4.widget.NestedScrollView>

This way you can adjust the amount the RecyclerView overlaps the AppBarLayout. If you need to this programmatically check setOverlayTop.

But if you need to pass over completely, just wrap everything into the NestedScrollView and add the app:layout_behavior to the slider too so it goes up too when you scroll the RecyclerView, it won't overlap it, but it will take its space as the Slider goes upwards.

And if you want to do a custom overlapping, it would be handy to have the link to the libraries you used for the custom controls com.baoyz.widget.PullRefreshLayout and com.daimajia.slider.library.SliderLayout.

Update

To clarify:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="@+id/framelayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/framelayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            <com.baoyz.widget.PullRefreshLayout
                android:id="@+id/swipe_refresh"
                android:layout_width="match_parent"
                app:refreshColors="@array/colors_swipe"
                app:refreshType="ring"
                android:layout_height="200dp">

                <com.daimajia.slider.library.SliderLayout
                    android:id="@+id/slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    custom:indicator_visibility="visible"
                    custom:pager_animation="Accordion"
                    custom:pager_animation_span="1100" />

            </com.baoyz.widget.PullRefreshLayout>

            <TextView
                android:id="@+id/txt_marquee"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:focusable="true"
                android:textSize="15sp"
                android:textColor="#FFFFFF"
                android:singleLine="true"
                />

        </LinearLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_vertical"
        >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_post"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:behavior_overlapTop="100dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
                />

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download