1

I have an android app in which I am trying to create the below layout - 

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

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

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:background="@color/tab_primary_background"
                android:layout_height="wrap_content"
                app:elevation="5dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    style="@style/Toolbar"
                    app:subtitleTextColor="@color/white"
                    app:title="@string/app_name"
                    app:titleTextAppearance="@style/Toolbar.TitleText"
                    app:titleTextColor="@color/white" />

            </android.support.design.widget.AppBarLayout>
            <ScrollView
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:fillViewport="true"
                android:layout_height="0dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:layout_height="wrap_content">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:orientation="vertical"
                        android:paddingStart="15dp"
                        android:paddingEnd="15dp"
                        android:paddingLeft="15dp"
                        android:paddingRight="15dp"
                        android:layout_marginTop="15dp"
                        android:layout_height="wrap_content">
                        <ImageView
                            android:layout_width="60dp"
                            android:src="@drawable/teacher_onboarding_step2"
                            android:layout_height="60dp"
                            android:layout_gravity="center"
                            android:textAlignment="center"
                            android:contentDescription="@string/take_test" />
                        <TextView
                            android:layout_width="match_parent"
                            android:id="@+id/tat_title_placeholder"
                            style="@style/TextAppearance.Text.Light"
                            android:textSize="14sp"
                            android:textAlignment="center"
                            android:padding="15dp"
                            android:text="@string/tat_title_placeholder"
                            android:layout_height="wrap_content" />
                        <com.mindorks.placeholderview.PlaceHolderView
                            android:layout_width="match_parent"
                            android:id="@+id/fixed_test_placeholder"
                            android:layout_height="wrap_content" />

                    </LinearLayout>
                    <android.support.design.widget.TabLayout
                        android:layout_width="match_parent"
                        android:id="@+id/tat_tab_layout"
                        app:tabIndicatorColor="@color/white"
                        app:tabSelectedTextColor="@color/white"
                        app:tabBackground="@color/tab_primary_background"
                        android:layout_height="wrap_content" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/tat_viewpager"
                        android:layout_width="match_parent"
                        android:layout_weight="1"
                        android:layout_height="0dp" />
                </LinearLayout>
            </ScrollView>
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/drawer_header"
        app:itemBackground="@color/white"
        app:itemIconTint="@color/black_effective"
        app:itemTextColor="@color/black_effective"
        app:menu="@menu/drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextStyle.Title.Sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

So, in this layout as you can see I want to add a TabLayout and a ViewPager below some views. Now the problem I am facing is my ViewPager is restricted to the available space at the bottom of the screen so, only the viewpager is scrollable and not the full activity layout. Which leaves very little space at the bottom to see the viewpager contents.

So, I want to make the whole layout below the appbar scrollable from the top so that the fragments inside viewpager are easily and conveniently visible.

------------Update--------- I tried using the Nested Scroll View, setFillViewPort, and the collapsing layout as suggested but still getting the same result. Updated layout xml with Collapsing ToolbarLayout - 

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.urtutors.students.mvp.utils.MyNestedScrollView
            android:layout_width="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:layout_height="wrap_content">
                <com.urtutors.students.mvp.utils.WrapContentHeightViewPager
                    android:id="@+id/tat_viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </com.urtutors.students.mvp.utils.MyNestedScrollView>
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:background="@color/tab_primary_background"
            android:layout_height="wrap_content"
            app:elevation="5dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:paddingStart="15dp"
                    app:layout_collapseMode="parallax"
                    android:paddingEnd="15dp"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp"
                    android:layout_marginTop="15dp"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:layout_width="60dp"
                        android:src="@drawable/teacher_onboarding_step2"
                        android:layout_height="60dp"
                        android:layout_gravity="center"
                        android:textAlignment="center"
                        android:contentDescription="@string/take_test" />
                    <TextView
                        android:layout_width="match_parent"
                        android:id="@+id/tat_title_placeholder"
                        style="@style/TextAppearance.Text.Light"
                        android:textSize="14sp"
                        android:textAlignment="center"
                        android:padding="15dp"
                        android:text="@string/tat_title_placeholder"
                        android:layout_height="wrap_content" />
                    <com.mindorks.placeholderview.PlaceHolderView
                        android:layout_width="match_parent"
                        android:id="@+id/fixed_test_placeholder"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    style="@style/Toolbar"
                    app:layout_collapseMode="pin"
                    app:subtitleTextColor="@color/white"
                    app:title="@string/app_name"
                    app:titleTextAppearance="@style/Toolbar.TitleText"
                    app:titleTextColor="@color/white" />
            </android.support.design.widget.CollapsingToolbarLayout>
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:id="@+id/tat_tab_layout"
                app:tabIndicatorColor="@color/white"
                app:tabSelectedTextColor="@color/white"
                app:tabBackground="@color/tab_primary_background"
                android:layout_height="wrap_content" />
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/drawer_header"
        app:itemBackground="@color/white"
        app:itemIconTint="@color/black_effective"
        app:itemTextColor="@color/black_effective"
        app:menu="@menu/drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextStyle.Title.Sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

The nested scroll views I copied from - https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview

Now, the viewpager is scrolling but my actionbar title is not visible anymore.

Can someone suggest any changes to this layout that could fix this issue ?

Harshit Laddha
  • 2,044
  • 8
  • 34
  • 64
  • This might solve your problem [#NestedScrollView](https://stackoverflow.com/questions/30580954/viewpager-in-a-nestedscrollview) Hope it helps!!! – Anu Bhalla Jun 21 '18 at 16:07
  • I tried using it, but when I use it even the viewpager fragments don't scroll and respond to my motion events – Harshit Laddha Jun 21 '18 at 16:07

1 Answers1

0

I have tried to refine your code and if I am not wrong you wanted it to be scrollable,you can try the following code.

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

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

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                app:elevation="5dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize"
                    app:subtitleTextColor="@android:color/white"
                    app:title="@string/app_name"
                    app:titleTextColor="@android:color/white" />

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

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        android:orientation="vertical"
                        android:paddingEnd="15dp"
                        android:paddingLeft="15dp"
                        android:paddingRight="15dp"
                        android:paddingStart="15dp">

                        <ImageView
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            android:layout_gravity="center"
                            android:contentDescription="@string/take_test"
                            android:src="@mipmap/ic_launcher"
                            android:textAlignment="center" />

                        <TextView
                            android:id="@+id/tat_title_placeholder"
                            style="@android:style/TextAppearance.Medium"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:padding="15dp"
                            android:text="@string/tat_title_placeholder"
                            android:textAlignment="center"
                            android:textSize="14sp" />

                        <View
                            android:id="@+id/fixed_test_placeholder"
                            android:layout_width="match_parent"
                            android:background="@color/colorAccent"
                            android:layout_height="400dp" />

                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="500dp"
                        android:orientation="vertical">
                        <android.support.design.widget.TabLayout
                            android:id="@+id/tat_tab_layout"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            app:tabMode="scrollable"
                            app:tabPadding="@dimen/s_padding"
                            app:tabBackground="@color/colorPrimaryDark"
                            app:tabIndicatorColor="@android:color/white"
                            app:tabSelectedTextColor="@android:color/white" />

                        <android.support.v4.view.ViewPager
                            android:id="@+id/tat_viewpager"
                            android:layout_width="match_parent"
                            android:background="@color/colorPrimaryDark"
                            android:layout_height="wrap_content" />


                    </LinearLayout>

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:headerLayout="@layout/nav_header_nav"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@android:color/black"
        app:itemTextColor="@android:color/black"
        app:menu="@menu/activity_nav_drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextAppearance.AppCompat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

I have made minor changes.

  1. Try not to use weights when using scrollView.As they don't work so well with each other.
  2. I have wrapped Tab layouts in a Linear Layout and gave it static height(can be replaced easily).

Hope it helps.

Anu Bhalla
  • 422
  • 4
  • 11