Session #7 rich and responsive layouts
-
Upload
vitali-pekelis -
Category
Software
-
view
27 -
download
0
Transcript of Session #7 rich and responsive layouts
![Page 1: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/1.jpg)
Britt Barak18.12.2016
Wifi: Techiteasy
Rich & Responsive Layouts #7
![Page 2: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/2.jpg)
First,
![Page 3: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/3.jpg)
Britt BarakBritt Barak
Figure 8
Android AcademyWomen Techmakers
![Page 4: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/4.jpg)
Jonathan Yarkoni
Android Developer & Advocate Ironsource
Android Academy Staff
Yonatan LevinGoogle Developer
Expert & Android @ Gett
Britt BarakAndroid Lead
Figure8
Yossi SegevAndroid Developer
Crave
![Page 5: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/5.jpg)
Community Mentors
Eti Negev
![Page 6: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/6.jpg)
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
![Page 7: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/7.jpg)
What Do We Do?
●Android Fundamentals - NOW
● Android UI / UX - 29/1 !
● Community Hackathon - 9/3 !!!
●Android Performance
●Mentors Program●Active community
![Page 8: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/8.jpg)
What’s For Today?●Views
●Styles and themes
●Custom view
●Qualifiers
●Fragments
![Page 9: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/9.jpg)
UI vs. UX
![Page 10: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/10.jpg)
What’s the UX?
What’s the UI?
![Page 11: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/11.jpg)
What’s the UX?
What’s the UI?
![Page 12: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/12.jpg)
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?
![Page 13: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/13.jpg)
Capturing users
●Judgement will be served 30 seconds~○Visuals will decide
○functionality means less
●You need to:○Captivate
○Impress
○Retain
![Page 14: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/14.jpg)
The Players
UI designerUX designerProduct managerDeveloper
![Page 15: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/15.jpg)
Material design
![Page 16: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/16.jpg)
When Using Standards
- Better UX- Better UI- Easier Development
- Shorter implementation
- Less bugs
![Page 17: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/17.jpg)
When Using Standards
- Better UX- Better UI- Easier Development
- Shorter implementation
- Less bugs
- And better harmony- designer --- developer --- user
![Page 18: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/18.jpg)
Designer - red lines
![Page 19: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/19.jpg)
This is just the beginning
- Android UI/UX course (29/1)- Performance course
![Page 20: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/20.jpg)
So Let’s Start!
![Page 21: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/21.jpg)
●Views
●Styles and themes
●Custom view
●Qualifiers
●Fragments
What’s For Today?
![Page 22: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/22.jpg)
Viewz - recap
Rectangle widgetA 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)
![Page 23: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/23.jpg)
View Group (Layout)
A special kind of view.Knows to position other views on the screen.
![Page 24: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/24.jpg)
Which Views Do We Have Here?
![Page 25: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/25.jpg)
Let’s see a bit under the
hood...
![Page 26: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/26.jpg)
How does it work?
Measure Layout Draw!
![Page 27: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/27.jpg)
Step 1: Measure
Goal: obtain view size
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
![Page 28: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/28.jpg)
Step 1: Measure
Goal: obtain view size, including its descendants size
REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
![Page 29: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/29.jpg)
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)
![Page 30: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/30.jpg)
Communicate Dimensions● ViewGroup.LayoutParams ●View.MeasureSpec
![Page 31: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/31.jpg)
ViewGroup.LayoutParams
How big the View wants to be For each dimension, it can specify one of:
an exact number
MATCH_PARENT
WRAP_CONTENT
![Page 32: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/32.jpg)
MeasureSpec
Parent requirement for childEXACTLY: exact size
AT MOST: maximum size
UNSPECIFIED: as child wants
![Page 33: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/33.jpg)
How does it work?
Measure Layout Draw!
![Page 34: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/34.jpg)
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)
![Page 35: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/35.jpg)
- 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
![Page 36: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/36.jpg)
Remember:
●Inflating is not cheap●Lots of children are not cheap
○Usually : prefer flat vs. deep
![Page 37: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/37.jpg)
View types
●Use the right tool for the right task● Viewgroups - root view
○ FrameLayout
○RelativeLayout
○LinearLayout
![Page 38: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/38.jpg)
Widgets
ButtonImageviewTextViewEditTextCheck box
![Page 39: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/39.jpg)
....and also
Time pickerDate pickerAnalog clockCalendar view
![Page 40: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/40.jpg)
main_activity.xml
![Page 41: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/41.jpg)
Some Confusing View Attributes
![Page 42: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/42.jpg)
Weight
![Page 43: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/43.jpg)
Weight
●specifying a size in relation to other objects●Set layout_height or layout_width to 0dp
To be calculated according to layout_weight.
![Page 44: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/44.jpg)
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>
![Page 45: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/45.jpg)
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>
![Page 46: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/46.jpg)
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>
![Page 47: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/47.jpg)
Gravity
![Page 48: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/48.jpg)
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.
![Page 49: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/49.jpg)
gravity
vs.
layout_gravity
![Page 50: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/50.jpg)
Padding Vs Margin
![Page 51: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/51.jpg)
Padding vs. margin
●Padding would squeeze the image.●Margin won’t let you place stuff which touches.
![Page 52: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/52.jpg)
State List
![Page 53: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/53.jpg)
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
![Page 54: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/54.jpg)
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>
![Page 55: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/55.jpg)
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" />
![Page 56: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/56.jpg)
Questions ?
![Page 57: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/57.jpg)
●Views
●Styles and themes
●Custom view
●Qualifiers
●Fragments
What’s For Today?
![Page 58: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/58.jpg)
Styles
●a collection of properties of a View or window
![Page 59: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/59.jpg)
consider
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" />
![Page 60: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/60.jpg)
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>
![Page 61: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/61.jpg)
Becomes:
<TextView style="@style/CodeFont" android:text="@string/hello" />
![Page 62: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/62.jpg)
![Page 63: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/63.jpg)
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>
![Page 64: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/64.jpg)
Question- Which text color is that:
![Page 65: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/65.jpg)
Which text color is that?
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" />
![Page 66: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/66.jpg)
The answer is in the manifest!
![Page 67: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/67.jpg)
AndroidManifest.xml<application android:icon="@mipmap/ic_launcher" android:label="@string/app_name"
android:theme="@style/AppTheme"> <activity android:name=".MainActivity">
<!-- .... -->
</application>
![Page 68: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/68.jpg)
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBa
r"> <!-- Customize your theme here. -->
</style>
![Page 69: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/69.jpg)
<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"/><style name="ThemeOverlay.AppCompat.Dark.ActionBar" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar"/><style name="ThemeOverlay.AppCompat.Dialog" parent="Base.ThemeOverlay.AppCompat.Dialog"/><style name="ThemeOverlay.AppCompat.Dialog.Alert" parent="Base.ThemeOverlay.AppCompat.Dialog.Alert"/><style name="ThemeOverlay.AppCompat.Light" parent="Base.ThemeOverlay.AppCompat.Light"/><style name="Widget.AppCompat.ActionBar" parent="Base.Widget.AppCompat.ActionBar"></style><style name="Widget.AppCompat.ActionBar.Solid" parent="Base.Widget.AppCompat.ActionBar.Solid"></style>
![Page 70: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/70.jpg)
Themes
●Styles ties to context : ○For an application or activity
○Since v-22.1, also to a view
●Basically: many configurations
![Page 71: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/71.jpg)
![Page 72: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/72.jpg)
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"
![Page 73: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/73.jpg)
![Page 74: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/74.jpg)
What’s in a Theme?●Default color values●Default widget styles●Text Appearance Styles●Window Configuration●Drawables
![Page 75: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/75.jpg)
Important Colors
● colorPrimary● colorPrimaryDark● colorAccent
![Page 76: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/76.jpg)
Important Text Colors
● textColorPrimary● textColorPrimaryInverse● textColorSecondary● textColorSecondaryInverse
![Page 77: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/77.jpg)
More important Colors
● colorControlNormal ○ (defaults to textColorSecondary)
● colorControlActivated ○ (defaults to colorAccent)
● colorControlHighlight
![Page 78: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/78.jpg)
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>
![Page 79: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/79.jpg)
Questions ?
![Page 80: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/80.jpg)
Re-using Layouts
![Page 81: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/81.jpg)
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>
![Page 82: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/82.jpg)
<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>
![Page 83: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/83.jpg)
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" android:text="@string/hello" android:padding="10dp" />
...
</LinearLayout>
![Page 84: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/84.jpg)
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>
![Page 85: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/85.jpg)
<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>
![Page 86: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/86.jpg)
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>
![Page 87: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/87.jpg)
Remember:
![Page 88: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/88.jpg)
Questions ?
![Page 89: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/89.jpg)
●Views
●Styles and themes
●Custom view
●Qualifiers
●Fragments
What’s For Today?
![Page 90: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/90.jpg)
Custom views - why?
●Encapsulating a specific functionality or attributes●Performance
https://developer.android.com/training/custom-views/create-view.html#subclassview
![Page 91: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/91.jpg)
Custom views - How?
● Subclass a View or custom widget.●Define custom attributes.●Apply custom attributes.●Add properties and events.
![Page 92: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/92.jpg)
Subclass a View
class PieChart extends View {
public PieChart(Context context, AttributeSet attrs) { super(context, attrs); }
}
![Page 93: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/93.jpg)
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>
![Page 94: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/94.jpg)
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>
![Page 95: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/95.jpg)
Attributes Format Types
●Resources Types:○Fraction
○Float
○Boolean
○Color
○String
○Dimension
○Integer
●Special Types:○Flag
○Enum
○Reference
![Page 96: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/96.jpg)
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>
![Page 97: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/97.jpg)
Apply Custom Attributespublic 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(); }}
![Page 98: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/98.jpg)
Questions ?
![Page 99: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/99.jpg)
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();}
![Page 100: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/100.jpg)
Notify a Change
Measure Layout Draw!
![Page 101: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/101.jpg)
Which step should we re-do?
Notifying a Change
View View
![Page 102: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/102.jpg)
Which step should we re-do?
Re - Draw:
●invalidate()- change in view appearance → re-draw.
Notifying a Change
View View
![Page 103: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/103.jpg)
Which step should we re-do?
Notifying a Change
View1 View2 View1 View2
![Page 104: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/104.jpg)
Which step should we re-do?
Notifying a Change
View1 View2 View1 View2View2View1
![Page 105: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/105.jpg)
Which step should we re-do?
re-measure → re-layout→ re-draw
●requestLayout()
Notifying a Change
View1 View2 View1 View2View2View1
![Page 106: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/106.jpg)
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
![Page 107: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/107.jpg)
Questions ?
![Page 108: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/108.jpg)
●Views
●Styles and themes
●Custom view
●Responsive design
●Fragments
What’s For Today?
![Page 109: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/109.jpg)
87.6%
![Page 110: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/110.jpg)
Resource Qualifiers
●w#dp●h#dp●land●port●sw#dp
![Page 111: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/111.jpg)
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
![Page 112: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/112.jpg)
Resources Types
●Layouts●Dimensions●Menus●Styles●Booleans/Strings/Integers
![Page 113: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/113.jpg)
examples
![Page 114: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/114.jpg)
What happens on runtime change?
![Page 115: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/115.jpg)
![Page 116: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/116.jpg)
Remember Activity Lifecycle?
![Page 117: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/117.jpg)
On Configuration ChangeActivity is recreated
In order to switch resources!
![Page 118: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/118.jpg)
Remember-
This is the SAME app!
Code base, functionality, etc..
![Page 119: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/119.jpg)
This Is The Same App
●Functionality is the same●Include layouts●Use Fragments
![Page 120: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/120.jpg)
Let’s see another example:
![Page 121: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/121.jpg)
![Page 122: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/122.jpg)
How can this work?
![Page 123: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/123.jpg)
ActivityonCreate
()
Illustration :)Activity
onCreate()
onDestroy()
PauseSave state
Inflate Set data
Restore state
onResume()
Play Clean
resources
onPause()
onResume()
Inflate Set data
Play
![Page 124: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/124.jpg)
Could be a handful…….Separate to smaller
components!videoPrese
nter
![Page 125: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/125.jpg)
ActivityonCreate
()
Illustration :)Activity
onCreate()
onDestroy()
PauseSave state
Inflate Set data
Restore state
onResume() onPause()
onResume()
Inflate Set data
init()
onResume()
onPause() clean()
init()
onResume()
![Page 126: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/126.jpg)
●Views
●Styles and themes
●Custom view
●Responsive design
●Fragments
What’s For Today?
![Page 127: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/127.jpg)
Fragments-(Flash back to lesson #4)
What Are They?
![Page 128: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/128.jpg)
Fragments - What Are They?
“A Fragment represents a behavior or a portion of user interfacein an Activity.”
https://developer.android.com/guide/components/fragments.html
![Page 129: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/129.jpg)
Fragments
●Component with UI and a lifecycle●Tied to activity lifecycle
![Page 130: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/130.jpg)
How would it look like?
videoFragment
![Page 131: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/131.jpg)
Illustration :)Activity
onCreate()
onDestroy()
Commit Fragment
VideoFragmentonCreateVi
ew()onDestro
y()PauseSave state
InflateSet data
onResume() onPause()
clean()Play
![Page 132: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/132.jpg)
We use fragments to modularize the activity
![Page 133: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/133.jpg)
View is lower abstraction than Fragment
Fragments know Views. Views don’t know Fragments.
![Page 134: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/134.jpg)
Any Questions?
![Page 135: Session #7 rich and responsive layouts](https://reader035.fdocuments.net/reader035/viewer/2022062822/5885f7f91a28ab864f8b721d/html5/thumbnails/135.jpg)
Thank You !