As its name implies, the power of this layout is the ability to coordinate dependencies between child views.All we need to do is to wrap views inside Coordinator Layout.
The Coordinator Layout is one of the new powerful layouts introduced in the new design support library.
This new layout is based on a set of rules defined in Behaviors, we can define how views inside the Coordinator Layout relate each other and what can be expected when one of them changes.
Coordinator Layout extends the features of Frame Layout. It is intended for two primary use cases:
As a top-level application decor.
As a container for a specific interaction with one or more child views.
Coordinator Layout can wrap multiple children in it. We are looking on some most useful child as stated below:
There is a skeleton of the Coordinator Layout with its child. Firstly, We will have a look on each child with code. So let us start-
|
1 2 3 4 |
<CoordinatorLayout> <AppbarLayout/> <NestedScrollView/> </CoordinatorLayout> |
There are two children in Coordinator Layout:
1. AppbarLayout
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:
|
1 |
app:layout_scrollFlags |
This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different View Group, most of its functionality will not work.
|
1 2 3 |
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent"> |
If we scroll the listview automatically toolbar gets hidden. This can be achieved using the Android AppBarLayout, Use this layout to hide the action bar or appear when the sibling view is scrolled.
This feature is newly introduced from Lollipop onwards, however through design support library we can add this feature to Android 2.1 or above devices.
2. NestedScrollView
NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
Android support v4 library has a class called NestedScrollView and it does exactly what the name suggests. It can be used as both parent or child ScrollView.
On the other hand, if we try to add two scrollView as in code given below. It will not work.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </android.support.v4.widget.NestedScrollView> </LinearLayout> </ScrollView> |
Most of the time you probably do not need two ScrollViews on the same screen, but if you ever need it NestedScrollView is a great way. This class has a set of useful methods so you can disable nested scrolling, check if your nested scroll view has nested scrolling parent and many more.
Coordinator Layout Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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: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="300dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true" > <android.support.v7.widget.Toolbar android:id="@+id/main.toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello World" /> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> |
Be the first to comment.