How to do AppBarLayout with Collapsing ToolbarLayout that will collapse when ViewPager scroll ?

DreamCatcher · December 2018

the layout displayes right however the collapsing effect is not working while scrolling, after looking arround I found out that this line app:layout_behavior="@string/appbar_scrolling_view_behavior"
should make it work but its not happening
this my layout:

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="still new to the forum and can't post link"
        xmlns:app="still new to the forum and can't post link"
        xmlns:tools="still new to the forum and can't post link"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light"
        android:fitsSystemWindows="true">

          <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent"
            android:id="@+id/pagerx"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

           <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="206dip"
                android:background="@color/material_grey_50"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginBottom="20dp"
                app:expandedTitleMarginEnd="64dp">


                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:src="@mipmap/ic_launcher"
                    app:layout_collapseMode="parallax"
                    />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/my_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:layout_collapseMode="pin"/>

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


      <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tablayout"
                app:tabGravity="fill"
                app:tabMode="fixed"
                android:layout_gravity="bottom"
                android:background="@color/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
                </android.support.design.widget.TabLayout>


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


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/pagerx"
            app:fabSize="normal"
            android:layout_marginBottom="24dp"
            android:layout_gravity="bottom|center"
            app:layout_anchorGravity="bottom|center"
            app:srcCompat="@android:drawable/ic_dialog_email"
            app:rippleColor="@android:color/holo_red_dark"/>

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

Thanks in advance.

jezh · December 2018

From the demo you post,
There are several questions:
1. to solve the question of the list is overlapped with the appbar, try to delete the outer <LinearLayout></LinearLayout> of <android.support.v4.view.ViewPager> just as follows,

         <android.support.v4.view.ViewPager
         android:layout_width="match_parent"
         android:layout_height="fill_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior"
         android:id="@+id/pagerx"/>

instead of

     <LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent">
       <android.support.v4.view.ViewPager
           android:layout_width="match_parent"
           android:layout_height="fill_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior"
     android:id="@+id/pagerx"/>
    </LinearLayout>

jezh · December 2018

To solve the problem of i cant scroll the list, you can try the following code:

Tab1.cs(add the following code)

    listView.TextFilterEnabled = true;
    listView.Adapter = ListAdapter;
    setListViewHeightBasedOnChildren(listView); // key code

   public void setListViewHeightBasedOnChildren(ListView listView)
{
    try
    {
        ArrayAdapter listAdapter = (ArrayAdapter)listView.Adapter;
        if (listAdapter == null)
        {
            // pre-condition
            return;
        }

        int totalHeight = 0;
        for (int i = 0; i < listAdapter.Count; i++)
        {
            View listItem = listAdapter.GetView(i, null, listView);
            listItem.Measure(0, 0);
            totalHeight += listItem.MeasuredHeight;
        }

        ViewGroup.LayoutParams _params = listView.LayoutParameters;

        _params.Height = totalHeight + (listView.DividerHeight * (listAdapter.Count - 1));
        if (_params.Height < 250)//to have min height
            _params.Height = 250;//to have min height
        listView.LayoutParameters = _params;
        listView.RequestLayout();
    }
    catch (Exception ex)
    {

    }
}

Tab1.axml

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/transparent"
android:fillViewport="true"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:scrollbarAlwaysDrawVerticalTrack="true">

<!-- TODO: Update blank fragment layout -->
<LinearLayout android:descendantFocusability="blocksDescendants"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ListView android:id="@+id/listView"
        android:layout_height="fill_parent"
        android:layout_width ="match_parent"
        android:descendantFocusability="blocksDescendants"
        />
   </LinearLayout>
   </android.support.v4.widget.NestedScrollView>

The whole app is in the attachment. Hope it can help you.

jezh · December 2018

Could you please post the activity class code of the layout of this layout or a basic demo?

DreamCatcher · December 2018

@jezh sure.

This is the layout for the first tab, I am pretty sure the issue is over here with the NestedScrollView

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.NestedScrollView xmlns:android="can't post links" 
        xmlns:app="can't post links"
        xmlns:tools="can't post links"
            android:layout_height="match_parent"
             android:layout_width="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior"
             android:background="@android:color/transparent"
             android:fillViewport="true">

      <!-- TODO: Update blank fragment layout -->

        <ListView android:id="@+id/listView"
            android:layout_height="fill_parent"
            android:layout_width ="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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



    public class Tab1 : Android.Support.V4.App.Fragment
        {
            public override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);

                // Create your fragment here


            }

            public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
            {



                // Use this to return your custom view for this Fragment
                View view =  inflater.Inflate(Resource.Layout.Tab1, container, false);
                ListView listView = view.FindViewById<ListView>(Resource.Id.listView);
                ArrayAdapter<string> ListAdapter = new ArrayAdapter<string>(listView.Context,Resource.Layout.list_item, countries);

                listView.TextFilterEnabled = true;
                listView.Adapter = ListAdapter;
                listView.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args)
                {
                    Toast.MakeText(Application.Context, ((TextView)args.View).Text, ToastLength.Short).Show();
                };




                return view;
                //return base.OnCreateView(inflater, container, savedInstanceState);
            }


            static readonly string[] countries = new String[] {
        "Afghanistan","Albania","Algeria","American Samoa","Andorra",
        "Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina",
        "Armenia","Aruba","Australia","Austria","Azerbaijan",
        "Bahrain","Bangladesh","Barbados","Belarus","Belgium",
        "Belize","Benin","Bermuda","Bhutan","Bolivia",
        "Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory",
        "British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi",
        "Cote d'Ivoire","Cambodia","Cameroon","Canada","Cape Verde",
        "Cayman Islands","Central African Republic","Chad","Chile","China",
        "Christmas Island","Cocos (Keeling) Islands","Colombia","Comoros","Congo",
        "Cook Islands","Costa Rica","Croatia","Cuba","Cyprus","Czech Republic",
        "Democratic Republic of the Congo","Denmark","Djibouti","Dominica","Dominican Republic",
        "United States","United States Minor Outlying Islands","Uruguay","Uzbekistan",
        "Vanuatu","Vatican City","Venezuela","Vietnam","Wallis and Futuna","Western Sahara",
        "Yemen","Yugoslavia","Zambia","Zimbabwe"
      };
        }

this how it looks but i cant scroll the list
and the list is overlapped with the appbar:

Tracy320 · December 2018

Could you please post a basic demo so that we can test with it?

DreamCatcher · December 2018

@Tracy320 @jezh
https://github.com/DreamCatcher-SM/Demo

jezh · December 2018

From the demo you post,
There are several questions:
1. to solve the question of the list is overlapped with the appbar, try to delete the outer <LinearLayout></LinearLayout> of <android.support.v4.view.ViewPager> just as follows,

         <android.support.v4.view.ViewPager
         android:layout_width="match_parent"
         android:layout_height="fill_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior"
         android:id="@+id/pagerx"/>

instead of

     <LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent">
       <android.support.v4.view.ViewPager
           android:layout_width="match_parent"
           android:layout_height="fill_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior"
     android:id="@+id/pagerx"/>
    </LinearLayout>

jezh · December 2018

To solve the problem of i cant scroll the list, you can try the following code:

Tab1.cs(add the following code)

    listView.TextFilterEnabled = true;
    listView.Adapter = ListAdapter;
    setListViewHeightBasedOnChildren(listView); // key code

   public void setListViewHeightBasedOnChildren(ListView listView)
{
    try
    {
        ArrayAdapter listAdapter = (ArrayAdapter)listView.Adapter;
        if (listAdapter == null)
        {
            // pre-condition
            return;
        }

        int totalHeight = 0;
        for (int i = 0; i < listAdapter.Count; i++)
        {
            View listItem = listAdapter.GetView(i, null, listView);
            listItem.Measure(0, 0);
            totalHeight += listItem.MeasuredHeight;
        }

        ViewGroup.LayoutParams _params = listView.LayoutParameters;

        _params.Height = totalHeight + (listView.DividerHeight * (listAdapter.Count - 1));
        if (_params.Height < 250)//to have min height
            _params.Height = 250;//to have min height
        listView.LayoutParameters = _params;
        listView.RequestLayout();
    }
    catch (Exception ex)
    {

    }
}

Tab1.axml

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/transparent"
android:fillViewport="true"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:scrollbarAlwaysDrawVerticalTrack="true">

<!-- TODO: Update blank fragment layout -->
<LinearLayout android:descendantFocusability="blocksDescendants"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ListView android:id="@+id/listView"
        android:layout_height="fill_parent"
        android:layout_width ="match_parent"
        android:descendantFocusability="blocksDescendants"
        />
   </LinearLayout>
   </android.support.v4.widget.NestedScrollView>

The whole app is in the attachment. Hope it can help you.

DreamCatcher · December 2018

Dear @jezh
your help is really appreciated
Can you please explain what was the issue ??
and if you could tell where to start learning Xamarin Naitive devoloping?, I am already a Xamarin forms developer for almost two years now and already have developed a couple of apps but I am willing to move to naitve as a lot of functionality can not be done as in naitve. correct me if I am wrong
Regards

Xamarin

How to do AppBarLayout with Collapsing ToolbarLayout that will collapse when ViewPager scroll ?

Best Answers

Answers

Xamarin

Quick Links

How to do AppBarLayout with Collapsing ToolbarLayout that will collapse when ViewPager scroll ?

Best Answers

Answers