Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Collapsing Toolbar Layout is not expanded at first time and pin doesn't work

I have a bottom sheet in my app and I want to use of Collapsing Toolbar Layout in it. but when I open bottom sheet Collapsing Toolbar Layout will disappear and I have to scroll down to see it.

And another problem is about pin mode that doesn't work for my Linear layout that I want to be the pin in scroll mode.

and when I add Collapsing Toolbar Layout my bottom sheet will not open full screen too.

screen shot of my bottom sheet appearance

This is my XML:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:background="#ffffff"
        app:elevation="5dp"
        app:expanded="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expanded="true">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7">

                <android.support.v4.view.ViewPager
                    android:id="@+id/pager"
                    android:layout_width="match_parent"
                    android:layout_height="252dp"
                    app:layout_constraintBottom_toTopOf="@+id/indicator"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>

                <me.relex.circleindicator.CircleIndicator
                    android:id="@+id/indicator"
                    android:layout_width="match_parent"
                    app:ci_drawable="@drawable/circleindicator_round"
                    android:layout_height="48dp"
                    android:layout_gravity="bottom"
                    android:gravity="bottom"
                    android:visibility="visible"/>
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:layout_gravity="bottom"
                android:visibility="visible"
                app:titleTextColor="@color/black">
            </android.support.v7.widget.Toolbar>

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e9e7e7"
        android:fillViewport="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">



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

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

Thank you for your answer.

like image 803
Ehsan Avatar asked Sep 01 '17 07:09

Ehsan


2 Answers

add android:fitsSystemWindows="true" in CoordinatorLayout and CollapsingToolbarLayout. app:elevation="5dp" app:expanded="true" is not necessary . remove LinearLayout and place a FrameLayout

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="ASDASD">

        <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="252dp"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_gravity="bottom"
            android:layout_marginTop="230dp"
            android:layout_height="wrap_content">

        <me.relex.circleindicator.CircleIndicator
                android:id="@+id/indicator"
                android:layout_width="match_parent"
                app:ci_drawable="@drawable/circleindicator_round"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:gravity="bottom"
                android:visibility="visible"/>

        </FrameLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

        </android.support.v7.widget.Toolbar>

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

and remove android:fillViewport="false" in NestedScrollView

like image 130
Pranav Ashok Avatar answered Oct 21 '22 09:10

Pranav Ashok


I found my mistake. I used my code in normal Activity and it works fine. It doesn't work correctly in the BottomSheet.

The promblem is about the BottomSheet but I don't know how to fix that. Anyway, This problem is solved by using a Simple Activity.

like image 32
Ehsan Avatar answered Oct 21 '22 07:10

Ehsan