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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 193
    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

    1. <android.support.design.widget.CoordinatorLayout
    2. xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent"
    6. android:background="@android:color/background_light"
    7. android:fitsSystemWindows="true"
    8. >
    9.  
    10. <android.support.design.widget.AppBarLayout
    11. android:id="@+id/main.appbar"
    12. android:layout_width="match_parent"
    13. android:layout_height="300dp"
    14. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    15. android:fitsSystemWindows="true"
    16. >
    17.  
    18. <android.support.design.widget.CollapsingToolbarLayout
    19. android:id="@+id/main.collapsing"
    20. android:layout_width="match_parent"
    21. android:layout_height="match_parent"
    22. app:layout_scrollFlags="scroll|exitUntilCollapsed"
    23. android:fitsSystemWindows="true"
    24. app:contentScrim="?attr/colorPrimary"
    25. app:expandedTitleMarginStart="48dp"
    26. app:expandedTitleMarginEnd="64dp"
    27. >
    28.  
    29. <ImageView
    30. android:id="@+id/main.backdrop"
    31. android:layout_width="match_parent"
    32. android:layout_height="match_parent"
    33. android:scaleType="centerCrop"
    34. android:fitsSystemWindows="true"
    35. android:src="@drawable/material_flat"
    36. app:layout_collapseMode="parallax"
    37. />
    38.  
    39. <android.support.v7.widget.Toolbar
    40. android:id="@+id/main.toolbar"
    41. android:layout_width="match_parent"
    42. android:layout_height="?attr/actionBarSize"
    43. app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    44. app:layout_collapseMode="pin"
    45. />
    46. </android.support.design.widget.CollapsingToolbarLayout>
    47. </android.support.design.widget.AppBarLayout>
    48.  
    49. <android.support.v4.widget.NestedScrollView
    50. android:layout_width="match_parent"
    51. android:layout_height="match_parent"
    52. app:layout_behavior="@string/appbar_scrolling_view_behavior"
    53. >
    54.  
    55. <TextView
    56. android:layout_width="match_parent"
    57. android:layout_height="wrap_content"
    58. android:textSize="20sp"
    59. android:lineSpacingExtra="8dp"
    60. android:text="@string/lorem"
    61. android:padding="@dimen/activity_horizontal_margin"
    62. />
    63. </android.support.v4.widget.NestedScrollView>
    64.  
    65. <android.support.design.widget.FloatingActionButton
    66. android:layout_height="wrap_content"
    67. android:layout_width="wrap_content"
    68. android:layout_margin="@dimen/activity_horizontal_margin"
    69. android:src="@drawable/ic_comment_24dp"
    70. app:layout_anchor="@id/main.appbar"
    71. app:layout_anchorGravity="bottom|right|end"
    72. />
    73. </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
Reset Password
Fill out the form below and reset your password: