Does tabview in Android use Fragments?

Question

I had a general question on Android. For example if I am using tabs in Android -> is that handled with Fragments. Similarly if I was to use a Navigation Drawer is that a fragement as well ? I think i quite did not get the concept of Fragments there.

For example I was to build the following screen:

What would the xml template include everything. From my guess it would have a tab view and then a list view and a fab button. So in this case would I use a fragment ?

Answer 1

To build this kind of layout, you must use CoordinatorLayout as parent layout and you should use AppBarLayout with CollapsingToolbarLayout.

Then use TabLayout where you have to show these tabs in bottom of screen use ViewPager

Or you can use simple FrameLayout where you can add fragments on tap of each tab.

<?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/main_content"
        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="260dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorAccent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!-- Your Header layout goes Here -->

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="?attr/colorAccent"
                    android:gravity="center"
                    android:minHeight="160dp"
                    android:orientation="vertical"
                    app:layout_collapseMode="parallax">

                    <!-- Content inside your header layout just like image ot other info -->

                </LinearLayout>

                <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:local="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:minHeight="?attr/actionBarSize"
                    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:layout_collapseMode="pin"/>

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

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

        <!-- Your Tablayout goes here-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorAccent"
            app:tabGravity="fill"
            app:tabIndicatorColor="#5be5ad"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed" />
        <!-- Your Viewpager goes here-->
        <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" />

     <!-- your FAB goes here-->
      <android.support.design.widget.FloatingActionButton
          android:id="@+id/fab"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="bottom|end"
          app:elevation="6dp"
          app:backgroundTint="@color/colorAccent"
          app:pressedTranslationZ="12dp"
          android:layout_margin="@dimen/fab_margin"
          android:src="@drawable/ic_add" />

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

Hope it will help you.