Session #7 rich and responsive layouts
Download as PPTX, PDF•1 like•328 views
This document provides information about an Android Academy event on views, styles, themes, and qualifiers. It includes an agenda for the event that covers views, styles and themes, custom views, and qualifiers. It also includes explanations and examples of key concepts like views, view groups, measure, layout, draw, weights, gravity, padding vs margin, and state list resources.
Session #7 rich and responsive layouts
- 1. Britt Barak 18.12.2016 Wifi: Techiteasy Rich & Responsive Layouts #7
- 2. First,
- 3. Britt Barak Britt Barak Figure 8 Android Academy Women Techmakers
- 4. Jonathan Yarkoni Android Developer & Advocate Ironsource Android Academy Staff Yonatan Levin Google Developer Expert & Android @ Gett Britt Barak Android Lead Figure8 Yossi Segev Android Developer Crave
- 6. Largest Android Community Android Academy - TLV TLV - Android Academy ~ 2000 members Join Us:
- 7. What Do We Do? ●Android Fundamentals - NOW ● Android UI / UX - 29/1 ! ● Community Hackathon - 9/3 !!! ●Android Performance ●Mentors Program
- 8. What’s For Today? ●Views ●Styles and themes ●Custom view ●Qualifiers
- 9. UI vs. UX
- 10. What’s the UX? What’s the UI?
- 11. What’s the UX? What’s the UI?
- 12. What’s the UI? Hiush Royi! ...and you are….? President Obama... is this for me?!?! So when is my birthday ?!?!?!?? And where are my balloons? What’s the UX?
- 13. Capturing users ●Judgement will be served 30 seconds~ ○ Visuals will decide ○ functionality means less ●You need to: ○ Captivate ○ Impress ○ Retain
- 14. The Players UI designer UX designer Product manager Developer
- 15. Material design
- 16. When Using Standards - Better UX - Better UI - Easier Development - Shorter implementation - Less bugs
- 17. When Using Standards - Better UX - Better UI - Easier Development - Shorter implementation - Less bugs - And better harmony - designer --- developer --- user
- 18. Designer - red lines
- 19. This is just the beginning - Android UI/UX course (29/1) - Performance course
- 20. So Let’s Start!
- 21. ●Views ●Styles and themes ●Custom view ●Qualifiers What’s For Today?
- 22. Viewz - recap Rectangle widget A View: ●Knows to draw itself ●Used for user interaction ●Has (at least) hight and width (match_parent / wrap_content/fixed) ●May has an id (@+id/ means to create an id if it doesn’t exist)
- 23. View Group (Layout) A special kind of view. Knows to position other views on the screen.
- 24. Which Views Do We Have Here?
- 25. Let’s see a bit under the hood...
- 26. How does it work? Measure Layout Draw!
- 27. Step 1: Measure Goal: obtain view size REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
- 28. Step 1: Measure Goal: obtain view size, including its descendants size REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
- 29. Step 1: Measure Goal: obtain view size, including its descendants size, agreed by its parent. REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
- 31. ViewGroup.LayoutParams How big the View wants to be For each dimension, it can specify one of: an exact number MATCH_PARENT WRAP_CONTENT
- 32. MeasureSpec Parent requirement for child EXACTLY: exact size AT MOST: maximum size UNSPECIFIED: as child wants
- 33. How does it work? Measure Layout Draw!
- 34. Step 2: Layout Goal : set position for view and all its children ●onLayout() is called REF: http://developer.android.com/reference/android/view/View.html#onLayout(boolean, int, int, int, int)
- 35. - View draws itself with size and position from previous steps. - onDraw(Canvas) is called Step 3: Draw REF: http://developer.android.com/reference/android/view/View.html#onDraw(android.graphics.Canvas) Guide: http://developer.android.com/training/custom-views/custom-drawing.html
- 36. Remember: ●Inflating is not cheap ●Lots of children are not cheap ○ Usually : prefer flat vs. deep
- 37. View types ●Use the right tool for the right task ● Viewgroups - root view ○ FrameLayout ○ RelativeLayout ○ LinearLayout
- 39. ....and also Time picker Date picker Analog clock Calendar view
- 41. Some Confusing View Attributes
- 42. Weight
- 43. Weight ●specifying a size in relation to other objects ●Set layout_height or layout_width to 0dp To be calculated according to layout_weight.
- 47. Gravity
- 48. Gravity ●gravity: gravity of the content of the view it’s used on. ●layout_gravity: sets the gravity of the view in it’s parent.
- 51. Padding vs. margin ●Padding would squeeze the image. ●Margin won’t let you place stuff which touches.
- 52. State List
- 53. State List Resource ●Sets a color / drawable per the view’s state. ●Defined in .xml file https://developer.android.com/guide/topics/resources/color-list-resource.html
- 54. res/color/button_text.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="#ffff0000"/> <!-- pressed --> <item android:state_focused="true" android:color="#ff0000ff"/> <!-- focused --> <item android:color="#ff000000"/> <!-- default --> </selector>
- 56. Questions?
- 57. ●Views ●Styles and themes ●Custom view ●Qualifiers What’s For Today?
- 58. Styles ●a collection of properties of a View or window
- 60. In styles.xml <resources> <style name="CodeFont" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources>
- 63. Inheritance <style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style> <style name="CodeFont.Red"> <item name="android:textColor">#FF0000</item> </style>
- 64. Question- Which text color is that:
- 65. Which text color is that? <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" />
- 66. The answer is in the manifest!
- 67. AndroidManifest.xml <application android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <!-- .... --> </application>
- 68. styles.xml <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> </style>
- 69. <style name="Theme.AppCompat" parent="Base.Theme.AppCompat"/> <style name="Theme.AppCompat.CompactMenu" parent="Base.Theme.AppCompat.CompactMenu"/> <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light"/> <style name="Theme.AppCompat.DayNight.DarkActionBar" parent="Theme.AppCompat.Light.DarkActionBar"/> <style name="Theme.AppCompat.DayNight.Dialog" parent="Theme.AppCompat.Light.Dialog"/> <style name="Theme.AppCompat.DayNight.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert"/> <style name="Theme.AppCompat.DayNight.Dialog.MinWidth" parent="Theme.AppCompat.Light.Dialog.MinWidth"/> <style name="Theme.AppCompat.DayNight.DialogWhenLarge" parent="Theme.AppCompat.Light.DialogWhenLarge"/> <style name="Theme.AppCompat.DayNight.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar"/> <style name="Theme.AppCompat.Dialog" parent="Base.Theme.AppCompat.Dialog"/> <style name="Theme.AppCompat.Dialog.Alert" parent="Base.Theme.AppCompat.Dialog.Alert"/> <style name="Theme.AppCompat.Dialog.MinWidth" parent="Base.Theme.AppCompat.Dialog.MinWidth"/> <style name="Theme.AppCompat.DialogWhenLarge" parent="Base.Theme.AppCompat.DialogWhenLarge"> </style> <style name="Theme.AppCompat.Light" parent="Base.Theme.AppCompat.Light"/> <style name="Theme.AppCompat.Light.DarkActionBar" parent="Base.Theme.AppCompat.Light.DarkActionBar"/> <style name="Theme.AppCompat.Light.Dialog" parent="Base.Theme.AppCompat.Light.Dialog"/> <style name="Theme.AppCompat.Light.Dialog.Alert" parent="Base.Theme.AppCompat.Light.Dialog.Alert"/> <style name="Theme.AppCompat.Light.Dialog.MinWidth" parent="Base.Theme.AppCompat.Light.Dialog.MinWidth"/> <style name="Theme.AppCompat.Light.DialogWhenLarge" parent="Base.Theme.AppCompat.Light.DialogWhenLarge"> </style> <style name="Theme.AppCompat.Light.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="Theme.AppCompat.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="ThemeOverlay.AppCompat" parent="Base.ThemeOverlay.AppCompat"/> <style name="ThemeOverlay.AppCompat.ActionBar" parent="Base.ThemeOverlay.AppCompat.ActionBar"/> <style name="ThemeOverlay.AppCompat.Dark" parent="Base.ThemeOverlay.AppCompat.Dark"/>
- 70. Themes ●Styles ties to context : ○ For an application or activity ○ Since v-22.1, also to a view ●Basically: many configurations
- 72. Material Themes ●@android:style/Theme.AppCompat (dark version) @android:style/Theme.AppCompat.Light (light version) @android:style/Theme.AppCompat.Light.DarkActionBar android:theme="@style/AppTheme"
- 74. What’s in a Theme? ●Default color values ●Default widget styles ●Text Appearance Styles ●Window Configuration ●Drawables
- 75. Important Colors ● colorPrimary ● colorPrimaryDark ● colorAccent
- 76. Important Text Colors ● textColorPrimary ● textColorPrimaryInverse ● textColorSecondary ● textColorSecondaryInverse
- 77. More important Colors ● colorControlNormal ○ (defaults to textColorSecondary) ● colorControlActivated ○ (defaults to colorAccent) ● colorControlHighlight
- 78. Example <activity android:theme="@style/AppTheme"> <style name="AppTheme" parent="android:Theme.AppCompat.Light"> <item name="android:colorAccent">@color/pink</item> <item name="android:editTextStyle">@style/MyEditTextStyle</item> <item name="android:windowActionBar">false</item> <item name="android:windowBackground">@color/custom_theme_color</item> </style> <color name="custom_theme_color">#b0b0ff</color>
- 79. Questions?
- 80. Re-using Layouts
- 81. Consider This Layout : titlebar.xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/titlebar_bg" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gafricalogo" /> </FrameLayout>
- 82. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/app_bg"> <include layout="@layout/titlebar"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" android:padding="10dp" /> ... </LinearLayout>
- 83. What do we have? <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ... <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/titlebar_bg" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gafricalogo" /> </FrameLayout> <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
- 84. Use merge <merge xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gafricalogo" /> </merge>
- 85. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/app_bg"> <include layout="@layout/titlebar"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" android:padding="10dp" /> ... </LinearLayout>
- 86. Now: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"> ... <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gafricalogo" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" android:padding="10dp" /> ... </LinearLayout>
- 87. Remember:
- 88. Questions?
- 89. ●Views ●Styles and themes ●Custom view ●Qualifiers What’s For Today?
- 90. Custom views - why? ●Encapsulating a specific functionality or attributes ●Performance https://developer.android.com/training/custom-views/create-view.html#subclassview
- 91. Custom views - How? ● Subclass a View or custom widget. ●Define custom attributes. ●Apply custom attributes. ●Add properties and events.
- 92. Subclass a View class PieChart extends View { public PieChart(Context context, AttributeSet attrs) { super(context, attrs); } }
- 93. Use Custom Attributes <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.example.customviews"> </LinearLayout>
- 94. Define Custom Attributes res/values/attrs.xml <resources> <declare-styleable name="PieChart"> <attr name="showText" format="boolean" /> <attr name="labelPosition" format="enum"> <enum name="left" value="0"/> <enum name="right" value="1"/> </attr> </declare-styleable> </resources>
- 95. Attributes Format Types ●Resources Types: ○ Fraction ○ Float ○ Boolean ○ Color ○ String ○ Dimension ●Special Types: ○ Flag ○ Enum ○ Reference
- 96. Use Custom Attributes <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"> <com.example.customviews.charting.PieChart app:showText="true" app:labelPosition="left" /> </LinearLayout>
- 97. Apply Custom Attributes public PieChart(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.getTheme().obtainStyledAttributes( attrs,R.styleable.PieChart, 0, 0); try { mShowText = a.getBoolean(R.styleable.PieChart_showText, false); mTextPos = a.getInteger(R.styleable.PieChart_labelPosition, 0); } finally { a.recycle(); } }
- 98. Questions?
- 99. Add Properties and Events Attributes can only be read when the view is initialized. public boolean isShowText() { return mShowText; } public void setShowText(boolean showText) { mShowText = showText; invalidate(); requestLayout(); }
- 100. Notify a Change Measure Layout Draw!
- 101. Which step should we re-do? Notifying a Change View View
- 102. Which step should we re-do? Re - Draw: ●invalidate()- change in view appearance → re-draw. Notifying a Change View View
- 103. Which step should we re-do? Notifying a Change View1 View2 View1 View2
- 104. Which step should we re-do? Notifying a Change View1 View2 View1 View2View2View1
- 105. Which step should we re-do? re-measure → re-layout→ re-draw ●requestLayout() Notifying a Change View1 View2 View1 View2View2View1
- 106. Design For Accessibility Label your input fields using android:contentDescription Call sendAccessibilityEvent() when appropriate. Support alternate controllers, such as D-pad and trackball More here: https://developer.android.com/guide/topics/ui/accessibility/custom-views.html
- 107. Questions?
- 108. ●Views ●Styles and themes ●Custom view ●Responsive design What’s For Today?
- 109. 87.6 %
- 111. Resource Qualifiers ●Screen size ●Pixel density ●Screen orientation ●Platform version ●Locale ●UI Mode - car / TV / watch… https://developer.android.com/guide/topics/resources/providing-resources.html
- 113. examples
- 114. What happens on runtime change?
- 117. On Configuration Change Activity is recreated In order to switch resources!
- 118. Remember- This is the SAME app! Code base, functionality, etc..
- 119. This Is The Same App ●Functionality is the same ●Include layouts ●Use Fragments
- 120. Let’s see another example:
- 122. How can this work?
- 123. Activity onCreate() Illustration :) Activity onCreate() onDestroy() Pause Save state Inflate Set data Restore state onResume() Play Clean resources onPause() onResume() Inflate Set data Play
- 124. Could be a handful……. Separate to smaller components! videoPresenter
- 125. Activity onCreate() Illustration :) Activity onCreate() onDestroy() Pause Save state Inflate Set data Restore state onResume() onPause() onResume() Inflate Set data init() onResume() onPause() clean() init() onResume()
- 126. ●Views ●Styles and themes ●Custom view ●Responsive design What’s For Today?
- 127. Fragments- (Flash back to lesson #4) What Are They?
- 128. Fragments - What Are They? “A Fragment represents a behavior or a portion of user interface in an Activity.” https://developer.android.com/guide/components/fragments.html
- 129. Fragments ●Component with UI and a lifecycle ●Tied to activity lifecycle
- 130. How would it look like? videoFragment
- 131. Illustration :) Activity onCreate() onDestroy() Commit Fragment VideoFragment onCreateView() onDestroy() Pause Save state Inflate Set data onResume() onPause() clean()Play
- 132. We use fragments to modularize the activity
- 133. View is lower abstraction than Fragment Fragments know Views. Views don’t know Fragments.
- 134. Any Questions?
- 135. Thank You !
Editor's Notes
- #41: You don’t always need to override all of the methods
- #45: You don’t always need to override all of the methods
- #46: You don’t always need to override all of the methods
- #47: You don’t always need to override all of the methods
- #50: You don’t always need to override all of the methods
- #72: https://medium.com/google-developers/theming-with-appcompat-1a292b754b35#.zgcvvb3ds https://developer.android.com/training/material/theme.html
- #107: https://developer.android.com/guide/topics/ui/accessibility/apps.html#custom-views
- #114: You don’t always need to override all of the methods
- #124: add asynctask lifecycle. - without config change.
- #126: add asynctask lifecycle. - without config change.
- #132: add asynctask lifecycle. - without config change.