ZOFTINO.COM

AppBarLayout with CoordinatorLayout

App bar layout is provided as part of design support library. It is a linear vertical layout with extra features that enable development of android applications which follow material design guidelines. To fully utilize the functionality of App bar layout, it should be used as a direct child of coordinator layout.

Coordinator layout provides framework to enable communication between views and inject behavior to view. App bar layout uses this framework, which is why it needs to be used as a direct child of coordinator layout to make all the functionality of it work. To know more about coordinator layout and custom behavior, read coordinator layout and custom behavior article.

Child views of app bar layout scroll based on scrolling events of sibling of app bar layout in coordinator layout. You can control scroll behavior of child views of app bar layout by specifying layout_scrollFlags in layout xml or by calling setScrollFlags method. The communication between scrollable sibling view of coordinator layout and app bar layout can happen if sibling’s layout_behavior is set to use AppBarLayout.ScrollingViewBehavior.

App bar layout with coordinator layout

I am going to show how to use app bar layout with coordinator layout to get the UI experience that app bar layout provides. In below example, App bar layout has tool bar and tab layout as children. App bar layout and nested scroll view are children of coordinator layout.

App bar layout with coordinator layout output

android coordinator layout and app bar layout

App bar layout with coordinator layout code

Activity layout

 

    
        
        

        
            

            

            
        
    
    
        
    

 

Activity

 package com.zoftino.materialdesign;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;

public class AppBarLayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_appbar_layout);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);

        TextView tv =(TextView)findViewById(R.id.coupons_lst);
        tv.setTextSize(25);
        tv.setText(CouponStoreData.arrayOfCoupons.toString());

    }

}
 

Show only tab layout and scroll app bar off screen

If you want to show only tab layout and scroll app bar off screen in response to scroll events of app bar layout and app bar layout siblings, you can just remove the layout_scrollFlags attribute from tab layout definition in xml layout file.

android coordinator layout and app bar layout example