about 9 years ago
Coordinator Layout one of the finest example of the design and intelligence goolge has introduced yet .
This new layout is all about set of rules defined in Behaviors, we can define the views inside Coordinator Layout that how they relate to each other and what can be expected when one of them changes.
a simplest example of the co coordinator layout will be
- <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:background="@android:color/background_light"
- android:fitsSystemWindows="true"
- >
- <android.support.design.widget.AppBarLayout
- android:id="@+id/main.appbar"
- android:layout_width="match_parent"
- android:layout_height="300dp"
- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
- android:fitsSystemWindows="true"
- >
- <android.support.design.widget.CollapsingToolbarLayout
- android:id="@+id/main.collapsing"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- app:layout_scrollFlags="scroll|exitUntilCollapsed"
- android:fitsSystemWindows="true"
- app:contentScrim="?attr/colorPrimary"
- app:expandedTitleMarginStart="48dp"
- app:expandedTitleMarginEnd="64dp"
- >
- <ImageView
- android:id="@+id/main.backdrop"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:scaleType="centerCrop"
- android:fitsSystemWindows="true"
- android:src="@drawable/material_flat"
- app:layout_collapseMode="parallax"
- />
- <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.CollapsingToolbarLayout>
- </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:textSize="20sp"
- android:lineSpacingExtra="8dp"
- android:text="@string/lorem"
- android:padding="@dimen/activity_horizontal_margin"
- />
- </android.support.v4.widget.NestedScrollView>
- <android.support.design.widget.FloatingActionButton
- android:layout_height="wrap_content"
- android:layout_width="wrap_content"
- android:layout_margin="@dimen/activity_horizontal_margin"
- android:src="@drawable/ic_comment_24dp"
- app:layout_anchor="@id/main.appbar"
- app:layout_anchorGravity="bottom|right|end"
- />
- </android.support.design.widget.CoordinatorLayout>
<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:background="@android:color/background_light" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:id="@+id/main.appbar" android:layout_width="match_parent" android:layout_height="300dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp" > <ImageView android:id="@+id/main.backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" android:src="@drawable/material_flat" app:layout_collapseMode="parallax" /> <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.CollapsingToolbarLayout> </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:textSize="20sp" android:lineSpacingExtra="8dp" android:text="@string/lorem" android:padding="@dimen/activity_horizontal_margin" /> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_margin="@dimen/activity_horizontal_margin" android:src="@drawable/ic_comment_24dp" app:layout_anchor="@id/main.appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>
Consider the skeleton of that layout. The CoordinatorLayout has only three childs: an AppbarLayout, an scrolleable view and an anchored FloatingActionBar
As the name suggest all the views co ordinate with each other.
0 Comment(s)