Fix bottom bar in CoordinatorLayout

匿名 (未验证) 提交于 2019-12-03 02:45:02

问题:

I have a CoordinatorLayout which contains AppBarLayout and a FrameLayout which contains fragments.

One of this fragment contains a TabLayout at Top, one List trough RecyclerView and at the Bottom one "homemade" toolbar.

The AppBarLayout is configured with app:layout_scrollFlags="scroll|enterAlways"

My problem is that both "toolbars" are hiding when scroll, the AppBarLayout and my "homemade" toolbar at the bottom. This is the current behaviour

I would like to fix the bottom "homemade" toolbar to keep visible but I can't achieve it.

This is the XML of the fragment Layout

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="match_parent"     android:orientation="vertical"     >     <android.support.design.widget.TabLayout         android:id="@+id/toolbarfilter"         android:layout_width="match_parent"         android:background="@color/azul_asde"         app:tabMode="fixed"         app:tabMaxWidth="0dp"         android:elevation="4dp"         app:tabIndicatorColor="@color/verde_pastel"         android:layout_height="wrap_content"         />      <android.support.v4.widget.SwipeRefreshLayout         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/swipeContainer"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">      <android.support.v7.widget.RecyclerView     android:id="@+id/list"     android:layout_width="match_parent"     android:layout_height="match_parent"/>     </android.support.v4.widget.SwipeRefreshLayout>          <LinearLayout         android:id="@+id/toolbarselection"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:paddingTop="10dp"         android:paddingBottom="10dp"         android:background="@color/azul_asde"         android:elevation="4dp"         android:visibility="visible"         >         <ImageView             android:id="@+id/delete"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_delete_white_24dp"             android:tint="@color/gris_desactivado" />         <ImageView             android:id="@+id/select"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_bookmark_border_white_24dp"/>          <ImageView             android:id="@+id/send"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_send_white_24dp"             android:tint="@color/gris_desactivado" />      </LinearLayout>  </LinearLayout> 

EDIT1: THIS questions seems to be the same problem.

回答1:

Try this 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"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:id="@+id/container">      <ScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/bottom_navigation"         android:layout_alignParentTop="true">          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical">         <android.support.v7.widget.CardView             xmlns:card_view="http://schemas.android.com/apk/res-auto"             android:id="@+id/card_view"             android:layout_width="match_parent"             android:layout_margin="10dp"             android:layout_height="110dp"             android:padding="15dp"             card_view:cardElevation="2dp"             card_view:cardCornerRadius="4dp">              <TextView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:text="Test" />          </android.support.v7.widget.CardView>           <android.support.v7.widget.CardView             xmlns:card_view="http://schemas.android.com/apk/res-auto"             android:id="@+id/card_view1"             android:layout_width="match_parent"             android:layout_margin="10dp"             android:layout_height="110dp"             android:padding="15dp"             card_view:cardElevation="2dp"             card_view:cardCornerRadius="4dp">              <TextView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:text="Test" />          </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view3"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view4"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view5"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>         </LinearLayout>     </ScrollView>       <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_gravity="bottom"         android:gravity="bottom">          <android.support.design.widget.BottomNavigationView             android:layout_width="match_parent"             android:layout_height="56dp"             android:layout_weight="1"             android:foregroundGravity="bottom"             android:background="@color/green"             app:itemIconTint="@color/white"             app:itemTextColor="@color/white"             android:id="@+id/bottomnav"             app:menu="@menu/main">           </android.support.design.widget.BottomNavigationView>      </RelativeLayout>    </android.support.design.widget.CoordinatorLayout> 


回答2:

try this

    <?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/container"     android:layout_width="match_parent"     android:layout_height="match_parent">      <ScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/bottom_navigation"         android:layout_alignParentTop="true">          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical">              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/red"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 android:layout_width="match_parent"                 android:layout_height="50dp"                 android:padding="15dp"                 app:cardBackgroundColor="@color/colorPrimary"                 app:cardCornerRadius="4dp"                 app:cardElevation="2dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:gravity="center"                     android:text="Nilesh Rathod"                     android:textColor="#ffFFff" />             </android.support.v7.widget.CardView>         </LinearLayout>     </ScrollView>      <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_gravity="bottom"         android:gravity="bottom">          <android.support.design.widget.BottomNavigationView             android:id="@+id/bottomnav"             android:layout_width="match_parent"             android:layout_height="56dp"             android:layout_weight="1"             android:background="@color/green"             android:foregroundGravity="bottom"             app:itemIconTint="@color/lightWhite"             app:itemTextColor="@color/lightWhite"             app:menu="@menu/menu"/>     </RelativeLayout> </android.support.design.widget.CoordinatorLayout> 

Result



回答3:

This behavior basically removes scroll flag SCROLL from AppBarLayout, when scrolling content in dependent view (RecyclerView, NestedScrollView) is less than view height, ie. when scrolling is not needed. It also overrides offsetting scrolling view, which is normally done by AppBarLayout.ScrollingViewBehavior. Works well when adding footer, ie. button, to scrolling view or in ViewPager, where content length may be different in each page.

https://gist.github.com/MaciejKaras/02bff315f00b87d80467a470424f22c3

Answered already in https://stackoverflow.com/a/37293634



回答4:

To fix Bottom bar, firstly you have to use a Activity where tabs present. In that activity use different fragments. Add your tabLayout in this activity_main_tab.xml

activity_main_tab.xml

 <?xml version="1.0" encoding="utf-8"?>     <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:tools="http://schemas.android.com/tools"         xmlns:local="http://schemas.android.com/apk/res-auto"         android:id="@+id/co_activity_root_layout"         android:layout_width="match_parent"         android:layout_height="match_parent">         <RelativeLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_alignParentTop="true">              <android.support.design.widget.AppBarLayout                 local:theme="@style/Theme.AppBarOverlay"                 android:id="@+id/toolbar_layout"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_alignParentTop="true">              </android.support.design.widget.AppBarLayout>              <RelativeLayout                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:layout_below="@+id/toolbar_layout">                  <FrameLayout                     android:id="@+id/fl_fragment_container"                     android:layout_width="match_parent"                     android:layout_height="match_parent"                    />             </RelativeLayout>         </RelativeLayout>      </android.support.design.widget.CoordinatorLayout> 

For fragment view use

fragment_tab.xml

here use app:layout_scrollFlags="scroll|enterAlways" in toolbar to make it scrollable

 <?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/coordinator"         android:layout_width="match_parent"         android:layout_height="match_parent">          <android.support.design.widget.AppBarLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:theme="@style/ThemeOverlay.AppCompat.Dark">              <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 android:background="?attr/colorPrimary"                 app:layout_scrollFlags="scroll|enterAlways"/>              <android.support.design.widget.TabLayout                 android:id="@+id/tablayout"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 app:tabIndicatorColor="@color/white"                 app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"                 android:background="?attr/colorPrimary"                 app:tabGravity="fill"/>          </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> 

FragmentTabs.java

 public class FragmentTabs extends BaseFragment{          private View rootView;         private ViewPager viewPager;         private TabLayout tabLayout;         private Toolbar toolbar;         private ViewPagerAdapter viewPagerAdapter;          @Override         public View onCreateView(LayoutInflater inflater, ViewGroup viewGroupContainer, Bundle savedInstanceState) {             rootViewSearch = inflater.inflate(R.layout.fragment_tab, viewGroupContainer, false);             initializeLayout();             setUpActionBar();             setUpFragmentObjects();              return rootView;         }           private void initializeLayout() {             toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);             viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);             tabLayout = (TabLayout) rootView.findViewById(R.id.tablayout);         }           private void setUpActionBar() {             getApplicationContext().setSupportActionBar(toolbarSearch);             ActionBar actionBar = getApplicationContext().getSupportActionBar();             if(actionBar != null){                 actionBar.setTitle(Constants.BLANK);             }         }           private void setUpFragmentObjects() {             viewPagerAdapter = new ViewPagerAdapter(getApplicationContext(), getChildFragmentManager());             viewPager.setAdapter(searchViewPagerAdapter);             tabLayout.setupWithViewPager(viewPager);         }     } 

ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentPagerAdapter {      public ViewPagerAdapter(Activity activity, FragmentManager fragmentManager) {         super(fragmentManager);     }       @Override     public Fragment getItem(int position) {         Bundle bundle;         switch (position) {             case 0: // For Tab 1                // use fragment for tab 1                 return fragment1;             case 1: // For Tab 2                 // use fragment for tab 2                 return fragment2;             case 2: // For Tab 3                 // use fragment for tab 3                 return fragment3;             default:                 return null;         }     }      @Override     public int getCount() {         return 3; // no. of Tabs     }      @Override     public CharSequence getPageTitle(int position) {         switch (position) {             case 0: // Title For Tab1                 return "Tab1";             case 1: // Title For Tab2                 return "Tab2";             case 2: // Title For Tab3                 return "Tab3";             default:                 return null;         }     } } 


回答5:

You can try and add the collapseMode on yout toolbar something like this.

Your appBarLayout seems fine

I would advise u to look at this link: https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout `

 <android.support.design.widget.CollapsingToolbarLayout         android:id="@+id/collapsing_toolbar"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:background="@android:color/holo_blue_light"         android:fitsSystemWindows="true"         app:expandedTitleMarginEnd="64dp"         app:expandedTitleMarginStart="48dp"         app:layout_scrollFlags="scroll|exitUntilCollapsed">          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             app:layout_collapseMode="pin"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimary"             app:layout_scrollFlags="scroll|enterAlways"/>          <android.support.design.widget.TabLayout             android:id="@+id/tablayout"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:tabIndicatorColor="@color/white"           app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"             android:background="?attr/colorPrimary"             app:tabGravity="fill"/>      </android.support.design.widget.CollapsingToolbarLayout> 


回答6:

I faced same problem Here is the way That worked for me

Remove the AppBarLayout layout_behavior so it fixed on top. Define the FrameLayout layout_behavior as app:layout_behavior="@string/appbar_scrolling_view_behavior" so it adjust FrameLayout below the AppBarLayout. In this way way your content of frame layout will scroll but not toolbar. CoordinatorLayout layout like as follows

<?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:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:context="com.next_tech.teebox.GridView">      <android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="wrap_content">          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimary"             app:titleTextColor="@android:color/white" />      </android.support.design.widget.AppBarLayout> <FrameLayout     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior">   </FrameLayout>   </android.support.design.widget.CoordinatorLayout> 

This is the XML of the your fragment Layout where your recyclerView scroll without affecting your TabLayout and bottom Linear Layout.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="match_parent"     android:orientation="vertical"     >     <android.support.design.widget.TabLayout         android:id="@+id/toolbarfilter"         android:layout_width="match_parent"         android:background="@color/colorPrimary"         app:tabMode="fixed"         app:tabMaxWidth="0dp"         android:elevation="4dp"         app:tabIndicatorColor="@color/btnBackground"         android:layout_height="?android:actionBarSize"         />      <android.support.v4.widget.SwipeRefreshLayout         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/swipeContainer"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">          <android.support.v7.widget.RecyclerView             android:id="@+id/list"             android:layout_width="match_parent"             android:layout_height="match_parent"/>     </android.support.v4.widget.SwipeRefreshLayout>      <LinearLayout         android:id="@+id/toolbarselection"         android:layout_width="match_parent"         android:layout_height="?android:actionBarSize"         android:orientation="horizontal"         android:background="@color/colorPrimary"         android:layout_gravity="bottom"         android:elevation="4dp"         android:visibility="visible"         >         <ImageView             android:id="@+id/delete"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:layout_gravity="center"             app:srcCompat="@android:drawable/ic_menu_delete" />         <ImageView             android:id="@+id/select"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:layout_weight="1"             app:srcCompat="@drawable/white_arrow" />          <ImageView             android:id="@+id/send"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:layout_gravity="center"             app:srcCompat="@drawable/ic_send_holo_dark" />      </LinearLayout>  </LinearLayout> 

I hope it helps someone thanks

for more info - Scrolling Behavior for Appbars in Android



回答7:

I struggled with the same problem for a whole day.
In my case this worked for me.

https://stackoverflow.com/a/35405095/4729203



回答8:

You cannot do this in coordinatorlayout. so use RelativeLayout and within its design your own layout



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!