ActionBar vs Toolbar or ActionBar and Toolbar

Question

I have read about the toolbar coming in the AppCompat Library and all its features. Some of the things I have noticed in android developers blog (here) is:

Toolbar is fully supported in AppCompat and has feature and API parity with the framework widget.

They have also mentioned that we can have more control on its looks and appearance.

But, when I add an activity in Android Studio I am getting this:

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

    <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">

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

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

Here Toolbar is inside AppBar. (ActionBar and AppBar is same. Isn't it?) What is the use of that. In some blogs also I read that AppBar can be replaced with design support libraries' toolbar.

Normally you get content_layout after your Toolbar. so we will have below line after toolbar.

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

So, once I had an issue that content is above toolbar (used only toolbar, not inside appbar) hiding the whole toolbar, and still clickable. So I had to move Toolbar below my content in code to get it appeared above my content.

So, what to use? Toolbar? AppBarLayout? Toolbar inside AppBarLayout?

What is the intended use of each one?

UPDATE:

So I have already added Toolbar in the activity_layout file. Then why needed to use setSupportActionBar(toolbar); to set toolbar and adding theme AppTheme.NoActionBar. This a normal behavior with all activities in Android Studio.

What is the use of disabling window action bar with

<item name="windowActionBar">false</item>

and setting it with setSupportActionBar(toolbar) ?

Answer 1

AppBarLayout is a container, where you can place ToolBar, TabLayout, something else maybe. All of it will be shown on top of the screen, no matter what layout you use for the rest of the content. You can use Toolbar without AppBarLayout if you want, but then you'll need to include it in your ViewGroup which you use the rest of the content. And place it on the bottom of it, so it won't get overlayed with something else.

AppBar saves you from that and provides some additional features, for instance, scrolling behavior. It is written here btw.

Also note, that AppBarLayout depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.

Answer 2

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.

This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.

AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior behavior class, meaning that you should set your scrolling view's behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.

You also implement like below as multiple child of AppBarLayout

<android.support.design.widget.CoordinatorLayout
     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.support.v4.widget.NestedScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

     <!-- Your scrolling content -->

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

 <android.support.design.widget.AppBarLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.v7.widget.Toolbar
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>

     <android.support.design.widget.TabLayout
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>

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

Source: AppBarLayout

See also Structure of AppBarLayout