Android collapsing toolbar

Question

Hey I want to full scroll my screen. What I have done is I have taken an expandable list view in my activity with some view-pager and other views. The expandable listview is scrolling perfectly to in its allotted space but what I want is my whole activity's layout should scroll from top to bottom, here is my xml code :

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context="websters.smartindiaserviceapp.Activities.CategoryDetails1">

        <include
            android:id="@id/tool"
            layout="@layout/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <android.support.design.widget.AppBarLayout
            android:id="@+id/materialup.appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="56dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|snap">
        <android.support.v4.view.ViewPager
            android:id="@+id/vpBanners"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/ciBanners"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_marginBottom="10dp"
            android:padding="1dip"
            app:fillColor="#ffffff"
            app:pageColor="#80cccccc" />
        </android.support.design.widget.CollapsingToolbarLayout>
        <LinearLayout
            android:id="@+id/lldesc"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:gravity="left"
            android:orientation="vertical"
            android:padding="12dp"
            android:layout_below="@+id/main.collapsing"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <TextView
                android:id="@+id/tvdesc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginTop="4dp"
                android:text="First Line"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                android:textColor="@android:color/black" />
            
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llservices"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/selecteditem"
            android:gravity="center"

            android:orientation="vertical"
            android:padding="12dp"
            android:layout_below="@+id/lldesc"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <TextView
                android:id="@+id/tvservices"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginTop="4dp"
                android:text="Services"
                android:textStyle="bold"
                android:textSize="20dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                android:textColor="@android:color/white" />

        </LinearLayout>
        </android.support.design.widget.AppBarLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/frstll"
            android:layout_below="@+id/materialup.appbar"
            android:orientation="vertical">

            <ExpandableListView
                android:id="@+id/expandableListView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#ffffff"
                android:childDivider="#f4f4f4"
                android:dividerHeight="1dp"
                android:groupIndicator="@null" />

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="end"
            android:orientation="horizontal">
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|right|end"
                android:layout_margin="@dimen/activity_horizontal_margin"
                android:clickable="true"
                android:elevation="8dp"
                android:src="@android:drawable/ic_menu_help"
                app:backgroundTint="#1abc9c" />

        </LinearLayout>
    </RelativeLayout>
    So help to acheive proper scrolling in this layout file,,

This is the layout's screenshot I have acheived from this xml code. Suggest me what I have to change to acheive proper scroll in this. Should I use a scroll view or coordinate layout and how? Help me out guys. I need smooth and proper scrolling in this activity's layout.

You can try this. https://antonioleiva.com/collapsing-toolbar-layout/ — D.J, Jan 09 '17 at 05:44
abhay n ravish by doing so,,the expandable lv items goes on top of the viewpager,,n hides its items — neha, Jan 09 '17 at 06:43

score 0 · Answer 1 · edited May 23 '17 at 12:07

There are many ways, But simple one is - Use a Header View or/and Footer View on the list itself. Essentially, take all the content above your ExpendableListView, put it in another .xml file as a layout and then in code inflate it and add it to the list as a header view.

i.e.

View header = getLayoutInflater().inflate(R.layout.header, null);
View footer = getLayoutInflater().inflate(R.layout.footer, null);
expandableListView.addHeaderView(header);
expandableListView.addFooterView(footer);

Use this view as your header

There is also another way using Scroll view and making expandableListView scroll disable .you can find Here

Also there is awesome tutorial here at CoderzPassion.You will find it easier.

score 0 · Answer 2 · answered Jan 09 '17 at 06:28

try this:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="websters.smartindiaserviceapp.Activities.CategoryDetails1">

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


        <android.support.design.widget.AppBarLayout
            android:id="@+id/materialup.appbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/main.collapsing"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|snap">


                <include
                    android:id="@id/tool"
                    layout="@layout/toolbar"
                    android:layout_width="fill_parent"
                    android:layout_height="?attr/actionBarSize" />

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

                <com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/ciBanners"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center_horizontal"
                    android:layout_marginBottom="10dp"
                    android:padding="1dip"
                    app:fillColor="#ffffff"
                    app:pageColor="#80cccccc" />


                <LinearLayout
                    android:id="@+id/lldesc"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/main.collapsing"
                    android:background="#ffffff"
                    android:gravity="left"
                    android:orientation="vertical"
                    android:padding="12dp"
                    app:layout_scrollFlags="scroll|enterAlways|snap">

                    <TextView
                        android:id="@+id/tvdesc"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:layout_marginTop="4dp"
                        android:text="First Line"
                        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                        android:textColor="@android:color/black" />
                    ?
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/llservices"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/lldesc"
                    android:background="@color/selecteditem"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="12dp"
                    app:layout_scrollFlags="scroll|enterAlways|snap">

                    <TextView
                        android:id="@+id/tvservices"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:layout_marginTop="4dp"
                        android:text="Services"
                        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                        android:textColor="@android:color/white"
                        android:textSize="20dp"
                        android:textStyle="bold" />

                </LinearLayout>

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


        <android.support.v4.widget.NestedScrollView 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="wrap_content"
            android:padding="@dimen/activity_horizontal_margin"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:id="@+id/frstll"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/materialup.appbar"
                android:orientation="vertical">

                <ExpandableListView
                    android:id="@+id/expandableListView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#ffffff"
                    android:childDivider="#f4f4f4"
                    android:dividerHeight="1dp"
                    android:groupIndicator="@null" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="end"
                android:orientation="horizontal">

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|right|end"
                    android:layout_margin="@dimen/activity_horizontal_margin"
                    android:clickable="true"
                    android:elevation="8dp"
                    android:src="@android:drawable/ic_menu_help"
                    app:backgroundTint="#1abc9c" />

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

try ..putting `framelayout` as your parent instead of relative layout ..and end `nestedscrollview` brfore floating button — rafsanahmad007, Jan 09 '17 at 06:56

Android collapsing toolbar

2 Answers2