Android Material Design in Practice

Presentation deck for join meetup between INDUX and Kelas Mobile in 28 November 2017.

Transcript

1. Android Material Design In Practice
2. Adi Nugroho Mobile Engineer @ Edgeworks Solutions Pte. Ltd. iOS & Android ! @adinugroho
3. Android — Market share : 85% (iOS 14%) — Challenges : — Various hardware spec. — Various manufacturer also has various software / API spec. — Screen size: small, phone, tablet, desktop, tv. — OS distribution.
5. Android — UI : XML — Logic : Kotlin and ....... Java — IDE : Android Studio — Alternatives : — Cross Platform development : React Native, Xamarin, Ionic, Angular, RubyMotion — * but learning native is still important.
6. Android UI
7. MEASUREMENT Desktop : pixel / point for font Android : dp (dip) / sp for font — Various dpi size — Using pixel is supported but a BIG NO — PX != DP
8. ASSETS FOR VARIOUS DPI Before Lollipop (Android 5.0 / SDK v21) - mdpi : 1 - hdpi : 1.5 - xhdpi : 2 - xxhdpi : 3 - xxxhdpi : 4 A!er Lollipop - anydpi Vector Assets (SVG)
9. FLOW FROM DESIGNER TO DEVELOPER ??
10. 1. Convert px to dp 2. Convert px to dp with formula: px/2. then find even number before the result ex: 39px / 2 = 19.5 the dp will be 18dp 3. Use tool like Zeplin (zeplin.io)
11. ZEPLIN
12. 1. Helps developer find exact space & size. 2. All dpi assets will be generated. 3. Integration with Sketch & Photoshop.
13. ANDROID LAYOUT
14. 1. Linear Layout 2. Relative Layout 3. Constraint Layout
15. LINEAR LAYOUT Elements are put in order / stack. < android:orientation="horizontal" android:orientation="vertical" />
16. LINEAR LAYOUT <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:id="@+id/img_backward" android:layout_marginEnd="16dp"/> <ImageView android:layout_width="60dp" android:layout_height="60dp" android:id="@+id/img_play" android:layout_marginEnd="16dp"/> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:id="@+id/img_forward" android:layout_marginEnd="16dp"/> </LinearLayout>
17. RELATIVE LAYOUT — Put element relative to each other. < android:layout_toEndOf="@id/element" android:layout_toStartOf="@id/element" android:layout_below="@id/element" android:layout_above="@id/element" />
18. RELATIVE LAYOUT <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <ImageView android:layout_width="128dp" android:layout_height="128dp" android:id="@+id/img_cover"/> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:id="@+id/img_heart" android:layout_toEndOf="@id/img_cover" android:layout_above="@id/img_cover" android:layout_marginBottom="-16dp" android:layout_marginStart="-4dp"/> </RelativeLayout>
19. CONSTRAINT LAYOUT — Inspired by iOS AutoLayout. — Rely heavily on visual editor. — Visual editor still buggy. — Android layout for future development.
20. COLORS
21. 1. ColorPrimary 2. ColorPrimaryDark 3. ColorAccent material.io/color/ www.materialpalette.com/
22. TYPOGRAPHY
26. APPCOMPAT — Backward support — Almost every element has AppCompat version
27. UI ELEMENTS — EditText / TextInputLayout + TextInputEditText — Button — ImageView — Toolbar — NavigationView
29. UI ELEMENTS (ADVANCE) — ListView — RecyclerView
31. SPECIAL ELEMENTS — Usually comes from another service. — Stick to their guidelines & brand.
32. SPECIAL ELEMENTS — Avoid creating your own custom element if it's disallowed. — Or you may end up in trouble.
33. DEMO APP
34. TIPS FOR DESIGNER — Try to always stick to default measurement size. — Custom element is fine as long as it's acievable within time limit for an app project.