I’m back! After a short 14 month siesta, I’ve decided to change gears and pick up App design.
Don’t worry. Today’s tutorial is going to be extremely light on the coding because for the most part, we’re just generating a hoard of files with pre-written code. After that, this is going to be an exercise in strategically ignoring all but the most essential bits required to make an Android app. Our goal is to adapt a few key pieces of that code to lay the groundwork for java tutorials in the future.
Let’s get started.
Step 1. Download Android Studio. It’s an IDE (Integrated Development Environment). Put simply, it’s an easy bake oven. It comes with the basic ingredients to make the app work (java and xml files galore). You can build on top of that to make it your own.
Step 2. Start a Project. Make it a Basic Activity. 
Step 4. Configure your project. Call it Riddler. Our super basic app is going to do one thing and one thing only. It’s going to tell us a riddle. Set the language to Java and leave the rest of the settings as is. Click Finish.
Step 5. Don’t panic. Let’s talk about what you’re looking at. First, to the far left, the Project Pane gives you easy access to all the files that make up your app. You’ll see a general app folder containing manifests, java, and res. Double clicking files will open them up so that you can view and edit things. Once opened, the files will stay available for easy access below the menu bar.
This is where the pre-written code comes in. Android Studio, thankfully, has a MainActivity file with some bare bones code inside, along with FirstFragment and SecondFragment java files. What is a fragment, you ask?
Android Developers says it’s a behavior or portion of user interface. For our purposes, fragments are just going to represent the screens in our app.
The first gives us the riddle; the second answers it.
The java files contain the code associated with each screen. Under res (short for resources), you’ll see multiple .xml files inside the layout folder. These outline what our app screens will look like.
Step 6. Open the fragment_first.xml file (under res/layout). XML files have three options in how you display them, but edits will apply no matter how you’re viewing things. The first is the easiest to work in because it requires no code. It’s a drag and drop system on a layout. The second is pure XML. The third splits into both options, but I’m assuming the only people who work in it are the same lunatics who keep 20 tabs open for browsing in Chrome.
I am not a lunatic, so let’s go to Design View.
In the design area, you can see that this layout has one line of text (Hello first fragment) and one button (Next). Check out the component tree, and you’ll see them listed. Clicking them will activate the text or button in the attribute pane so that you can customize pieces of it, like background colors and fonts.
Step 7. Change the text. The tricky part about this is you don’t want to change the text in the attribute pane. You might have noticed that the text field reads @string/hello_first_fragment. That’s because the text for the app is all saved in a different file under res/values/strings.xml.
The grossest thing you’ll see today is that .xml file. There’s lots of <tags> happening. Just remember, text in code is a data type called string. The XML stores it like this:
<string name =”Whatever_You_Call_String“>Text You Want Displayed</string>
When you place it in the design area, you’ll refer to it by string name, not the text. So @string/Whatever_You_Call_String.
Step 8. Fire up the fragment_second.xml file. We’re finally going to use the Palette. This section houses things like text, buttons, and images that can be added to your layout without writing any code. Drag and drop a new text box into your design area, and you’ll see it appear in the component tree. Click the red warning icon and scroll down to the hardcoded text warning to fix it.
Step 9. To fix the hardcoded text warning, expand it in the error pane and click Fix. That’ll open an Extract Resource window. Remember, the resource value is what will actually display as text. The resource name is just what we’re calling the data in the code. I’m going to call the resource answer and the resource value “A bottle.”
Step 10. Almost done. There’s still a warning in there. The Missing Constraints in ConstraintLayout. Constraints tell Android where to position the text. If you don’t have these, the text is going to default to the upper left hand corner. That’s no good.
Using these constraints properly is an art all unto itself, but there are ways to cheat a bit. The Remove All Constraints and Infer Constraints buttons are wonderful tools. After removing the constraints, you can adjust the layout and then hit Infer Constraints to let Studio do the work.
Alternatively, you can add guidelines to help keep things in place. These can be placed at specific distances from the top or sides. If you double click the placement circle after positioning, it’ll display as a percentage. Then you can place your text or buttons, and double click circles on the edges to add a constraint.
Step 11. Try it. Before you do this, you’ll have to enable USB debugging on your Android. Go to Settings on your device and find About Phone. Scroll down to Build Number and start tapping it (around 7 times), and it’ll unlock Developer Options in your settings. Once you have that, turn on USB debugging.
Now plug your Android into your computer, pick your device, and click the Run App icon.
Don’t be surprized if this takes a while. Once it’s done, you should have a new app on your Android called Riddler.
This is the result after tweaking the background colors in the attribute pane.
More tutorials to follow soon.
gifGuide2Code 