Preview
Video Player
00:00
00:00
Creating a Style
2:37Let's dive right in and create our first style: the style for the Playback Buttons! We'll also see a cool shortcut in Android Studio for powerful editing. After the style has been created, we'll apply it and verify that we still have the same visual look and feel as before.
The first style that I'll create is,
in my opinion, the most obvious one.
0:00
The style for
our buttons on the song playback screen.
0:04
Again, please let me reiterate, there
isn't supposed to be any music playing.
0:07
We simulate the song playback just
to add some effect to the screen.
0:11
Please don't think your app is
broken if it doesn't play any music.
0:15
The attributes that each playback button
have in common are the height, width, and
0:18
the drawable they use for
0:21
the background to produce that cool
ripple effect when you click them.
0:23
Let's head on over to our styles.xml and
0:27
create our first style
called PlaybackButtonStyle.
0:29
Within it, we'll set the height and width
of any views applying that style to 64dp.
0:39
To use that cool duplicate line
shortcut in Android Studio,
0:50
press Cmd+D in Mac, and Ctrl+D in Windows.
0:54
We'll also set the Android
background attribute to
0:59
?android:attr/selectableItemBackgroundBor-
derless.
1:03
Wow, that attribute name is a handful.
1:15
Let's break down exactly
what all those symbols mean.
1:18
First, the question mark in the beginning.
1:20
That question mark means that we want to
access an attribute of the current theme,
1:23
rather than some concrete values.
1:27
Such as Android color black,
which refers to a constant value.
1:28
However, the attribute
selectableItemBackgroundBorderless
1:33
refers to whatever value that is set for
the given theme.
1:36
I hope that clears things up for you.
1:40
I know at first it's a lot to parse.
1:41
But once the things are broken
down into individual pieces,
1:43
they tend to make much more sense.
1:46
Now that I've created the style for
the playback buttons,
1:47
I'll remove the attributes in XML, and
1:51
replace them with the line
style=@style/PlaybackButtonStyle.
1:53
I always like to run the app just to
make sure everything looks good, so
2:17
I'll do that now.
2:20
Great, the playback buttons still have
that cool ripple effect when pressed, and
2:32
they're still the right size.
2:35