Geek Answers Handbook

How to use Android AppBarLayout, Toolbar and TabLayout with fragments

I have activity with NavigationDrawer and AppBarLayout using a toolbar. Unfortunately, when I use TabLayout in a child fragment, I see a shadow between the toolbar and TabLayout. Is it possible to display a shadow below a TabLayout? I do not want to move TabLayout into my activity, because I use it only in one fragment.

I see several solutions for this problem:

  • disable height on toolbar and TabLaout (don't like it)
  • remove toolbar from action and move it to fragment

Do you have any idea how to use it correctly in my script?

Wrong shadow

+5
source share
2 answers

I had the same problem and is easy to fix. Just remove the AppBarLayout from the action and put it in the snippet. By doing this, you keep the toolbar in activity and TabLayout with a shadow in the fragment.

Activity:

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical" tools:context=".MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> <FrameLayout android:id="@+id/main_activity_container" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> </LinearLayout>

Fragment:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </LinearLayout>

Hope this helps!

+2
source

I came across the same question. In my activity I use AppBarLayout with a toolbar and in one of my fragments, I also use AppBarLayout with TabLayout. However, on all other fragments displayed in this operation, I do not. So I want the height to be 0 on the fragment using TabLayout.

I set the height setting manually every time I switch fragments:

 private void showAccount(){ AccountFragment accountFragment = AccountFragment.newInstance(mUser); FragmentManager fragmentManager = getSupportFragmentManager(); fragmentManager.beginTransaction() .replace(R.id.content_main, accountFragment) .commit(); elevateActionBar(false); } private void showSettings(){ SettingsFragment settingsFragment = new SettingsFragment(); FragmentManager fragmentManager = getSupportFragmentManager(); fragmentManager.beginTransaction() .replace(R.id.content_main, settingsFragment) .commit(); elevateActionBar(true); } private void elevateActionBar(boolean elevate){ //Elevate ActionBar (make ActionBar have a shadow) AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout_main); if(elevate) { appBarLayout.setElevation(4); }else{ appBarLayout.setElevation(0); } }
0
source

More articles:


All Articles