This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we introduce you to the problem that styles and themes solve. We'll set up a small challenge from our hypothetical manager, and look into why you may want to style your app to look the same on older versions of Android. We will also introduce you to the project and show you what the final product will look like once we're done theming and styling.
Documentation
Project Files
- Starter files (zip download)
- Completed project files (GitHub repo)
Related Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hello everyone and thanks for tuning
into this course on styles and themes.
0:04
In this course, we're going to image that
our manager has tasked us with the job of
0:09
styling our app and ensuring it
works on older versions of Android.
0:12
At first when we launched we wanted
to be as quick to market as possible.
0:16
However, after taking a look at
recent Android version distribution
0:19
our managers realized we can tackle
another 20% of users if we target
0:23
Kit Kat as our minimum Android
version rather than Lollipop.
0:26
First we'll look at a simple app we
created to demonstrate some repeated
0:29
visuals.
0:33
We'll then attempt to extract some of
the repetition to avoid duplicated code.
0:34
If you're like me,
0:37
your aim is to type as little as
possible to achieve the desired effect.
0:38
In order to reduce that duplication,
we'll introduce you to styles,
0:42
on how to create a style and
apply to individual views in our layouts.
0:45
Once we've created a few styles,
we'll learn about themes and
0:49
how to achieve backwards compatibility
on Android to make our managers happy.
0:52
Let's have a look at the Dummy Music
Player Application to see where we can
0:56
extract styles.
0:59
If you've taken the fantastic workshop
by Ben Jakuben on animations and
1:00
transitions, this app should
look familiar to you, these apps
1:04
share a lot of the same code with some
of his removed to keep things simple.
1:07
If you haven't taken that workshop,
I highly recommend it.
1:10
I'll link it in the teacher's notes so you
don't even have to go find it yourself.
1:13
Styles.
1:16
One important thing to note is that
just because two views use the same
1:17
attributes it doesn't mean
they should share a style.
1:20
For example if you have a button and and
an edit text then have the height and
1:23
width wrap the content does not
mean they should share a style.
1:27
The useful analogue from a talk
given by the wonderful of is this.
1:30
In Java code just because two variables
share the same value doesn't mean you can
1:35
get rid of those values and just have
the value they share as a single variable.
1:39
Think of styles as more of a way to reduce
repetition in semantically similar views
1:43
such as a music player buttons or
text on a settings screen.
1:47
I'll link that talk in
the instructor notes as well,
1:50
as it is one of the best I've seen
on the subject of styles and themes.
1:52
When you first open the app you'll
see a list of album artwork.
1:55
Clicking on any art will bring up
a list of songs for that given album.
1:59
Keep in mind this is fake data so
every album will have the same songs but
2:02
the album art that was clicked will
be displayed on the Detail page.
2:06
I just wanted to mention that so
you don't worry that your app is broken.
2:09
Feel free to make this into a fully
fledged music player, I just didn't for
2:13
the sake of simplicity for this course.
2:16
Right.
2:18
So after clicking on an album,
we see a list of songs.
2:19
At the outset, the list of song appears
to be a great spot to extract a style.
2:22
However, upon further analysis the style
would be applied to a list item
2:26
which doesn't really provide as much
benefit as it would only be applied once.
2:30
So we decided not to style
these particular views.
2:34
Take note of the appearance
of the artist and
2:37
album text at the top of
this activity though.
2:39
We actually use this exact same style
on the song playback activity, so
2:41
this is a great candidate for
style extraction.
2:45
Again, always be considering the semantic
similarities of the view's purpose when
2:47
deciding whether to share
a style amongst the views.
2:51
Clicking a song will take us to
the aforementioned playback activity.
2:54
Here, we note the playback controls.
2:58
They all appear to be the same size, have
the same digital response to a click, and
3:00
certainly perform a similar action.
3:04
These buttons are perfect culprits for
sharing a style.
3:06
The playback time and
track length also will share a style.
3:09
Let's go to the last screen of this app
and talk about where styles belong in it.
3:12
Looks like we'll use a style for the edit
text, the switches, and the seat bars.
3:16
It may not be immediately obvious, but
we'll actually apply a unique theme to
3:21
the settings activities instead of
styling each of those views individually.
3:24
That will save a bunch
of duplicated code and
3:28
also demonstrate where to use
a theme instead of a style.
3:30
Now that we know what styles are, let's go
ahead and create one in the next video.
3:33
If you'd like to follow along, the code
is available in the teacher's notes.
3:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up