Using AppCompatActivity6:37 with Michael Lustig
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.
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