Never miss a beat

Join my newsletter.

Zero to Hero: Android App - Part 1 - Views

Posted: 9/15/2016

Tagged under: androidzero-to-hero

App development is never a straight-forward task. In fact, apps are built from many components that handle specific needs. It’s up to you, the app developer, to determine which components you need, how they should be implemented, and how they should interface with the rest of the app. The most common component is called a View.

Android Views

Look around. What do you see? Sure, the specifics of what you and I see are different, but they both represent the same concept. We both see things that have some visual representation and are usually something we can interact with. In Android, views represent the same thing – They’re essentially just the part of the app a user can see and interact with.

If you’ve never built an application before, Android or other, you might be a bit confused. Well, there’s more to Android Apps than just the views! In fact, there’s a lot going on behind the scenes of your views, but this is all logic that the developer — you — need to worry about and users will never know about. If you’ve never built an app before, you might not realize that there’s so much that goes on behind the scenes. Now that we’ve covered the importance of views, let’s start a new application and make our view!

A New Android Application

If you haven’t already, launch Android Studio. If you’ve played around with Android Studio since the last post and need to get back to the launch screen, you can use the top-most menu to close your current project. Next, click Start a new Android Studio Project.

You’ll be asked to fill out a few fields for the next part of this tutorial. These aren’t super complicated so I’ll go through them quickly:

  • Application Name: type Turnip. This is the name of our application.
  • Company Domain: type yourname.com, but using your actual name. For me, this is bradcypert.com. Don’t worry if you don’t actually own that domain.
  • Project Location: Leave the default value. This is where all of your code will be stored.

Now, click “Next”. In this next view, we’re just going to check the box for Phone and Tablet and set the Minimum SDK to Android 5.0 (Lollipop). This is where you would add support for other types of devices, like watches or Android TV, but we’ll skip that for now. You can always add support later, too. Go ahead and click “Next” once more.

In the next screen, you’ll be presented with the option to “Add an Activity to Mobile”. We’ll get into Activities in our next tutorial, but for now, click “Empty Activity” and then click “Next”.

Finally, we’ll have one more set of prompts. For activity name, type: AddTaskActivity. Make sure Generate Layout File is checked. The Layout name should be auto-set to activity_add_task. Now, click finish!

Technically, you’ve just built your first Android app, even though doesn’t really do anything – yet. We’re going to change that.

A Few Tips Before We Start Coding

Android Studio can be overwhelming, especially if you’ve never used an IDE (Integrated Development Environment) before. There are a lot of buttons and a massive list of files. I’m going to do my best to give you exact instructions, but here are a few tips:

  • If I say “Open TaskListActivity.java”, you can double-press the shift key to open the file finder. Then, type TaskListActivity.java and hit enter. It’ll open it for you.
  • The Build Button is the green button at the top that looks like the “Play” button that you’d see on Spotify or Netflix.
  • We’ll usually use Android Studio, but there are a few times where we’ll want to use our file explorer (Explorer on Windows; Finder on Mac). I’ll clearly state when we’re going to use our File Explorer so pay close attention for that!

Our First Android View

Views in Android are written in XML. If you have little or no experience with XML, fret not! It’s actually really basic to use! Although I won’t go over the intricacies in this post, there are a few things worth mentioning:

  • XML is represented as a tree with elements. This means that some elements contain other elements.
  • XML elements have attributes that define how we can interact with them or how we see them in our Android Application.

In the right-most pane, you should see some Java Code. At the top of that pane, you should see some tabs opened. Click the tab labeled activity_add_task.xml. You should see something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.bradcypert.turnip.AddTaskActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>

If you don’t see that, but instead see a picture of an Android Phone that says “Hello World” click the “Text” tab at the bottom of that pane.

Go ahead and delete it all. We’re going to build our view from scratch and I’ll talk about each element as we add them. The first thing we want to add is the <xml> tag.

<?xml version="1.0" encoding="utf-8"?>

This specifics that the version of XML used to parse this document is version 1.0, and it’s encoded in UTF-8. Don’t worry too much about fully understanding what that means, just know that each XML document that we’ll add needs this line.

Next, we have to define the base layout that we want for our view. We’re going to add a LinearLayout. A LinearLayout tells our Android Application that the direct children of this view should be rendered in a vertical line. Add this code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.bradcypert.turnip.AddTodoActivity"
android:orientation="vertical">

There’s a lot happening in this element. Let’s talk about each attribute one at a time.

  • xmlns:android defines the default android namespace. This is used to resolve the rest of the child elements and their attributes. For now, just know that it’s needed on every root element.
  • xmlns:tools defines the namespace for our tools. You can usually leave this one off, but you get a lot of benefits for having it here as well, so we’re going to keep it.
  • android_layout_height & android layout_width define the height and width of the application. match_parent tells the Application that this view is going to be the same size as it’s parent. This view has no parent, so it’s going to be the size of the full screen.
  • android:paddingWhatever defines how much space is in between this view and it’s parent. The value of this is usually a number followed by dp, so something like 10dp. This is valid, but we have another alternative as well. If we want to easily reuse a value, we can make a reference to it. That way, if we ever want to change the value in every place that uses it, we can just update the reference to be the new value. For us, that reference looks like @dimen/activity_horizontal_margin or @dimen/activity_vertical_margin. These are values provided to us by the Android system.
  • tools:context tells the Android Application’s tools that this view is intended to be used with a specific activity. In this case, com.bradcypert.turnip.AddTodoActivity. We’ll talk more about activities in our next tutorial.
  • android:orientation defines the orientation for this view. Vertical means that the children will be in separate rows; horizontal means that the children will be in separate columns.

Phew. A mouthful! Next, we’re going to add something called an EditText. An EditText is simply a way for users to input text. We’ll use this as a means to let users name the task that they want to complete.

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/addNewTaskName"
android:textSize="26sp" />

You might notice a few different things here. For example, we’re using wrap_content instead of match_parent for the height. That tells the element that it should only be as tall as it needs to be for all of it’s content to be visible. We’re also adding an android:id. An ID provides a way to uniquely reference this element from the rest of our application. This will be very relevant later once we need to get the text that the user input into this element. android:textSize determines how big the input should be. Text Size is in a unique unit as well, called SP. Remember this: Text is SP. Everything else is DP. If you’re XML-savvy, you’ll also notice that this element is self-closing, meaning it doesn’t need a closing tag. We didn’t add a closing tag for the LinearLayout either, but we will need to in the near future.

Next, we’re going to add some space in between our views. There’s actually several ways to do this, but one of the most obvious ones is creating a new Space element. So let’s go ahead and do that.

<Space
android:layout_width="20dp"
android:layout_height="20dp"/>

This tells our Application that I want a space of 20DP tall to be in between the elements we just added and the elements that we’re about to add. Very simple!

Next, we want to add something called a switch. Android switches come with a few defaults setup for the text that it’s displayed, and while that’s something we can overwrite, we’re just going to choose to leave the text off of the switch and create a text element instead. Basically, we want these to be side by side so they look as if they belong together. To do that, we’ll leverage a tool that we’ve already used, called a LinearLayout. Remember how we can define the android:orientation for a linear layout? That’s exactly what we need.

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_gravity="center_vertical">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Want a reminder?"
android:id="@+id/textView"
android:layout_weight="0.60"
android:textSize="24sp"
android:layout_gravity="center" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/reminderSwitch"
android:checked="false"
android:showText="false"
android:layout_gravity="bottom" />
</LinearLayout>

I won’t go over all of these properties, as you should be able to figure most of them out by now, but I’ll highlight a few things:

  • android:orientation being set to horizontal is key to getting the two elements to be side by side.
  • android:layout_gravity is used to vertically center views in this case. It can be used to align child items in other ways, too.
  • We create a new element called TextView. The entire purpose of this element is to show text to the user. We set the default text to “Want a reminder?”
  • The width of this TextView is 0dp. Once you set a width to 0dp, the weight of the view takes over. The weight is a way to define how much of the parent container it takes up for whatever value is set to 0dp. So, in this case, we’re saying we want the TextView to take up 0.60 or 60% of the parent view.
  • We define an element called Switch. A switch is a slidable switch (you’ll know it once you see it!).
  • We set the ID of the switch. We’ll need this later.
  • We turn off showText, since we have our own implementation to show text next to this Switch.

We’ve covered almost all of the elements and their property, so this next block of XML to add will be the biggest block yet, however, we only need to talk about Buttons and Button types. Here we go!

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="How frequently do you need to do this?"
android:id="@+id/textView2"
android:textSize="18sp"
android:layout_marginBottom="20dp"
android:textAlignment="center" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<ToggleButton
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Daily"
android:textOff="Daily"
android:textOn="Daily"
android:background="@drawable/select_button"
android:textColor="@color/select_button_color"
android:id="@+id/toggleDaily"
android:elevation="2dp" />
<ToggleButton
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Weekly"
android:textOff="Weekly"
android:textOn="Weekly"
android:background="@drawable/select_button"
android:textColor="@color/select_button_color"
android:id="@+id/toggleWeekly"
android:elevation="2dp" />
<ToggleButton
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Monthly"
android:textOff="Monthly"
android:textOn="Monthly"
android:background="@drawable/select_button"
android:textColor="@color/select_button_color"
android:id="