Android gets me soooo hot, you too?
Support our courses! Buy the Pickup Line App!
In this lesson we’re going to setup the layout of our pickup app. Here is what our app will look like, two buttons to get clean and dirty pickup lines, and then another screen to display the pickup line, along with a button to try again if they’re not that into you, but i’m sure they will be. The first layout is set up with the main activities XML file.
So delete hello world by clicking on it and pressing delete, we can also select stuff in the component tree view to the right. Now we’ve got a blank canvas, select the text view. We’re going to change the layout to Linear layout and delete this padding, notice that it’s highlighted green, this means its referencing another file, if we click on it we see the @ sign, in this case the dimens dot xml in the values folder. That’s a file where you can standardize dimensions. Android handles a lot of defaults this way and when you see an @ sign that means its referencing a file somewhere. For now delete the padding, for this app we don’t need more cushion for the pushin. Next we’ll add the attribute android orientation vertical, to make whatever we put into this layout arrange itself vertically. Look back at the design view and we’ll see the padding is gone.
Let’s split this vertical layout into two halves by adding two relative layouts. Select relative layout, then mouse over linear layout in the component tree and click to add it. You don’t need to drag, but you can. Do it one more time for the second half. We don’t see much change in the design, to make each relative layout take up half the screen find layout weight in properties and change it to .5, linear layout allows you to weight things inside, weight of 0.5 tells each relative layout to take up half the space.
Now we add our image views. Find image view and place a new image view into the center of the top layout. Nothing shows up because we need to tell it which image to display inside the view! But where do we put images? If you look in resources you’ll see MipMap folders, those hold the launcher icons. We need to create a directory called drawable that will hold our images. Control or right click in resources and select new directory, name it drawable. Now navigate to whatever directory on your computer has your image files in it and drag these files into the new drawables folder. Click yes for the windows asking if you want to copy these over. Now android knows where these images are and we can reference them. Head over to the component tree and select the image in the first image view, then to the properties pane and just start typing “SRC” to find the source property where we set our image source. Just like html right! Click the box next to source and then select the little box at the end of the input field, this will pop up the selector and in the project tab find the drawable folder and look for the “cleanImage” file name, once again you can just start typing the file name and it will search for you. And boom our image is in! Right above src is the property scaleType, select center crop and it will scale the image to fit the entire half. We could spend a whole day on images in android, but since we’re into the whole brevity thing we’re gonna keep it simple. Last let’s set the id on the image. Ids on the views we add to our interface are important, it’s how we’ll select stuff in the code later. Call this cleanImage.
Next is the button. Just select it from the palette and click right in the middle of our new image. This will place our button over it, make layout width and height match parent to cover our relative layout, and also cover our image. Let’s bump the text size up to 50dp and change the text color to white, then for background we drop the brightness all the way down and bring the opacity down a little so we can get the overlay effect. The button id is even more important, so we set that ID to cleanButton and then the text to “Clean”. Everything in the bottom pane will be the same except for the IDs, source, and text, so let’s just copy these two widgets or views and paste them into the bottom half. Double click on the button as a shortcut to change the text and ID to Dirty and DirtyButton respectively. Select the image and change the source to dirtyImage and change the ID to the same. Wow our first activity is done, let’s look at our XML file, you can see doing all this stuff in design view added a bunch of XML, pretty sweet. Keep calm and emulate on.
Next is the second page of our app. Android refers to separate pages as activities, so in layout select new, activity, blank activity. Call it Line activity, since it’s where we’ll display the pickup line. Leave everything else the same, but set the hierarchical parent to MainActivity, this will tell the back button on the phone where to go back to.
Let’s do some cleanup first by going into the XML and deleting the padding, then let’s drag an image view on, and set source to full image and scale center crop, we’re going a little faster now since this should all be familiar. Next let’s put a TextView on and add a pickup line and an ID of pickupLine. Let’s make this span the entire width and height. Make the text color white and text size 40dp, and then padding on all sides of 30dp and last let’s darken the background and give it some opacity. Looking great. Last, put the button at the bottom so select button, and drop it right in the middle near the bottom. If we look at the XML you’ll see it sets a margin from the bottom for us. If you’ve ever done CSS this is all vaguely familiar. Back to design view, let’s make the button text white and add padding of 10dp, plus make the background hot pink, super sexy. Then double click the button and set the text as “Rejected, Try Again” and the button id to retryButton. And, oh my fucking god, we are finally done. With our layout... Let’s crank up our emulator and check it out.
If you do web development you’ll find Android layouts a lot like CSS, they’ll drive you insane, everyone does them a little differently, and sometimes you just pound on it with a dull hammer until it looks the way you want.
What’s this lightbulb that keeps popping up. You remember clippy from windows? Well this is kinda like that, except useful. The lightbulb tells you if things aren’t quite right. This one on the main activity is saying hardcoded string should use string resource. Android has an XML file where you can store strings, as in pieces of text, to use over and over. This is also helpful if you want to translate your app, coma estas bitches, you can translate all the strings in one place. Let’s click the dropdown from the lightbulb and name this asset pickup button. If we look in our strings dot xml we’ll see that pickup_button got added as a string resource file that we can reference. Let’s hit refresh on our preview and we’ll see the normal string again. Let’s run the app to see what it looks like in the emulator, freaking amazing.
This app is probably already worth a million dollars, even if it doesn’t do anything, mostly because of my hotness. In the rest of this course we’re going to show you how to make all this stuff actually do shit. That’s the code magic! And now another item of clothing will magically disappear.
Questions or Comments?