Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CoordinatorLayout

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 173
    Comment on it

    Coordinator Layout

    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>
    

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: