Setting a Fullscreen Theme3:38 with Ben Deitch
The last thing we need to do to complete our layout is get rid of the ActionBar at the top of the screen. Let's see how to do that using an Android theme!
The last thing we need to do is get rid of this bar here at the top of our screen. 0:00 This is called the action bar and it's useful for 0:05 navigating between multiple screens or adding actions in the app. 0:08 But we don't need any of that for this app, so we can safely remove it. 0:12 It's possible to hide the action bar in Java code but 0:16 a better solution for us is to remove it completely using an app theme. 0:19 An app theme is a generalized style that changes how certain things look in an app. 0:24 We'll cover this in much more detail in later projects 0:30 including how to create our own theme. 0:33 But here, we just want to use a default theme that gets rid of the action bar. 0:35 We set the theme for our app in a special file called Android manifest. 0:40 Over here on the Project pane, if we're still looking at our project from 0:45 the Android perspective, we can find this file in the manifests folder. 0:49 And double click to open it. 0:54 This file contains meta information about our app like its icon, name and theme. 0:57 It's a very important file in any Android project. 1:05 And we'll talk more about it in later videos. 1:08 But to change the theme, we need to do some investigative work. 1:11 Notice that the theme starts with another prefix, @style. 1:15 Over in the Project pane, let's expand the res folder and then the values directory. 1:20 Here, we have a styles .xml and if we open it, sure enough, 1:26 there is the value for app theme which is the name we saw in the manifest. 1:31 This theme is pretty empty. 1:36 But it actually gets most of its styling from the parent defined here, 1:38 Theme.AppCompat.Light.DarkActionBar. 1:42 We're going to change this parent to something else that doesn't have 1:46 an action bar. 1:49 Now we could just use a system theme instead of our own app theme. 1:51 But if we do it this way where app theme has a system theme as a parent, 1:55 then we can inherit everything from that system theme and 2:00 customize only the parts we'd like to be different. 2:03 We won't add anything custom in this project but we will in later projects. 2:06 Anyhow, we can use code completion to pick a new theme. 2:11 Let's delete DarkActionBar and 2:15 then with the cursor right here after this last period, press Ctrl+Space. 2:18 This gives us suggestions based on what we've already types. 2:25 Since we're trying to get rid of the action bar, 2:29 let's select this one, Theme.AppCompact.Light.NoActionBar. 2:31 And you hit Escape to close the documentation. 2:38 Then, let's head back to our layout. 2:41 Hide the Project pane, and there we go, no action bar. 2:46 Now let's run our project to make sure it still works as expected. 2:50 Perfect, this is exactly what we wanted to see. 2:59 We've added some padding around the edges, gotten rid of the action bar, and 3:02 now it's really starting to look like the mock ups. 3:06 Nice work. 3:09 We've made a lot of changes here. 3:11 Let's take a short break to review before moving on to the code. 3:13 We learned a lot about working with our IDE [LAUGH] and the emulator. 3:16 Then, we added some views to our layout, we added a text view to display a fun fact 3:20 and a button that we'll tap to show a new fun fact. 3:25 Then, we saw how to change some colors and 3:29 modify padding, as well as how to change our theme. 3:30 Coming up next, 3:34 we'll add some code to our button [LAUGH] to make it actually do something. 3:34
You need to sign up for Treehouse in order to download course files.Sign up