Building Modern Screens using Modern Layouts in Android

A presentation at Google I/O Extended 19, Bhubaneswar of how to build modern screens using modern layouts like constraint layout, motion layout, and other.

Code is uploaded here: https://github.com/samsruti/Simple-Login-Screeen-Using-ConstraintLayout-2.0

Transcript

1. Samsruti Dash (@samsruti) Software Developer P.A.R.I Technologies Malaysia Building Modern Screens using Modern Layouts in Android GDG Bhubaneswar
2. GDG BBSR Layout What’s that all about?
3. GDG BBSR Layout Simple Complex LinearLayout RelativeLayout FrameLayout GridLayout TableLayout
4. GDG BBSR Layout Complex Layout ↓ hard to use or manage Simple Layout ↓ Nesting ↓ Performance issues
5. GDG BBSR Constraint Layout Why ???
6. GDG BBSR Constraint Layout + Constraint Layout 2.0 • Subset of Relative Layout • Flexible to use and maintain • Flat Hierarchy • Unbundled Library • Available from API 9 (which supports 99.9% devices)
7. GDG BBSR View Hierarchy <RelativeLayout> <RelativeLayout> <FrameLayout> <LinearLayout> <LinearLayout> <LinearLayout> <LinearLayout> <FrameLayout> <LinearLayout> <de.hdodenhof.circleimageview.CircleImageView/> </LinearLayout> <ImageView/> </FrameLayout> </LinearLayout> <LinearLayout> <TextView> <TextView> </LinearLayout> </LinearLayout> </LinearLayout> </FrameLayout> <LinearLayout> <com.google.android.material.button.MaterialButton/> </LinearLayout> </RelativeLayout> <LinearLayout> </LinearLayout> </RelativeLayout>
8. GDG BBSR Flat Hierarchy <androidx.constraintlayout.widget.ConstraintLayout> <ImageView> <androidx.appcompat.widget.Toolbar/> <Button/> <de.hdodenhof.circleimageview.CircleImageView/> <ImageView/> <TextView> <TextView/> <TextView/> <TextView/> <TextView/> <View> <TextView/> <View> <TextView/> <View> <TextView/> <View> </androidx.constraintlayout.widget.ConstraintLayout>
9. GDG BBSR Objective
10. GDG BBSR /* Login Screen */ GDG BBSR
11. GDG BBSR Installation in Android Studio 1. Add the following to module-level build.gradle file (project level) repositories { google() jcenter() }
12. GDG BBSR 2. Add the library as a dependency in the same build.gradle(app) file (updated versions) dependencies { ... implementation 'androidx.appcompat:appcompat:1.0.2' implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1' implementation 'com.google.android.material:material:1.1.0-alpha07' }
13. Let’s Build Code: https://github.com/samsruti/Simple-Login-Screeen-Using-ConstraintLayout-2.0
14. Quick Wrap Up
15. GDG BBSR Constraints <ImageView android:id="@+id/logo" ... app:layout_constraintBottom_toTopOf ="@+id/logo_form_barrier" app:layout_constraintEnd_toStartOf = "@+id/right_margin_guideline" app:layout_constraintStart_toStartOf ="@+id/left_margin_guideline" app:layout_constraintTop_toTopOf = "parent" />
16. GDG BBSR Bias Examples app : layout_constraintHorizontal_bias = "0.1" app : layout_constraintHorizontal_bias = "0.9" app : layout_constraintHorizontal_bias = "0.5"
17. GDG BBSR Guidelines • Vertical Orientation • Horizontal Orientation • Reduce multiple margin on views
18. GDG BBSR Chains • Linking multiple views in horizontal or vertical
19. GDG BBSR Introducing Motion Layout
20. GDG BBSR • Supports in ConstraintLayout 2.0 • Animations + Transitions + More Introducing Motion Layout
21. GDG BBSR Sample Example 1. Add a layout (Using Motion Layout) 2. Create a Motion Scene a. Add Transitions b. Add Constraint Set (Start And End) c. You can add path also.
22. GDG BBSR 1. Add a layout (Using Motion Layout) <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http:/ /schemas.android.com/apk/res/android" xmlns:app="http:/ /schemas.android.com/apk/res-auto" xmlns:tools="http:/ /schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene"> <ImageView ../> <TextView .../> <TextView .../> <TextView ... /> </androidx.constraintlayout.motion.widget.MotionLayout>
23. GDG BBSR 2.a. Create a Motion Scene (Add Transitions) <?xml version="1.0" encoding="utf-8"?> <MotionScene …> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:motionInterpolator="linear"> <OnClick motion:clickAction="toggle" motion:targetId="@id/logo" /> </Transition> <ConstraintSet android:id="@+id/start"../> <ConstraintSet android:id="@+id/end"../> </MotionScene>
24. GDG BBSR <?xml version="1.0" encoding="utf-8"?> <MotionScene …> <Transition .../> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> </MotionScene> 2.b. Create a Motion Scene (Add Constraint Set)
25. GDG BBSR <?xml version="1.0" encoding="utf-8"?> <MotionScene …> <Transition .../> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> </MotionScene> 2.b. Create a Motion Scene (Add Constraint Set) <Constraint android:id="@+id/logo" android:layout_width="120dp" android:layout_height="120dp" android:layout_marginStart="56dp" android:layout_marginLeft="56dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" app:layout_constraintBottom_toTopOf="@+id/extended_textView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.401" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" app:srcCompat="@drawable/io_logo" />
26. GDG BBSR <?xml version="1.0" encoding="utf-8"?> <MotionScene …> <Transition .../> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/logo"/> …. …. </ConstraintSet> </MotionScene> 2.b. Create a Motion Scene (Add Constraint Set) <Constraint android:id="@+id/logo" android:layout_width="120dp" android:layout_height="120dp" android:layout_marginStart="56dp" android:layout_marginLeft="56dp" android:layout_marginTop="8dp" app:layout_constraintBottom_toTopOf="@+id/extended_textView" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/footer" app:srcCompat="@drawable/io_logo" />
27. GDG BBSR Let’s run the code
28. GDG BBSR Codelabs • https:/ /codelabs.developers.google.com/codelabs/constraint-layout • https:/ /codelabs.developers.google.com/codelabs/motion-layout • https:/ /codelabs.developers.google.com/codelabs/mdc-102-java
29. GDG BBSR References • https:/ /github.com/samsruti/android-constraint-layout-resources • https:/ /stackoverflow.com/questions/37321448/differences-between-constraintlayout -and-relativelayout • https:/ /constraintlayout.com/ • https:/ /developer.android.com/ • https:/ /medium.com/google-developers/introduction-to-motionlayout-part-i-2920867 4b10d
30. GDG BBSR Code Repo https:/ /github.com/samsruti/Simple-Login-Screeen-Using-ConstraintLayout-2.0 SAMSRUTI DASH (@samsruti) Software Developer P.A.R.I Technologies Malaysia
31. GDG BBSR THANK YOU ! Let’s connect :) https:/ /github.com/samsruti https:/ /linkedin.com/in/samsruti SAMSRUTI DASH (@samsruti) Software Developer P.A.R.I Technologies Malaysia