CODEWITHSUNDEEP
androidandroid-viewpagerandroid-coordinatorlayoutandroid-appbarlayoutnestedscrollview
Kushminder Garg
Kushminder Garg

Reputation: 518

How to remove empty white space at the bottom of CoordinatorLayout with NestedScrollView

I am working with CoordinatorLayout in which i am using AppbarLayout along with ViewPager, Nestedscrollview and TabLayout. On scroll of layout AppbarLayout folds and unfolds.

Now the issue is that onscroll of this layout it leaves empty white space at bottom which I don't want.

Here is my Drawer-Layout:

<?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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:id="@+id/frame_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

            <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/coordinator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.design.widget.AppBarLayout
                    android:id="@+id/app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:background="@drawable/offer_image"
                    android:fitsSystemWindows="true"
                    android:theme="@style/AppTheme.AppBarOverlay"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">
                    <!--    <com.flaviofaria.kenburnsview.KenBurnsView
                            android:id="@+id/image"
                            android:layout_width="match_parent"
                            android:layout_height="220dp"
                            android:src="@drawable/offer_image" />-->
                    <android.support.design.widget.CollapsingToolbarLayout
                        android:id="@+id/toolbar_layout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:fitsSystemWindows="true"
                        app:expandedTitleMarginEnd="64dp"
                        app:expandedTitleMarginStart="48dp"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed">


                        <com.flaviofaria.kenburnsview.KenBurnsView
                            android:id="@+id/image"
                            android:layout_width="match_parent"
                            android:layout_height="220dp"
                            android:src="@drawable/offer_image" />

                        <FrameLayout
                            android:id="@+id/collapse_frame"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#B3c85a00">

                        </FrameLayout>

                        <FrameLayout
                            android:id="@+id/centerCircle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center">

                            <ImageView
                                android:id="@+id/imageViewCenter"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center" />
                        </FrameLayout>


                        <android.support.design.widget.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:layout_marginBottom="15dp"
                            app:tabIndicatorColor="#FFFFFF"
                            app:tabMode="scrollable" />
                        <!--</FrameLayout>-->
                    </android.support.design.widget.CollapsingToolbarLayout>
                </android.support.design.widget.AppBarLayout>

                <!--<FrameLayout-->

                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!-- -->
                <!--android:visibility="visible">-->

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"
                    style="@style/floating_action_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    android:src="@drawable/ic_share_white_24dp"
                    android:visibility="gone"
                    app:backgroundTint="#FF9800"
                    app:elevation="6dp"
                    app:pressedTranslationZ="12dp" />

                <android.support.v4.view.ViewPager

                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/pager_pre"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|bottom|fill_vertical"
                    android:layout_marginTop="0dp"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior">

                </android.support.v4.view.ViewPager>


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

            <RelativeLayout
                android:id="@+id/bannerView"
                android:layout_width="match_parent"
                android:layout_height="58dp"
                android:layout_gravity="bottom|center"
                android:background="@drawable/curved_white_with_blue_border"
                android:visibility="gone">

                <TextView
                    android:id="@+id/bannerText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:padding="3dp"
                    android:text="Banner"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/bannerImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentLeft="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:padding="3dp"
                    android:scaleType="fitXY"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/bannerClose"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_centerVertical="true"
                    android:src="@drawable/cross_icon" />
            </RelativeLayout>


            <LinearLayout
                android:id="@+id/socialTabs"
                android:layout_width="match_parent"
                android:layout_height="46dp"
                android:layout_gravity="bottom|center"
                android:layout_marginBottom="5dp"
                android:background="@color/White"
                android:orientation="horizontal"
                android:visibility="gone">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:src="@drawable/follow" />

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:background="@color/White">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="46dp"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:weightSum="3">

                        <ImageView
                            android:id="@+id/facebookImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_weight="1"
                            android:src="@drawable/fb_follow" />

                        <ImageView
                            android:id="@+id/googlePlusImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_weight="1"
                            android:adjustViewBounds="true"
                            android:src="@drawable/google_follow" />

                        <ImageView
                            android:id="@+id/twitterImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_weight="1"
                            android:adjustViewBounds="true"
                            android:src="@drawable/twitter_follow" />
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
        </FrameLayout>

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

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

    <ExpandableListView
        android:id="@+id/left_drawer"
        android:layout_width="265dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:choiceMode="singleChoice"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:drawSelectorOnTop="true"
        android:groupIndicator="@null"
        android:scrollbars="@null" />
    <!--    <FrameLayout xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:ignore="MergeRootFrame"></FrameLayout>-->

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

NestedScrollView's code:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_gravity="fill_vertical"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/fragment_back_color"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/new_recharge" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="NEW PAYMENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <RelativeLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@color/white"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

                <HorizontalScrollView
                    android:id="@+id/hsv"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:fillViewport="true"
                    android:measureAllChildren="false"
                    android:scrollbars="none">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/wallet_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/wallet_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/wallet_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="WALLET"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/prepaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/prepaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/prepaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="PREPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/postpaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/postpaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/postpaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="POSTPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/dth_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/dth_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/dth_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DTH"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/landline_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/landline_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/landline_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="LANDLINE"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/datacard_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/datacard_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/datacard_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DATACARD"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                        </LinearLayout>
                    </LinearLayout>
                </HorizontalScrollView>
            </RelativeLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="10dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingTop="10dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="RECENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:id="@+id/lincontainer_rec"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:divider="?android:dividerHorizontal"
                    android:orientation="vertical"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:showDividers="middle" />
            </FrameLayout>
        </LinearLayout>
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

I am sharing a video click of this problem:

https://www.dropbox.com/s/9yojeq2yw1eebps/layout_height_issue.mp4?dl=0

I am banging my head on this from last three days.

Any help will be appreciated.

Upvotes: 1

Views: 7591

Answers (1)

ʍѳђઽ૯ท
ʍѳђઽ૯ท

Reputation: 16980

Try to add : 

android:layout_gravity="fill_vertical"

To the NestedScrollView and RecyclerView.(or you can try it just for NestedScrollView).

Also, check this link too: https://stackoverflow.com/a/31266160/4409113

Which said:

It's Design Library's fault. Layouts "shorter" than screen height cause gaps, misbehaviour in collapsing/unfolding (i.e. you need to drag outside of collapsed area to unfold it again etc, etc, etc. It's just quite buggy at the moment or writing this answer (it will, hopefully be fixed some day, but I got no clue when this is going to happen).

By the way, I am using the following codes and it's working with match_parent:

<android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:id="@+id/cvuser"
            android:layout_width="365dp"
            android:layout_height="140dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="1dp">

            <RelativeLayout
                android:id="@+id/idrel"
                android:layout_width="fill_parent"
                android:layout_height="140dp">

                <TextView
                    android:id="@+id/txtmessage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="17dp"
                    android:layout_marginTop="10dp"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/txtauthor"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignStart="@+id/txtmessage"
                    android:layout_marginBottom="35dp"
                    android:textAppearance="?android:attr/textAppearanceMedium" />


            </RelativeLayout>
        </android.support.v7.widget.CardView>

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

And i saw the video again and the thing is your contents are not enough for Scrolling.I mean, if you can add the above CardView with a RecyclerView, you'll see what will happens.the contents are not enough for scrolling and more contents into the NestedScrollView and then with match_parent, it should work.

Upvotes: 4

Related Questions