1 of 59

1

Lesson 13:

App UI design

This work is licensed under the Apache 2 license.

Android Development with Kotlin v1.0

This work is licensed under the Apache 2 license.

2 of 59

About this lesson

Lesson 13: App UI design

2

Android Development with Kotlin

This work is licensed under the Apache 2 license.

3 of 59

3

Android styling

Android Development with Kotlin

This work is licensed under the Apache 2 license.

4 of 59

Android styling system

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)

4

Android Development with Kotlin

This work is licensed under the Apache 2 license.

5 of 59

Precedence of each method of styling

5

View

attributes

Style

Theme

Overrides this

Android Development with Kotlin

This work is licensed under the Apache 2 license.

6 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

7 of 59

Declare a theme

7

<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:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

Define a theme in your appâ€™s res/values/themes.xml file. Use the <style> tag.

In this example, the theme is called Theme.MyApp. The primary color of this theme is determined by the colorPrimary attribute, which we set to a shade of orange. Setting this color affects your app broadly - a number of UI widgets (such as Button) rely on the primary color of the theme. Use theme attributes when defining your styles and layouts, so that these resource files can still be used under a different theme that provides different concrete resources.

When declaring a theme, you donâ€™t have to specify a value for all the possible theme attributes. If you specify a parent theme, you inherit all the attribute values from it, and then you can just override the ones that you want to be different. In this example, we use Theme.MaterialComponents.Light as a parent theme, and then only provide resources for colorPrimary, colorPrimaryVariant, colorSecondary, and colorSecondaryVariant. To see a list of common theme attributes, check out the link in the resources below.

Resources:

8 of 59

Apply a theme

</activity>

</application>

</manifest>

<ConstraintLayout â€¦

android:theme="@style/Theme.MyApp">

8

In AndroidManifest.xml:

In layout file:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

Transition: 1 click

You can specify a theme on components that have (or are) a Context e.g. Activity or Views/ViewGroups.

When you create a project from a template in Android Studio, thereâ€™s already a custom theme for your app defined in the themes.xml file. That theme is already applied to the application or activity in the manifest file, so you probably donâ€™t need to do this step manually. You will see this as the android:theme attribute on either the <application> tag or <activity> tag in the AndroidManifest.xml file.

Alternatively, you can apply the theme to a View/ViewGroup, such as the ConstraintLayout in this example.

In terms of scope, setting a theme on a ViewGroup applies to all the child views within it. Similarly, setting a theme on an Activity applies to the ViewGroups and Views within its hierarchy.

9 of 59

Refer to theme attribute in a layout

Use ?attr/themeAttributeName syntax.

Examples: ?attr/colorPrimaryï¿½ ?attr/colorPrimaryVariant

<LinearLayout â€¦

android:background="?attr/colorSurface">

9

In layout file:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

10 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

11 of 59

Declare a style

11

...

</style>

In res/values/styles.xml:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

To create a new style, open your project's res/values/styles.xml file. For each style you create, follow these steps:

1. Add a <style> element with a name that uniquely identifies the style. In this case, weâ€™ll call it DescriptionStyle.

2. Add an <item> element for each style attribute you want to define.

The name in each item specifies an attribute you would otherwise use as an XML attribute in your layout (such as android:textColor). The value in the <item> element is the value for that attribute.

Any TextView with DescriptionStyle will have these textColor and textSize attributes set on the view.

Note: even though a style and theme are both defined with the <style> syntax, they have different purposes. You can check out the blogpost for more on the difference between styles and themes.

Resources:

12 of 59

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:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

13 of 59

Refer to theme attribute in a style

13

<item name="android:textColor">?attr/colorOnSurface</item>

...

</style>

In res/values/styles.xml:

Android Development with Kotlin

This work is licensed under the Apache 2 license.

14 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

15 of 59

Resources directory

â””â”€â”€ res

â”œâ”€â”€ drawable

â”œâ”€â”€ drawable-*

â”œâ”€â”€ layout

â”œâ”€â”€ menu

â”œâ”€â”€ mipmap-*

â”œâ”€â”€ navigation

â”œâ”€â”€ values

â”‚Â Â â”œâ”€â”€ colors.xml

â”‚Â Â â”œâ”€â”€ dimens.xml

â”‚Â Â â”œâ”€â”€ strings.xml

â”‚Â Â â”œâ”€â”€ styles.xml

â”‚Â Â â””â”€â”€ themes.xml

â””â”€â”€ values-*

15

Android Development with Kotlin

This work is licensed under the Apache 2 license.

16 of 59

Provide alternative resources

â””â”€â”€ res

â”œâ”€â”€ values

â”‚Â Â â”œâ”€â”€ colors.xml

â”‚Â Â â”œâ”€â”€ strings.xml

â”‚Â Â â”œâ”€â”€ styles.xml

â”‚Â Â â””â”€â”€ themes.xml

â””â”€â”€ values-b+esï¿½ â”‚ Â â”œâ”€â”€ strings.xml

â””â”€â”€ values-night

Â Â â””â”€â”€ themes.xml

16

Use when device locale is set to Spanish

Use when night mode is turned on

Android Development with Kotlin

This work is licensed under the Apache 2 license.

An app can include multiple sets of resources, each customized for a different device configuration. When a user runs the app, Android automatically selects and loads the resources that best match the device.

You can declare new resource files that will be used instead of the default ones depending on which resource directory (with qualifiers) that you put it in. For example, you can declare your default strings for your app in the res > values > strings.xml file. You can put the translated Spanish version of those strings in a values-b+es > strings.xml string resource file. These latter strings are automatically picked up in your app when the current locale uses the Spanish language code (es).

Another example is if you want a different theme for when your app is in night mode (you want to specify different primary and secondary colors, for example), you can declare the new theme in the res > values-night > themes.xml file, which will be used when the device is in night mode (with dark theme).

This is another way to keep the core logic of your app separated from the attributes that may change depending on the device configuration.

For more details on the different resource directory qualifiers you could use, check the documentation below.

Resource:

Providing alternative resources

17 of 59

Color resources

A way to name and standardize colors throughout your app

17

In res/values/colors.xml:

...

</resources>

Specified as hexadecimal colors in form of #AARRGGBB

Android Development with Kotlin

This work is licensed under the Apache 2 license.

18 of 59

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>

<TextView â€¦

android:layout_marginTop="@dimen/top_margin" />

A way to name and standardize dimension values in your layouts

Android Development with Kotlin

This work is licensed under the Apache 2 license.

In the resources directory, you may have also noticed a dimens.xml file, which we havenâ€™t discussed before. If you notice certain dimension values being used in multiple places in your app, consider declaring a dimension resource for it (for example, a margin value or a specific view width). This makes it easier if you ever need to change the dimension value, you only update it in one place and the change gets applied everywhere the dimension was used.

In the res/values/dimens.xml file, you can declare dimension resources, such as a top_margin dimension with a value of 16dp. A dimension is specified with a number followed by a unit of measure. For example: 10px, 2in, 5sp. See the link below for the units of measure supported on Android.

Refer to the dimension using the syntax @dimen/<name> in resource files or as R.dimen.<name> in your Kotlin code.

Resource:

Dimension

19 of 59

19

Typography

Android Development with Kotlin

This work is licensed under the Apache 2 license.

20 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

21 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

22 of 59

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)

Android Development with Kotlin

This work is licensed under the Apache 2 license.

23 of 59

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" />

Android Development with Kotlin

This work is licensed under the Apache 2 license.

24 of 59

Customize your own TextAppearance

parent="TextAppearance.MaterialComponents.Headline1">

...

<item name="android:textStyle">normal</item>

<item name="android:textAllCaps">false</item>

...

</style>

24

Android Development with Kotlin

This work is licensed under the Apache 2 license.

25 of 59

Use a custom TextAppearance in a theme

...

<item name="textAppearanceHeadline1">@style/TextAppearance.MyApp.Headline1</item>

...

</style>

25

Android Development with Kotlin

This work is licensed under the Apache 2 license.

26 of 59

26

Material Design

Android Development with Kotlin

This work is licensed under the Apache 2 license.

27 of 59

Intro to Material

Adaptable system of guidelines, components, and tools that support best practices for UI design

Material Design homepage

27

Android Development with Kotlin

This work is licensed under the Apache 2 license.

28 of 59

Material Components

Interactive building blocks for creating a user interface

28

Android Development with Kotlin

This work is licensed under the Apache 2 license.

29 of 59

Material color tool

29

Android Development with Kotlin

This work is licensed under the Apache 2 license.

30 of 59

Baseline Material color theme

30

Android Development with Kotlin

This work is licensed under the Apache 2 license.

31 of 59

Material Components for Android Library

implementation 'com.google.android.material:material:<version>'

31

Android Development with Kotlin

This work is licensed under the Apache 2 license.

32 of 59

Material Themes

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

32

Android Development with Kotlin

This work is licensed under the Apache 2 license.

33 of 59

Material theme example

33

Theme.MaterialComponents.DayNight.DarkActionBar

Light mode

Dark mode

Android Development with Kotlin

This work is licensed under the Apache 2 license.

34 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

35 of 59

Support dark theme

In values/themes.xml:

In values-night/themes.xml:

35

<item name="colorPrimary">@color/orange_500</item>

...

<item name="colorPrimary">@color/orange_200</item>

...

Android Development with Kotlin

This work is licensed under the Apache 2 license.

36 of 59

36

Material Components

Android Development with Kotlin

This work is licensed under the Apache 2 license.

37 of 59

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!

Android Development with Kotlin

This work is licensed under the Apache 2 license.

38 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

39 of 59

Text field example

<com.google.android.material.textfield.TextInputLayout

android:id="@+id/textField"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="@string/label"

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

<com.google.android.material.textfield.TextInputEditText

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

39

Android Development with Kotlin

This work is licensed under the Apache 2 license.

40 of 59

Bottom navigation

Allows movement between top level destinations in your app
Alternate design pattern to a navigation drawer
Limited to 5 locations max

40

Android Development with Kotlin

This work is licensed under the Apache 2 license.

41 of 59

Bottom navigation example

41

...

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id="@+id/bottom_navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:menu="@menu/bottom_navigation_menu" />

</LinearLayout>

Android Development with Kotlin

This work is licensed under the Apache 2 license.

42 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

43 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

44 of 59

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()

Android Development with Kotlin

This work is licensed under the Apache 2 license.

45 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

46 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

47 of 59

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_height="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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

Hereâ€™s an example where we add a FloatingActionButton within a CoordinatorLayout. Most of the attributes in the Android namespace are ones weâ€™ve used before.

Two that need highlighting are layout_gravity and contentDescription. layout_gravity specifies how a view will place itself in its containerâ€™s layout. In this case, it positions the FAB to the bottom and end of the containing CoordinatorLayout (with a margin) The other relevant attribute is contentDescription, which helps screen readers know the purpose of the FAB even when there is no text on the FAB.

fabSize can be normal (56dp), mini (40dp) or auto. Auto uses the window size to determine a reasonable button size.

Once the FAB is declared in your layout, you can set a click listener on the button, just as you have done before with other buttons.

Resources:

48 of 59

Cards

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

48

Android Development with Kotlin

This work is licensed under the Apache 2 license.

49 of 59

MaterialCardView example

<com.google.android.material.card.MaterialCardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="8dp">

</com.google.android.material.card.MaterialCardView>

49

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

</LinearLayout>

Android Development with Kotlin

This work is licensed under the Apache 2 license.

50 of 59

50

Localization

Android Development with Kotlin

This work is licensed under the Apache 2 license.

51 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

52 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

53 of 59

Support languages that use RTL scripts

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.

53

Android Development with Kotlin

This work is licensed under the Apache 2 license.

To add support to your app for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew, make the following changes. First specify android:supportsRtl="true" on the application tag in the AndroidManifest.xml file. Be sure that your appâ€™s target SDK version is at least 17 or higher.

People who use RTL scripts prefer an RTL user interface, which includes right-aligned menus, right-aligned text, and forward arrows pointing to the left. If you havenâ€™t already, convert left and right to start and end, respectively, in each of your existing layout resource files. By doing this, you allow the framework to align your app's UI elements based on the user's language settings.

Also localize strings and format text in messages so that they appear correctly. You can also provide specific resources using the -ldrtl (layout-direction-right-to-left) and -ldltr (layout-direction-left-to-right) resource directory qualifiers.

Resource:

54 of 59

54

Example apps

Android Development with Kotlin

This work is licensed under the Apache 2 license.

55 of 59

Check out other apps

55

Sunflower app

Google I/O app

Android Development with Kotlin

This work is licensed under the Apache 2 license.

56 of 59

56

Summary

Android Development with Kotlin

This work is licensed under the Apache 2 license.

57 of 59

Summary

In Lesson 13, you learned how to:

57

Android Development with Kotlin

This work is licensed under the Apache 2 license.

58 of 59

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

Android Development with Kotlin

This work is licensed under the Apache 2 license.

59 of 59

Pathway

Practice what youâ€™ve learned byï¿½completing the pathway:

Lesson 13: App UI Design

59

Android Development with Kotlin

This work is licensed under the Apache 2 license.