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

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.

Best Answers

Answers

  • jezhjezh Member, Xamarin Team Xamurai

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

  • DreamCatcherDreamCatcher Member ✭✭

    @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:

  • Tracy320Tracy320 Member ✭✭

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

  • DreamCatcherDreamCatcher Member ✭✭

    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

Sign In or Register to comment.