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