Lesson 13 App User Interface Design of movile app

Apache 2 license
This work is licensed under the Apache 2 license.
Apache 2 license
Android Development with Kotlin v1.0 1
Lesson 13:
App UI design

Android Development with Kotlin
Apache 2 license
About this lesson
Lesson 13: App UI design
● Android styling
● Typography
● Material Design
● Material Components
● Localization
● Example apps
● Summary
2

Apache 2 license
This work is licensed under the Apache 2 license. 3
Android styling

Apache 2 license
Android styling system
4
● Used to specify the visual design of your app
● Helps you maintain a consistent look across your app
● Hierarchical (you can inherit from parent styles and override
specific attributes)

Apache 2 license
Precedence of each method of styling
5
View
attributes
Style
Theme
Overrides this
Overrides this

Apache 2 license
Themes
● Collection of named resources, useful broadly across the app
● Named resources are known as theme attributes
● Examples:
○ Use a theme to define primary & secondary colors in the app
○ Use a theme to set the default font for all text within an activity
6

Apache 2 license
Declare a theme
7
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
<item name="colorPrimary">@color/orange_500</item>
<item name="colorPrimaryVariant">@color/orange_700</item>
<item name="colorSecondary">@color/pink_200</item>
<item name="colorSecondaryVariant">@color/pink_700</item>
...
</style>
In res/values/themes.xml:

Apache 2 license
Apply a theme
<manifest ... >
<application ... >
<activity android:theme="@style/Theme.MyApp" ... >
</activity>
</application>
</manifest>
8
In AndroidManifest.xml:
In layout file:
<ConstraintLayout …
android:theme="@style/Theme.MyApp">

Apache 2 license
Refer to theme attribute in a layout
Use ?attr/themeAttributeName syntax.
Examples: ?attr/colorPrimary
?attr/colorPrimaryVariant
9
<LinearLayout …
android:background="?attr/colorSurface">
In layout file:

Apache 2 license
Styles
● A style is a collection of view attributes, specific to a
type of view
● Use a style to create a collection of reusable styling
information, such as font size or colors
● Good for declaring small sets of common designs used
throughout your app
10

Apache 2 license
Declare a style
11
<style name="DescriptionStyle">
<item name="android:textColor">#00FF00</item>
<item name="android:textSize">16sp</item>
...
</style>
In res/values/styles.xml:

Apache 2 license
Apply a style
12
<TextView
style="@style/DescriptionStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/description_text" />
On a view in a layout file:

Apache 2 license
Refer to theme attribute in a style
13
<style name="DescriptionStyle">
<item name="android:textColor">?attr/colorOnSurface</item>
...
</style>
In res/values/styles.xml:

Apache 2 license
View attributes
● Use view attributes to set attributes explicitly for each view
● You can use every property that can be set via styles or themes
● Use for custom or one-off designs such as margins, paddings,
or constraints
14

Apache 2 license
Resources directory
└── res
├── drawable
├── drawable-*
├── layout
├── menu
├── mipmap-*
├── navigation
├── values
│ ├── colors.xml
│ ├── dimens.xml
│ ├── strings.xml
│ ├── styles.xml
│ └── themes.xml
└── values-*
15

Apache 2 license
Provide alternative resources
└── res
├── values
│ ├── colors.xml
│ ├── styles.xml
│ └── themes.xml
└── values-b+es
└── values-night
└── themes.xml
16
Use when device locale is set to Spanish
Use when night mode is turned on

Apache 2 license
Color resources
A way to name and standardize colors throughout your app
17
In res/values/colors.xml:
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
...
</resources>
Specified as hexadecimal colors in form of #AARRGGBB

Apache 2 license
Dimension resources
● Declare your dimension values in res/values/dimens.xml:
● Refer to them as @dimen/<name> in layouts or R.dimen.<name> in code:
18
<resources>
<dimen name="top_margin">16dp</dimen>
</resources>
<TextView …
android:layout_marginTop="@dimen/top_margin" />
A way to name and standardize dimension values in your layouts

Apache 2 license
Typography

Apache 2 license
Scale-independent pixels (sp)
● The textual equivalent to density-
independent pixels (dp)
● Specify text sizes in sp
(takes into account user preferences)
● Users can adjust Font and Display sizes
in the Settings app (after Display)
20

Apache 2 license
Type scale
● A set of styles designed to work
together in a cohesive manner
for your app and content
● Contains reusable categories of
text with intended purpose for
each (for example, headline,
subtitle, caption)
21

Apache 2 license
TextAppearance
A TextAppearance style often alters one or more of these attributes:
22
● typeface (android:fontFamily)
● weight (android:textStyle)
● text size (android:textSize)
● capitalization (android:textAllCaps)
● letter spacing (android:letterSpacing)

Apache 2 license
Examples using TextAppearance
23
<TextView
...
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline1"
android:text="@string/title" />
<TextView
...
android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
android:text="@string/body_text" />

Apache 2 license
Customize your own TextAppearance
<style name="TextAppearance.MyApp.Headline1"
parent="TextAppearance.MaterialComponents.Headline1">
...
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:letterSpacing">0</item>
...
</style>
24

Apache 2 license
Use a custom TextAppearance in a theme
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
...
<item name="textAppearanceHeadline1">@style/TextAppearance.MyApp.Headline1</item>
...
</style>
25

Apache 2 license
Material Design

Apache 2 license
Intro to Material
Adaptable system of
guidelines, components, and
tools that support best
practices for UI design
Material Design homepage
27

Apache 2 license
Material Components
Interactive building blocks
for creating a user interface
28

Apache 2 license
Material color tool
29

Apache 2 license
Baseline Material color theme
30

Apache 2 license
Material Components for Android Library
implementation 'com.google.android.material:material:<version>'
31

Apache 2 license
Material Themes
32
● Theme.MaterialComponents
● Theme.MaterialComponents.NoActionBar
● Theme.MaterialComponents.Light
● Theme.MaterialComponents.Light.NoActionBar
● Theme.MaterialComponents.Light.DarkActionBar
● Theme.MaterialComponents.DayNight
● Theme.MaterialComponents.DayNight.NoActionBar
● Theme.MaterialComponents.DayNight.DarkActionBar

Apache 2 license
Material theme example
33
Theme.MaterialComponents.DayNight.DarkActionBar
Light mode Dark mode

Apache 2 license
Dark theme
A low-light UI that displays mostly dark surfaces
● Replaces light-tinted surfaces and dark text
with dark-tinted surfaces and light text
● Makes it easier for anyone to use a device
in lower-light environments
● Improves visibility for users with low vision
and those sensitive to bright light
● Can significantly reduce power usage
(depending on the device)
34

Apache 2 license
Support dark theme
In values/themes.xml:
35
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
In values-night/themes.xml:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...

Apache 2 license
Material Components

Apache 2 license
Material Components
Component library provided for Android and design guidelines
37
● Text fields ● App bars (top and bottom)
● Buttons ● Floating Action Button (FAB)
● Menus ● Navigation Drawer
● Cards ● Bottom navigation
● Chips ● Snackbar
...and more!

Apache 2 license
Text field
● Composed of TextInputLayout with child view
TextInputEditText
● Shows a floating label or a text hint before the user enters text
● Two types:
38
Filled text field Outlined text field

Apache 2 license
Text field example
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField"
android:layout_width="match_parent"
android:hint="@string/label"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
39

Apache 2 license
Bottom navigation
● Allows movement between top level
destinations in your app
● Alternate design pattern to a
navigation drawer
● Limited to 5 locations max
40

Apache 2 license
Bottom navigation example
41
<LinearLayout …>
...
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
app:menu="@menu/bottom_navigation_menu" />
</LinearLayout>

Apache 2 license
Bottom navigation listener
bottomNav.setOnNavigationItemSelectedListener { item ->
when(item.itemId) {
R.id.item1 -> {
// Respond to navigation item 1 click
true
}
R.id.item2 -> {
true
}
else -> false
}
}
42

Apache 2 license
Snackbar
● Display short messages within the app
● Messages have a duration (SHORT,
LONG, or INDEFINITE)
● May contain an optional action
● Works best in a CoordinatorLayout
● Shown at bottom of enclosing container
43

Apache 2 license
Snackbar examples
Show a simple message:
Snackbar.make(view, R.string.text_label, Snackbar.LENGTH_SHORT)
.show()
44
Add an action to a Snackbar:
Snackbar.make(view, R.string.text_label, Snackbar.LENGTH_LONG)
.setAction(R.string.action_text) {
// Responds to click on the action
}
.show()

Apache 2 license
Floating Action Button (FAB)
● Perform the most-common action for a screen (for example, creating a new
email)
● Come in multiple sizes (regular, mini, and extended)
45

Apache 2 license
CoordinatorLayout
● Acts as top-level container in an app
● Manages interaction of its child views, such as gestures
● Recommended for use with views like a Snackbar or FAB
46

Apache 2 license
FAB example
<androidx.coordinatorlayout.widget.CoordinatorLayout ...>
....
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:contentDescription="@string/fab_content_desc"
app:fabSize="normal" 
app:srcCompat="@drawable/ic_plus"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
47

Apache 2 license
Cards
● A card holds content and actions
for a single item.
● Cards are often arranged in a
list, grid, or dashboard.
● Use MaterialCardView.
48

Apache 2 license
MaterialCardView example
<com.google.android.material.card.MaterialCardView
android:layout_margin="8dp">
</com.google.android.material.card.MaterialCardView>
49
<LinearLayout
android:orientation="vertical">
<ImageView .../>
<TextView .../>
</LinearLayout>

Apache 2 license
Localization

Apache 2 license
Localize your app
● Separate the localized aspects of your app (for example, text, audio
files, currency, and numbers) as much as possible from the core
Kotlin functionality of the app.
Example: Extract the user facing strings into strings.xml.
● When a user runs your app, the Android system selects which
resources to load based on the device's locale.
● If locale-specific resources are not found, Android falls back to
default resources you defined.
51

Apache 2 license
Support different languages and cultures
● Decide which locales to support.
● Create locale-specific directories in res directory:
<resource type>-b+<language code>
[+<country code>]
Examples: layout-b+en+US
values-b+es
● Provide locale-specific resources (such as strings
and drawables) in those directories.
52

Apache 2 license
Support languages that use RTL scripts
53
● Users can choose a language that uses right-to-left (RTL) scripts.
● Add android:supportsRtl="true" to app tag in manifest.
● Convert left and right to start and end, respectively, in your layout
files (change android:paddingLeft to android:paddingStart).
● Localize strings and format text in messages.
● Optionally, use -ldrtl resource qualifier to provide alternate resources.

Apache 2 license
Example apps

Apache 2 license
Check out other apps
55
Sunflower
app
Google I/O
app

Apache 2 license
Summary

Apache 2 license
Summary
In Lesson 13, you learned how to:
● Customize the visual look of your app using styles and themes
● Choose from predefined type scales for the text in your app (or create
your own text appearance)
● Select theme colors for your app using Material color tool
● Use Material Components library to speed up UI development
● Localize your app to support different languages and cultures
57

Apache 2 license
Learn more
58
● Material Design
● Material Components
● Tools for picking colors
● Dark theme
● Localize your app
● Blog posts: Themes vs Styles, Common Theme Attributes, Prefer Theme
Attributes, Themes Overlay
● Sample code: Sunflower app, Google I/O app, Android GitHub repo

Apache 2 license
Pathway
59
Practice what you’ve learned by
completing the pathway:
Lesson 13: App UI Design

Lesson 13 App User Interface Design of movile app

More Related Content

Similar to Lesson 13 App User Interface Design of movile app (20)

Recently uploaded (20)

Lesson 13 App User Interface Design of movile app