Setting a Fullscreen Theme3:30 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:07 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. 0:15 But a better solution for us is to remove it completely using an app theme. 0:18 An app theme is a generalized style that changes how certain things look in an app. 0:23 We'll cover this in much more detail in later projects, 0:28 including how to create our own theme. 0:31 But here we just want to use a default theme that gets ride of the action bar. 0:33 We set the theme for our app in a file called Android Manifest. 0:38 Let's open the project pane. 0:42 And if we're still looking at our project from the Android perspective, 0:45 we can find this file in the manifest folder, and double click it to open it. 0:48 This file contains meta information about our app, like its icon, name, and theme. 0:54 It's a very important file in any Android project and 1:02 we'll talk more about it in later videos. 1:05 But to change the theme we need to do some investigative work. 1:07 Notice that the theme starts with another prefix, at style slash. 1:11 Over in the project pane let's expand the res folder and then the values directory. 1:16 Here we have a styles.xml, and if we open it, sure 1:23 enough there's the value for AppTheme, which is the name we saw in the manifest. 1:28 This theme is pretty empty, but it actually gets most of its styling from 1:34 the parent defined here, Theme.AppCompat.Light.DarkActionBar. 1:39 We're going to change this parent to something else that doesn't 1:44 have an action bar. 1:47 Now we could just use a system theme instead our own app theme. 1:48 But if we do it this way, where app theme has a system theme as a parent, 1:52 then we can inherit everything from that system theme and 1:57 customize only the parts we'd like to be different. 2:00 We won't add anything custom in this project, but we will in later projects. 2:03 Anyhow, we can use code completion to pick a new theme. 2:07 Let's delete dark action bar. 2:11 And then with the cursor right here after this last period press Control Space. 2:14 This gives us some suggestions based on what we've already typed. 2:20 Since we're trying to get rid of the action bar, let's select this 2:24 one, Theme.AppCompat.Light.NoActionBar. 2:31 Then let's head back to our layout, click on the design tab, and there we go. 2:34 No more action bar. 2:42 Now let's run our project to make sure it still works as expected. 2:44 Perfect, this is exactly what we wanted to see. 2:51 We've added some padding around the edges, gotten rid of the action bar, and 2:54 now it's really starting to look like the mockups. 2:58 Nice work. 3:01 We made quite a few changes here. 3:02 Let's take a short break to review before moving onto the code. 3:04 We've learned a lot about working with our IDE, and the emulator. 3:07 Then we added some views to our layout, we added a text view to display a fun fact 3:12 and a button that we'll tap to show a new fun fact. 3:16 Then we saw how to change some colors and modify padding. 3:20 As well as how to change our theme. 3:23 Coming up next, we'll add some code to our button to make it actually do something. 3:25
You need to sign up for Treehouse in order to download course files.Sign up