Editing a Layout File4:52 with Ben Deitch
In this video we'll make our first changes to the simple layout file that was automatically created for us.
Okay, that's enough about the tools. 0:00 Let's do something. 0:02 We'll talk more about the tools as we work through this project. 0:03 I'll make sure you understand everything you need to know to build this app. 0:07 There are two main things we'll work with in Android Apps. 0:10 The first is the layout of the screen. 0:14 For this, we'll use the design view, 0:16 which allows us to visually manipulate the layout by dragging and dropping. 0:19 It's pretty helpful. 0:23 We can also manipulate the layout in code. 0:24 And we'll see how to do that as well. 0:26 The other main thing we'll work on is how our app works behind the scenes. 0:29 That's where we write Java code that does things like pick a random fun fact. 0:32 I'll explain everything you need to know. 0:37 But if you get confused, remember, check the teacher's notes for 0:39 help and feel free to ask about anything in the community. 0:42 Take a look at these mock-ups from one of our designers at Treehouse. 0:46 You can find this image in the teacher's notes. 0:50 This shows what the app should look like when we're finished. 0:52 We'll have text at the top that says, Did you know? 0:55 Then we'll have one of the fun facts displayed in the middle. 0:58 And then at the bottom, we'll have a button to show another fun fact. 1:00 Notice how we're also going to change the background color for each fact. 1:05 We'll even give our app an icon to match this one. 1:09 This app is relatively simple, but it's still a lot of work. 1:12 We're going to tackle it piece by piece to make it easy to understand. 1:16 Let's start by making the simplest version possible. 1:20 This is something that developers do all the time. 1:23 Starting with something simple lets us make sure the app works as expected. 1:26 Then we can refine it and make it look more and 1:30 more like what we see here in the mock-ups. 1:32 We'll start by changing the layout to show the Did you know text at the top. 1:35 Then we'll build on this piece by piece to turn it into the full app we see here. 1:39 Before we get started, just to make things a little easier to see, 1:44 I'm going to close the project pane and enter full-screen mode. 1:48 We should already have our layout file open. 1:53 Our app is created just with one simple screen. 1:55 And the layout of that screen is defined right here. 1:59 I mentioned that this code is in a language called XML, which stands for 2:02 eXtensible Markup Language. 2:07 If you're familiar with HTML, you'll notice it has some similarities. 2:09 The good news is there's a design view for this layout as well. 2:13 Remember that we can switch back and forth between XML, text, and 2:16 the design view by clicking on these tabs down here. 2:20 Changes we make in the design view update the XML code and vice versa. 2:27 It's up to us to choose how to edit the file. 2:32 Often, it may be easier to work visually like this. 2:35 But sometimes, 2:38 we might want the more precise control we get by editing the XML code directly. 2:39 All right, so we already have a TextView on our screen. 2:43 Let's change the text to say Did you know, just like in the mock-ups. 2:47 Click directly on the Hello World text to select it. 2:51 Then, on the right, we can see a bunch of properties for this TextView. 2:56 In the middle, we can find a property called text. 2:59 And it's set to Hello World, just like we see in the preview. 3:03 Let's delete that and type, Did you know? 3:07 Hit Enter, and there we go. 3:12 Now if we flip to the XML, by using the text tab, there's our new text. 3:15 We've seen what happens when we have errors in our code. 3:21 But this yellowish highlighting is what happens when we have something called 3:24 a warning. 3:28 Warnings aren't as severe as errors. 3:28 We don't have to fix warnings, but we probably should. 3:31 Errors we do have to fix before we run the app. 3:35 Now this warning is telling us that we should use a string resource 3:38 instead of a hard coded string. 3:42 We'll cover how to use string resources in a later project, so 3:44 we're going to ignore this warning. 3:47 But I encourage you to try and fix it on your own if you're curious. 3:49 And if you want to ask for help in the community, please do. 3:53 Also, before we go any further, 3:56 there's one more change we need to make to our layout. 3:58 Instead of using a constraint layout, we wanna be using a relative layout. 4:01 So up here at the top, let's delete this ConstraintLayout bit and 4:06 replace it with RelativeLayout. 4:11 Then let's also delete these four constraint lines and 4:17 make sure not to delete this closing tag. 4:20 Awesome. 4:27 Finally, let's talk about saving. 4:28 Android Studio will save everything for you automatically. 4:30 But if you want to explicitly save a project, you can always go, 4:34 File, Save All, or you can use Cmd+S for Mac or Ctrl+S for Windows. 4:39 All right, nice work. 4:46 Let's see if you can make that same change in just the XML. 4:48
You need to sign up for Treehouse in order to download course files.Sign up