This codelab is part of the Android Kotlin Fundamentals course. You'll get the most value out of this course if you work through the codelabs in sequence. All the course codelabs are listed on the Android Kotlin Fundamentals codelabs landing page.
The focus in this series of codelabs is on one of the most important aspects of Android development, app design. Obvious aspects of app design are views, text, and buttons, and where they are on the screen, as well as the colors and fonts they use. Hints to the user about what to do next are also an essential aspect of design. Users need to be able to tell at a glance what they are looking at, what is important, and what they can do.
Compare the two screens below. Notice that by moving elements around and drawing focus to what's important, you can help the user understand what's going on. For simple screens, good design often means showing less. For screens with lots of important information, good design makes dense information understandable at a glance. As you work on Android Apps you may hear this concept called information architecture (IA).
Another level of design is building coherent user flows, or use cases, that let users accomplish tasks. This form of design is called user experience design (UXD), and some designers specialize in it.
If you don't have access to a designer, here are a few tips for getting started:
Here are some other questions to ask yourself when designing a great app experience. You learned techniques for tackling these issues in preceding codelabs:
As you work on apps for larger audiences, it's essential to make your apps accessible to as many types of users as possible. For example:
Good design is the most important way to get users using your app.
These codelabs are too short to teach you everything about design for Android, but they'll get you started in a good direction, and you can continue to learn and develop on your own.
You should be familiar with:
ViewModel, with the recommended architecture to create a well-structured and efficient app
The GDG-finder starter app builds on everything you've learned so far in this course.
The app uses
ConstraintLayout to lay out three screens. Two of the screens are just layout files that you'll use to explore colors and text on Android.
The third screen is a GDG finder. GDGs, or Google Developer Groups, are communities of developers that focus on Google technologies, including Android. GDGs around the world host meetups, conferences, study jams, and other events.
As you develop this app, you work on the real list of GDGs. The finder screen uses the device's location to sort the GDGs by distance.
If you're lucky and there's a GDG in your region, you can check out the website and sign up for their events! GDG events are a great way to meet other Android developers and learn industry best practices that didn't fit in this course.
The screenshots below show how your app will change from the beginning to the end of this codelab.
Android provides a rich styling system that lets you control the appearance of all the views in your app. You can use themes, styles, and view attributes to affect styling. The diagram shown below summarizes the precedence of each method of styling. The pyramid diagram shows the order in which styling methods are applied by the system, from the bottom up. For example, if you set the text size in the theme, and then set the text size differently in the view attributes, the view attributes will override the theme styling.
Use for custom or one-off designs such as margins, paddings, or constraints.
Apply a style to several views, overriding the default style. For example, use a style to make consistently styled headers or a set of buttons.
When Android styles a view, it applies a combination of themes, styles, and attributes, which you can customize. Attributes always overwrite anything specified in a style or theme. And styles always overwrite anything specified in a theme.
The screenshots below show the GDG-finder app with light theme (left) and a dark theme (right), as well as with a custom font and header sizes. This can be implemented in several ways, and you learn some of them in this codelab.
In this task, you use attributes to style headers for the text in the app layout.
ConstraintLayoutto position elements inside a
titletext view, add a
textSizeattribute to change the size of the text to
spstands for scale-independent pixels, which are scaled by both the pixel density and the font-size preference that the user sets in their device settings. Android figures out how large the text should be on the screen when it draws the text. Always use
spfor text sizes.
<TextView android:id="@+id/title" ... android:textSize="24sp"
titletext view to opaque gray, by setting it to an aRGB value of
<TextView android:id="@+id/title" ... android:textColor="#FF555555"
18sp. (The default alpha is
FF, opaque. You can omit the alpha value if you are not changing it.)
<TextView android:id="@+id/subtitle" ... android:textSize="18sp" android:textColor="#555555"
subtitletext view. Use the Preview tab to see how your app's appearance changes. Then remove these attributes.
<TextView android:id="@+id/subtitle" ... android:textAllCaps="true" android:textStyle="bold" android:background="#ff9999"
backgroundattributes from the
subtitleview before you continue.
When using fonts with your app, you could ship the necessary font files as part of your APK. While simple, this solution is usually not recommended, because it makes your app take longer to download and install.
Android lets apps download fonts at runtime using the Downloadable Fonts API. If your app uses the same font as another app on the device, Android only downloads the font once, saving the device's storage space.
In this task, you use downloadable fonts to set the font of every view in your app that uses the theme.
home_fragment.xmlin the Design tab.
fontFamilyattribute. You can find it in the All Attributes section, or you can just search for it.
lobster, or just
<meta-data>tag with the
resourceattributes set to
"preloaded_fonts". This tag tells Google Play Services that this app wants to use downloaded fonts. When your app runs and requests the Lobster Two font, the font provider downloads the font from the internet, if the font is not already available on the device.
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
res/valuesfolder, find the
preloaded_fonts.xmlfile, which defines the array that lists all the downloadable fonts for this app.
res/fonts/lobster_two.xmlfile has information about the font.
home_fragment.xmland notice in the code and preview that the Lobster Two font is applied to the
TextView, and thus applied to the title.
res/values/styles.xmland examine the default
AppThemetheme that was created for the project. It currently looks as shown below. To apply the new Lobster Two font to all the text, you'll need to update this theme.
<style>tag, notice the
parentattribute. Every style tag can specify a parent and inherit all the parent's attributes. The code specifies the
Themedefined by the Android libraries. The
MaterialComponentstheme that specifies everything from how buttons work to how to draw toolbars. The theme has sensible defaults, so you can customize just the parts you want. The app uses the
Lightversion of this theme without the action bar (
NoActionBar), as you can see in the screenshot above.
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
AppThemestyle, set the font family to
lobster_two. You need to set both
fontFamily, because the parent theme uses both. You can check
home_fragment.xmlin the Design tab to preview your changes.
<style name="AppTheme" ... <item name="android:fontFamily">@font/lobster_two</item> <item name="fontFamily">@font/lobster_two</item>
home_fragment.xml, find the
titletext view, which has the attribute for the
lobster_twofont. Delete the
fontFamilyattribute and run the app. Because the theme sets the same font family, there is no change.
fontFamilyattribute back into the
Make sure it's in the
<TextView android:id="@+id/title" ... app:fontFamily="serif-monospace"
fontFamilyattribute from the
Themes are great for applying general theming to your app, such as a default font and primary colors. Attributes are great for styling a specific view and adding layout information such as margins, padding, and constraints, which tend to be specific to each screen.
In the middle of the style-hierarchy pyramid are styles. Styles are reusable "groups" of attributes that you can apply to views of your choice. In this task, you use a style for the title and subtitle.
<resources>tag, define a new style using the
<style>tag, as shown below.
<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6"> </style>
It's important to think about style names as semantic when you name them. Select a style name based on what the style will be used for, not based on the properties that the style affects. For example, call this style
Title, not something like
LargeFontInGrey. This style will be used by any title anywhere in your app. As a convention,
TextAppearance styles are called
Name, so in this case, the name is
The style has a parent, just as a theme can have a parent. But this time, instead of extending a theme, the style extends a style,
TextAppearance.MaterialComponents.Headline6. This style is a default text style for the
MaterialComponents theme, so by extending it you modify the default style instead of starting from scratch.
24sp. In the other item, set the
textColorto the same dark gray used before.
<item name="android:textSize">24sp</item> <item name="android:textColor">#555555</item>
TextAppearance.Titlewill be in the text size, make this style a child of
Subtitlestyle, set the text size to
18sp. Here's the completed style:
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" > <item name="android:textSize">18sp</item> </style>
home_fragment.xml, add the
Titlestyle to the
titletext view. Delete the
TextAppearancestyling that you set. (The pyramid diagram at the beginning of the codelab shows the order in which styling is applied.) Use the
textAppearanceproperty to apply the style as a
TextAppearanceso that the font set in the
Themeoverrides what you set here.
<TextView android:id="@+id/title" android:textAppearance="@style/TextAppearance.Title"
TextAppearance.Subtitlestyle to the
subtitletext view, and delete the
textColorattributes. You have to apply this style as a
textAppearancealso, so that the font set in the theme overrides what you set here.
<TextView android:id="@+id/subtitle" android:textAppearance="@style/TextAppearance.Subtitle"
Android Studio project: GDGFinderStyles.
styles.xmlresource file using the
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" > <item name="android:textSize">18sp</item> </style>
Using downloadable fonts makes fonts available to users without increasing the size of your APK. To add a downloadable font for a view:
When the app first requests a font, and the font is not already available, the font provider downloads it from the internet.
Android developer documentation:
This section lists possible homework assignments for students who are working through this codelab as part of a course led by an instructor. It's up to the instructor to do the following:
Instructors can use these suggestions as little or as much as they want, and should feel free to assign any other homework they feel is appropriate.
If you're working through this codelab on your own, feel free to use these homework assignments to test your knowledge.
Which tag is used to define themes?
Which of the following is NOT a good use of styles?
▢ Specify the constraints of a view.
▢ Specify the background color of headings.
▢ Unify the font size across views.
▢ Specify the text color for a group of views.
What is the difference between themes and styles?
▢ Themes apply to the entire app, while you can apply styles to specific views.
▢ Themes cannot inherit from other themes, but styles can inherit from other styles.
▢ Styles cannot inherit from other styles, but themes can inherit from other themes.
▢ Themes are provided by the Android system, while styles are defined by the developer.
TextView in your app has a
Theme that sets the font size to
12sp, a defined style that sets it to
14sp, and a
fontSize attribute of
16sp, what is the size of the displayed font on the screen?
Start the next lesson:
For links to other codelabs in this course, see the Android Kotlin Fundamentals codelabs landing page.