Collapsing AppBarLayout not scrolling with TabLayout and NestedScrollView
A

6

5

I have an issue with scrolling Collapsing AppBar, when I am trying to scroll it touching the AppBarLayout part. And also it sometimes scrolling not smoothly.

Here is short (1m 30s) video of issue: https://www.youtube.com/watch?v=n32N9Z4S3SA&feature=youtu.be

Here is link to simple project (only this issue on github): https://github.com/yozhik/Reviews/tree/master/app/src/main/java/com/ylet/sr/review

I'm using: com.android.support:appcompat-v7:27.1.1

There is issue on offsite: https://issuetracker.google.com/issues/37050152

How it is: https://www.youtube.com/watch?v=xWadOVEaTSY&feature=youtu.be

How it should be: https://www.youtube.com/watch?v=J8ITp6RusZo&feature=youtu.be

Does anybody know how to fix this issue you saw on video? I created absolutely simple layouts to avoid any side effects, but bug still reproduced. Thanks in advance.

Description:

CollapsingActivity - activity with Collapsing AppBarLayout. Which loads one or two fragments into "fragment_content_holder" and it has TabLayout to switch between fragments in view pager.

In activity method onCreate() - I'm just simulating request to server (loadData), and when some fake data is loaded - I am showing fragments in view pager, on first call - I am creating new TabMenuAdapter extends FragmentPagerAdapter, populate it with fragments and save links to instances. On the next call - I don't create fragments from scratch and just populate them with fresh data.

MenuFragment1, MenuFragment1 - two fragments. MenuFragment1 - has method public void setupData(SomeCustomData data), to set new data, not recreating fragment on network reconnect.

NetworkStateReceiver - listens to network change and send notifications.

TabMenuAdapter - just simple class to hold fragments.

Next is just copy/paste of code:

public class CollapsingActivity extends AppCompatActivity implements ChangeNetworkNotification {
    private static int dataReloadIteration = 0;
    private SomeCustomData dummyDataFromServer;

    @BindView(R.id.root_layout)
    CoordinatorLayout root_layout;

    @BindView(R.id.app_bar_layout)
    AppBarLayout app_bar_layout;

    @BindView(R.id.collapsing_toolbar_layout)
    CollapsingToolbarLayout collapsing_toolbar_layout;

    @BindView(R.id.view_pager_layout)
    ViewPager viewPager;

    @BindView(R.id.tab_layout)
    TabLayout tabLayout;

    @BindView(R.id.collapsing_data_1_txt)
    TextView collapsing_data_1_txt;

    private NetworkStateReceiver networkStateReceiver;
    private boolean isConnected;

    protected Fragment currentFragment;
    protected Fragment previousFragment;
    protected FragmentManager fragmentManager;

    private boolean dataLoading = false;
    private boolean isCreated = false;

    private MenuFragment1 menu1Fragment1;
    private MenuFragment2 menu1Fragment2;
    private TabMenuAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d("TEST", "CollapsingActivity.onCreate");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing);
        ButterKnife.bind(this);

        fragmentManager = getSupportFragmentManager();

        networkStateReceiver = new NetworkStateReceiver();
        networkStateReceiver.setNetworkReceiver(this);

        IntentFilter intentFilterForNetwork = new IntentFilter("android.net.conn.CONNECTIVITY_CHANGE");
        registerReceiver(networkStateReceiver, intentFilterForNetwork);

        initToolbar();
        loadData();
    }

    @Override
    protected void onStart() {
        Log.d("TEST", "CollapsingActivity.onStart");
        super.onStart();
        IntentFilter intentFilterForNetwork = new IntentFilter("android.net.conn.CONNECTIVITY_CHANGE");
        registerReceiver(networkStateReceiver, intentFilterForNetwork);
    }

    private void initToolbar() {
        Log.d("TEST", "CollapsingActivity.initToolbar");
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_layout);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    private void loadData() {
        Log.d("TEST", "CollapsingActivity.loadData");
        dataLoading = true;
        Thread t = new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(CollapsingActivity.this, "Data loaded.", Toast.LENGTH_SHORT).show();
                        Log.d("TEST", "CollapsingActivity.Data loaded.");
                        dataReloadIteration++;
                        dummyDataFromServer = getDummyObjectFromServer();

                        collapsing_data_1_txt.setText(dummyDataFromServer.Name); //Set data from server in collapsing part of Activity

                        boolean showOneView = false;
                        if (showOneView) {
                            initSingleView();
                        } else {
                            if (!isCreated) {
                                initTabView();
                            } else {
                                menu1Fragment1.setupData(dummyDataFromServer);  //Set the data from server to fragment, not reloading it, just updating data
                            }
                        }
                        dataLoading = false;
                    }
                });
            }
        });
        t.start();
    }

    private SomeCustomData getDummyObjectFromServer() {
        SomeCustomData dto = new SomeCustomData();
        dto.Age = dataReloadIteration;
        dto.Name = "Name " + dataReloadIteration;
        return dto;
    }

    private void initSingleView() {
        Log.d("TEST", "CollapsingActivity.initSingleView");
        tabLayout.setVisibility(View.GONE);
        viewPager.setVisibility(View.GONE);
        showFragmentWithoutBackStack(R.id.fragment_content_holder, new MenuFragment1());
    }

    private void initTabView() {
        if (!isCreated) {
            Log.d("TEST", "CollapsingActivity.initTabView");
            tabLayout.setVisibility(View.VISIBLE);
            viewPager.setVisibility(View.VISIBLE);

            setupViewPager(viewPager);
            tabLayout.setupWithViewPager(viewPager);
            isCreated = true;
        }
    }

    private void setupViewPager(ViewPager viewPager) {
        Log.d("TEST", "CollapsingActivity.setupViewPager");
        menu1Fragment1 = MenuFragment1.newInstance(dummyDataFromServer);
        menu1Fragment2 = MenuFragment2.newInstance();

        adapter = new TabMenuAdapter(getSupportFragmentManager());
        adapter.addFragment(menu1Fragment1, "Menu 1");
        adapter.addFragment(menu1Fragment2, "Menu 2");
        viewPager.setAdapter(adapter);
    }

    @Override
    protected void onDestroy() {
        Log.d("TEST", "CollapsingActivity.onDestroy");
        super.onDestroy();
        unregisterReceiver(networkStateReceiver);
    }

    @Override
    public void networkStateIsChanged(boolean isConnected) {
        this.isConnected = isConnected;
        Log.d("TEST", "CollapsingActivity.networkStateIsChanged.isConnected: " + isConnected);
        if (isConnected) {
            Toast.makeText(CollapsingActivity.this, "Connection received.", Toast.LENGTH_SHORT).show();
            if (!dataLoading) {
                loadData();
            }
        } else {
            Toast.makeText(CollapsingActivity.this, "Connection lost.", Toast.LENGTH_SHORT).show();
        }
    }

    protected void showFragmentWithoutBackStack(int containerViewId, Fragment fragment) {
        Log.d("TEST", "CollapsingActivity.showFragmentWithoutBackStack");
        previousFragment = currentFragment;
        currentFragment = fragment;
        String fragmentTag = fragment.getClass().getSimpleName();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
        if (previousFragment != null) {
            fragmentTransaction.remove(previousFragment);
        }
        fragmentTransaction.add(containerViewId, fragment, fragmentTag)
                .commitNowAllowingStateLoss();
    }
}

activity's layout:

<?xml version="1.0" encoding="utf-8"?>
<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/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="false"
        android:background="@color/white"
        android:stateListAnimator="@drawable/appbar_shadow"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/green"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title=""
            app:titleEnabled="false">

            <include
                layout="@layout/appbar_collapsing_part"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|exitUntilCollapsed" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/green"
                android:stateListAnimator="@drawable/appbar_shadow"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:theme="@style/ToolbarMenuItemsBackGroundTheme">

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

                    <TextView
                        android:id="@+id/title_txt"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_alignParentStart="true"
                        android:layout_toStartOf="@+id/star_img"
                        android:ellipsize="end"
                        android:fontFamily="sans-serif-medium"
                        android:gravity="center_vertical"
                        android:maxLines="1"
                        android:textColor="@color/colorPrimaryDark"
                        android:textSize="19sp" />

                    <ImageView
                        android:id="@+id/star_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:layout_marginEnd="24dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_favorite_filled" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="#45b0b2"
            android:visibility="gone"
            app:tabBackground="@drawable/backgr_blue_transparent_selector"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/colorPrimaryDark"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="500dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextAppearance="@style/CustomTabLayout"
            app:tabTextColor="@color/green" />

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


    <FrameLayout
        android:id="@+id/fragment_content_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/blue"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

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

Fragment 1:

public class MenuFragment1 extends Fragment {

    public SomeCustomData transferedDataFromActivity;
    private TextView data_1_txt;

    public static MenuFragment1 newInstance(SomeCustomData data) {
        Log.d("TEST", "MenuFragment1.newInstance");
        MenuFragment1 fragment = new MenuFragment1();

        Bundle args = new Bundle();
        args.putSerializable("DATA_FROM_ACTIVITY", data);
        fragment.setArguments(args);

        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("TEST", "MenuFragment1.onCreate");

        if (getArguments() != null) {
            this.transferedDataFromActivity = (SomeCustomData) getArguments().getSerializable("DATA_FROM_ACTIVITY");
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.d("TEST", "MenuFragment1.onCreateView");
        View v = inflater.inflate(R.layout.menu_fragment_1, container, false);
        data_1_txt = (TextView) v.findViewById(R.id.data_1_txt);

        setupInOnCreateView();

        return v;
    }

    protected void setupInOnCreateView() {
        Log.d("TEST", "MenuFragment1.setupInOnCreateView");
        //initialization of all view elements of layout with data is happens here.
        setupData(transferedDataFromActivity);
    }

    public void setupData(SomeCustomData data) {
        Log.d("TEST", "MenuFragment1.setupData");
        this.transferedDataFromActivity = data;
        if (transferedDataFromActivity != null) {
            data_1_txt.setText(transferedDataFromActivity.Name);
        }
    }
}

Fragment 1 layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green"
    android:orientation="vertical">

    <TextView
        android:id="@+id/data_1_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/yellow"
        android:text="Test"
        android:textSize="20sp" />

    <include layout="@layout/description_layout" />

</LinearLayout>

Fragment 2:

public class MenuFragment2 extends Fragment {

    public static MenuFragment2 newInstance() {
        Log.d("TEST", "MenuFragment2.newInstance");
        MenuFragment2 fragment = new MenuFragment2();
        return fragment;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.d("TEST", "MenuFragment2.onCreateView");
        View v = inflater.inflate(R.layout.menu_fragment_2, container, false);

        setupInOnCreateView();

        return v;
    }

    protected void setupInOnCreateView() {
        Log.d("TEST", "MenuFragment2.setupInOnCreateView");
        //initialization of all view elements of layout with data is happens here.
    }
}

Fragment 2 layout:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/comments_scrollable_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/yellow" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/blue" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/yellow" />

    </LinearLayout>


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

TabMenuAdapter:

public class TabMenuAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragments = new ArrayList<>();
    private final List<String> mFragmentTitles = new ArrayList<>();

    public TabMenuAdapter(FragmentManager fm) {
        super(fm);
    }

    public void addFragment(Fragment fragment, String title) {
        mFragments.add(fragment);
        mFragmentTitles.add(title);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }

}
Annikaanniken answered 26/4, 2018 at 13:6 Comment(8)
are you able to fix this issue ?Inspissate
have you tried using app:layout_scrollFlags="scroll|enterAlways" instead?Preston
@RishabhJain I have tried all layout_scrollFlags - still don't work and bug is reproduced.Annikaanniken
@RaguSwaminathan Currently all answers are wrong and I still have not fixed it. You have the same issue?Annikaanniken
nope, if i'm correct.. all you want is hide toolbar on scroll up and show it again on scroll down.. as like in play store @AnnikaannikenInspissate
@RaguSwaminathan Yes, I want it to behave the same way as in playstore - without a bug of stuck when scrolling.Annikaanniken
ok let me try and get back to youInspissate
check my answer. If you need, i'll share the demo code. @AnnikaannikenInspissate
D
2

Try this

Activity layout

    <android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title=""
            app:titleEnabled="false">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:scaleType="fitXY"
                android:src="@drawable/abc"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_anchor="@id/appBar"
            app:tabGravity="fill"
            app:tabTextColor="#FFFFFF"
            app:tabSelectedTextColor="#ff00"
            app:tabMode="scrollable"
            app:layout_anchorGravity="bottom" />

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

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

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

Activity code

public class MainActivity extends AppCompatActivity {


    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);


    }
    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new BlankFragment(), "TAB-ONE");
        adapter.addFragment(new BlankFragment(), "TAB-TWO");
        adapter.addFragment(new BlankFragment(), "TAB-THREE");
        viewPager.setAdapter(adapter);
    }




}

Fragment Code

public class BlankFragment extends Fragment {


    public BlankFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment



        return inflater.inflate(R.layout.fragment_blank, container, false);
    }

}

Fragment Layout

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView 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">


    <LinearLayout
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".BlankFragment">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_margin="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/kid_goku" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_margin="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/kid_goku" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_margin="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/kid_goku" />

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

ViewPagerAdapter code

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

}

You can see the video here CollapsingToolbarLayout WITH TabLayout

You download the complete project from here CollapsingToolbarLayout WITH TabLayout

Defalcate answered 5/5, 2018 at 6:37 Comment(8)
Thank you for your work, but your code also have this bug, please take a look on video: youtube.com/watch?v=Dpa_rZencPAAnnikaanniken
@Annikaanniken ok i will update my answer as soon as possibleDefalcate
Nilesh, I tried to download source code from the link - and bug is still reproduced. Where did you do the changes?Annikaanniken
@Annikaanniken in layout and i have not faced the issue my friend with above codeDefalcate
Nilesh, can you please upload source code in different link to download - I will try again and will try to reproduce bug.Annikaanniken
no, I did a workaround for it - when user switch between tabs - I am doing appBarLayout.setExpanded(false, true) - and it is collapsing it's collapsing content with slow animation and user see the actual content, it looks quite nice. But the real problem is not solved yet. I created the bug for google team, they have assigned it, hope they will solve this: issuetracker.google.com/issues/78686882Annikaanniken
@Annikaanniken you can answer you this question so it can help other in futureDefalcate
posted, thanks for your answer anyway - appreciate your time and effort!Annikaanniken
X
1

Try the below layout foryour activity

  <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="false"
        android:background="@color/white"
        android:stateListAnimator="@drawable/appbar_shadow"
        android:theme="@style/AppTheme.AppBarOverlay"
        tools:targetApi="lollipop">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/green"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title=""
            app:titleEnabled="false">

            <include
                layout="@layout/appbar_collapsing_part"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|exitUntilCollapsed" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/green"
                android:stateListAnimator="@drawable/appbar_shadow"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:theme="@style/ToolbarMenuItemsBackGroundTheme"
                tools:targetApi="lollipop">

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

                    <TextView
                        android:id="@+id/title_txt"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_alignParentStart="true"
                        android:layout_toStartOf="@+id/star_img"
                        android:ellipsize="end"
                        android:fontFamily="sans-serif-medium"
                        android:gravity="center_vertical"
                        android:maxLines="1"
                        android:textColor="@color/colorPrimaryDark"
                        android:textSize="19sp" />

                    <ImageView
                        android:id="@+id/star_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:layout_marginEnd="24dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_favorite_filled" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>



        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="#45b0b2"
            android:visibility="gone"
            app:tabBackground="@drawable/backgr_blue_transparent_selector"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/colorPrimaryDark"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="500dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextAppearance="@style/CustomTabLayout"
            app:tabTextColor="@color/green" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <FrameLayout
        android:id="@+id/fragment_content_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Xenocryst answered 2/5, 2018 at 13:18 Comment(1)
Thanks, but it's also not working. The result is next: bug is still reproduced, but with all that TabLayout is not visible and collapsed with ToolBar.Annikaanniken
P
1

Try scrolling to top in the fragment in the view pager by calling scrollView.fullScroll(View.FOCUS_UP) whenever you click on a tab. If your fragment inside the viewpager is scrolled up then your scrolling should work correctly.

Phrensy answered 4/5, 2018 at 1:6 Comment(0)
I
1

You have done it almost correctly. But need some minor tweaks and modifications.

Step 1 : Set some height to your appBar. Say 224dp.

Step 2 : Set match_parent property to CollapsingToolbarLayout height.

Step 3 : Set following scroll flags to the CollapsingToolbarLayout

`app:layout_scrollFlags = "scroll|enterAlways|enterAlwaysCollapsed"`

Step 4 : Set the toolbar collapsemode to none

Check if it works fine. Let me know.

Inspissate answered 10/5, 2018 at 11:6 Comment(1)
i tried a demo, it is working as like in play store. let me know how you implementedInspissate
A
0

I have spend a lot of time investigating my issue with AppBar + Collapsing Layouts. And what I did find out is that it's a bug in google support library. So I created the issue for google and they assigned it to one of developers: https://issuetracker.google.com/issues/78686882

But to solve this issue right now I made a workaround - if users will get stuck with scrolling on collapsing part of the layout - they will probably try to click on one of tabs in my TabLayout. So I added code to auto collapse with animation collapsing part of layout: appBarLayout.setExpanded(false, true);

Here is the code:

tabLayout.addOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPagerLayout) {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                appBarLayout.setExpanded(false, true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //no ui effects
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
        appBarLayout.setExpanded(false, true);

            }
        });
Annikaanniken answered 15/5, 2018 at 7:50 Comment(0)
S
0

To solve this issue, there is a workaround to do on the AppBarLayout :

class CustomAppBarLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppBarLayout(context, attrs, defStyleAttr) {

    override fun getBehavior(): CoordinatorLayout.Behavior<AppBarLayout> {
        return Behavior().also {
            it.setDragCallback(object : Behavior.DragCallback() {
                override fun canDrag(appBarLayout: AppBarLayout) = true
            })
        }
    }
}

Found here : https://github.com/material-components/material-components-android/issues/1878

Sadie answered 28/7, 2022 at 14:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.