Android Tutorial, Part 3: Activities and Defining UI in XML

[pinoyprogammer]

Hi all! This is the third part of this tutorial series to teach newbies to develop apps for android using its native language Java and the official android IDE Android Studio. You are free to use and share, and spread this tutorial with or without permission as long as you would link and give attribution to the source material.

If you haven’t seen Part 1 and Part 2, please read that first so, we’ve set up git, are we ready to create our app?

Before we make any changes, let’s create a git branch first. We’ll be doing this for every feature we make.

VCS > Git > Branches > New Branch.

let’s name it “feature/splash-screen” (without the quotes, and this text of course)

Nothing happened? Check the lower right corner of your screen. You’ll see that you are now on the feature/splash-screen branch. Any changes that you make on this branch is specific to this branch only. Your changes her will not affect any other branch unless we “merge” them. No more copy and paste to ensure that you don’t break anything with your changes.

So... what the hell is an Activity? Let’s start with our example, on the first part of this tutorial when we created our android project, I asked you to select the “Empty Activity” template for our SplashScreenActivity, then it created a Java file and an XML file. Let’s take a closer look at our Java file.

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash_screen);
    }
}

The first line says that our class SplashScreenActivity extends AppCompatActivity. Extends defines that SplashScreenActivity is a subset/subclass/instance of AppCompatActivity. An Activity represents a single screen of our App just like a “Window” on desktop applications and a “Web Page” on Websites or Web Apps, that means that all of our user interface is created within the Activity.

You can see that the only thing that our SplashScreenActivity contains for now is a method named onCreate(). The Activity has a lifecycle, onCreate() is called when the activity is starting. This is where most initialization should go. You are probably wandering why there is an “Override” at the top of our method declaration with an “@” sign prefixed on it. This is an annotation. The “@Override” annotation marks that our onCreate() method replaces the onCreate() method of the super class. The super class is the parent class of the current class, that means the super class of SplashScreenActivity is the class that it extends, thus, it’s parent class is AppCompatActivity. On our override onCreate() method we call it’s super class’ onCreate() too. This means that everything on the parent class’ onCreate() method is executed.

setContentView(R.layout.activity_splash_screen);

On this line, we are setting the XML layout activity_splash_screen as the definition of the user interface of our SplashScreenActivity. Let’s open it, and you will see something like this:

Click on Text on the bottom part and you will see something like this:

What we have here is a TextView that is contained in a RelativeLayout. A TextView is a type of view that contains text (Thanks captain obvious!). There are different types of Layout, the most commonly used are LinearLayout, RelativeLayout, a FrameLayout. A RelativeLayout, on the other hand, is a Layout where the positions of the children can be described in relation to each other or to the parent.

On any Layout, if you don’t specify the position of the View, it will naturally be placed on the upper left corner of the screen.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

You can see that the text attribute of our TextView is set as “Hello World!”, let’s change that to “Rate My ISP”, while we’re at it, let’s also add another attribute textSize=”24sp” and textStyle=“bold”

What’s sp? http://bfy.tw/4mh5

sp Scale-independent Pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommended you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

Thanks to this answer: http://stackoverflow.com/a/2025541

You can check the right side of the IDE for preview:

Let’s commit our changes and push our branch to our repository. Right-click and commit changes:

Type “Create splash screen UI” to the commit message, then commit and push, make sure push tags is selected on the next window.

Congratulations! You just learned how to create a user interface using XML and Activity, and also you just learned how to create branches then commit and push it.

Check out the next tutorial for more. Part 4