Adding a ViewPager inside a NavigationDrawer

Question

I'm developing an Android app from "Navigation Drawer Activity" Template.

In this template, each click on a navigation menu item opens a Fragment.

The first fragment is a simple fragment with TextView. The second fragment is a fragment that contains a TabLayout and a ViewPager to navigate to other fragments.

My only problem is that since the TabLayout and the ViewPager are created in the layout's fragment, so not at the same time as the actionBar, I have a shadow between the actionBar and the TabLayout. The selected fragment indicator is also a bit strange.

MainActivity layout:

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.BodetTag.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/Theme.BodetTag.PopupOverlay">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            tools:ignore="UseCompoundDrawables">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/bodet_icon_mini"
                android:contentDescription="@string/bodet_icon" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:minHeight="?actionBarSize"
                android:padding="@dimen/appbar_padding"
                android:text="@string/app_name"
                android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

</com.google.android.material.appbar.AppBarLayout>

Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ui.tag.TagFragment">

    <TextView
        android:id="@+id/text_tag"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:paddingTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

I have partially found the answers to my problems.

First of all, the TabLayout was too high. So I simply deleted the following line in the TabLayout layout:

android:minHeight="?attr/actionBarSize"

Then, to remove the shadow between the actionBar and the tabLayout, several solutions are possible:

• Add the following line in the AppBarLayout (This will remove the shadow for all fragments of the application):

  app:elevation="0dp"
  

• Add the following line in the fragment that contains the TabLayout:

  (activity as AppCompatActivity).supportActionBar!!.elevation = 0f
  

For the moment, only the first method works but the second method is more accurate.