Android Academy

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

5. Community Mentors
Eti Negev

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)

30. Communicate Dimensions
● ViewGroup.LayoutParams
●View.MeasureSpec

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

38. Widgets
Button
Imageview
TextView
EditText
Check box

39. ....and also
Time picker
Date picker
Analog clock
Calendar view

40. main_activity.xml

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.

44. Weight example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/green" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/purple" />
</LinearLayout>

45. Weight example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="@color/green" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/purple" />
</LinearLayout>

46. Weight example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/green" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/purple" />
</LinearLayout>

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.

49. gravity
vs.
layout_gravity

50. Padding Vs Margin

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>

55. res/color/button_text.xml
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/click"
android:textColor="@color/button_text" />

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

59. consider
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />

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>

61. Becomes:
<TextView
style="@style/CodeFont"
android:text="@string/hello" />

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
%

110. Resource Qualifiers
●w#dp
●h#dp
●land
●port
●sw#dp

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

112. Resources Types
●Layouts
●Dimensions
●Menus
●Styles
●Booleans/Strings/Integers

113. examples

114. What happens on runtime change?

116. Remember Activity Lifecycle?

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 !