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
SettingActivity was already using an AppCompat theme and extending AppCompatActivity, so why does it still look different? We'll answer that question and talk about a little bit of the magic of AppCompatActivity, ultimately finishing the styling of the app on older platforms.
Project Files
- Course files (zip download)
- End of Stage 2 Video 5 (GitHub repo)
But wait, why does the settings
activity still have those switches that
0:00
look really dated?
0:03
It already extends from
AppCompat activity.
0:04
Well, it turns out that under
the covers AppCompat is doing a lot of
0:07
the work for us.
0:10
For example, when ever we use a seek bar,
an edit text or a number of other views
0:10
from the platform AppCompat will switch
them out for the compatible version of
0:14
that same view, automatically
giving us backward compatibility.
0:18
However, it doesn't do so
for the switch widget.
0:23
I've included links to the documentation
on each of those views in the teacher's
0:25
notes, if you'd like
a little more information.
0:28
Luckily, we can manually replace
the Android.Widget.Switch with
0:30
the Android.Support.V7.Widget.Switch
compat view in our layout manually,
0:34
and everything should look consistent.
0:39
Let's do that now and
0:41
run the app again to take one final
peek at the settings activity.
0:42
And great it now looks and feels just like
the app running on the newer version.
1:07
And we have achieved backgrounds
compatibility with our layout.
1:11
However our boss is incredibly picky and
notices a wierd flashing effect on some
1:14
of buttons on switches when clicked
on older versions of Android.
1:18
In order to resolve this issue
of the flashing buttons,
1:22
we are going to have to create a minutely
different version of the style applied
1:25
to each button experiencing the issue.
1:29
In our case we've got the overflow
button in the song playback activity,
1:31
the playback button's themselves, and
1:35
lastly the switches in
the settings activity.
1:37
First, we'll fix the overflow
button in the playback activity.
1:39
To do so we use the cool trick for
extracting a style for that button and
1:43
add some attributes that
weren't automatically grabbed
1:47
by the refactoring tool and
name it overflow button base.
1:50
We'll be sure to exclude the background
attribute from the base,
2:26
since we only want the
selectableItemBackgroundBorderless to be
2:29
applied in versions of Android 21 and up.
2:32
Next, we'll create a version of styles.xml
that will only be used in those versions
2:36
of Android greater than 21.
2:41
Within that new styles file, we'll create
the overflow button style that will
2:50
actually be applied at run time
to run newer versions of Android.
2:54
Within that style we just have to set the
background to selectable item background
3:17
borderless.
3:21
We'll copy that style into
our other styles.xml and
3:23
set the background to transparent.
3:26
If we didn't set it to transparent and
just left the background blank,
3:28
the background of the button
would block what's behind it.
3:31
Now I'm going to do the same thing for
our playback button style.
3:34
I'm going to do it
a slightly different way so
3:37
you can see different methods
of achieving the same goal.
3:39
This time I'll set the default
back ground to transparent and
3:41
only apply the clickable background
on Android 21 and greater.
3:44
You'll notice that since I don't have
to override any default attributes of
3:59
the style, I can simply close the style
tag after declaring the parent.
4:03
Now, I'll create the style
in the V21 styles file and
4:07
verify that everything looks and
works as expected.
4:09
Before running the App, I need to go
back to activities on song playback.
4:46
And change style applied
to the overflow button,
4:50
to the actually style we want to use.
4:52
Not the the base style that we named,
when extracting all the attributes.
4:54
Lastly, I'll take care of this setting
switch style in the same way as
5:10
I did the playback button style.
5:14
Finally, we'll run the app and
make sure everything looks great.
6:04
That looks good.
6:19
We don't really have a visual effect here,
but
6:22
at least we got rid of the flashing
effect that we were going for.
6:24
And those switches look good.
6:27
Fantastic, it looks like we successfully
back ported our apps design.
6:32
I can't wait to show management.
6:35
You need to sign up for Treehouse in order to download course files.
Sign up