Hello and welcome back. May name is Jay, and I am your
trainer for today. We are going to assume that you already went through Episode
1 to 4 Part I. Now, it’s time to build that hello world project, with some
We are jumping into development now. That means, the page
will be heavy with screenshots. I have tried my best to use low sized images so
that you can load this even on a 2G connection. If you are having issues
loading any of our tutorial pages, contact us. You will find the contact
information, at the end of the blog.
You can download the code for this project, from GitHub,
right here –https://github.com/Jay-study-nildana/helloworld3.git
If you don’t know about GitHub, check out our blog post here
Topics Covered In
In this episode, we will look at doing the following.
- Remove the menu option in the default project.
- Remove the "app title" making the app "fullscreen"
- Adding a text display widget
- Making the text display widget show some text, for example “study
- Using string values for the text (this is also something we will do in a future episode)
- Deploying the app to your phone (actually, we are taking care of this next Episode)
I have already how to create a new project and all that in
the previous episode. I will jump straight to the adding text display part now.
If you need a revision, visit Part I of this episode, right here –http://blog.studynildana.com/post/study-nildana-android-training-episode-4-hello-world-part-i
This is how your new project window should look. Immediately,
focus on the part that I have circled in blue color. That is where I will find
the ‘TextView’ widget. To know a little bit more about TextView widget, check
out this blog here – http://blog.studynildana.com/post/study-nildana-android-training-textview
Also, do you see that red circle on the top left corner?
Yes, ensure that you have selected ‘android’ as the option for your project
tree. We will be using that also in a few minutes.
Now, our idea here is to get the app to show “study nildana”
when the app is run. Before doing that I want to do a few things.
First Thing – Remove Hello
As you know already, the app by default, will have ‘hello
world’ on the screen. We don’t want that and hence, we need to delete. There
are so many ways of deleting this. I will take you through all the options that
I know about.
Option 1 – delete from the design window.
In the above picture, I have selected the hello world
widget, with the mouse. Then, hit delete on the keyboard, and it will be gone!
Option 2 – delete from the XML code
Do you see that option called ‘Text’ at the bottom right
corner? Yes, if you press that, you will be able to see the XML code for the
layout which contains the ‘hello world’. When you click on Text, you will see something
Yes, there you go. You see this XML page is the exact
reflection of the design that you saw earlier. That means, if you are good in
XML (or HTML), you can directly add widgets and other UI elements right here in
the code and they will show up in the design.
Anyway, right now, we just want to get rid of that hello
world. So, select that code and then delete it.
Option 3 – Delete it from the Component Tree
You will notice that the same TextView widget is present in
the Component Tree as well. Select the hello world TextView from there and
deleting the TextView using any of the above three methods, your design window
will look something like this
On the top right corner, there are some buttons. You will
need to know what they are if you really want to learn app development. Let’s
go through them one by one. There are a total of 7 symbols and I will start
from the right side.
- Gear Wheel – This is the settings the design rendering. You won’t
be using it that much, so forget about it for now.
- Refresh – This will refresh the rendering. If you start
adding UI elements or widgets directly in the XML code, sometimes, the design
view won’t show. Also, you will occasionally get rendering errors. In those
circumstances, you this button to refresh the design view.
- XML code – This button will help you go the XML code view of
the same design. As you have seen above, you can do the exact same thing by
selecting on the bottom right corner as well.
- Zoom out – use this to reduce the zoom of your design view
- Zoom in – use this to increase the zoom of your design view.
- Fit height – use this if you want to fit the entire device
in your screen, based on height.
- Fit width – use this if you want to fit the entire device in
your screen, based on width.
All right then, you know about the parts of the design view.
Now, before we add a TextView and show “study nildana” in the app, let’s make
some observations. For this, I will need to run this app in the emulator. Note –
by the end of this episode, you will learn how to deploy the app to your phone
also, but for now, let’s stick to the emulator.
You see that ‘3 dot’ thing on the top right corner (arrow
with the number 1). Well, that is used to build your own menu. If you installed
the final version of ‘alert nildana’, you will notice that we are not using
that menu. So, one of the first things we have to do is remove that menu.
To do that, you need to open the activity page of the design
page. You will notice that the page will have an extension of “.java”. You can
find this ‘java’ file, in two locations. Here is a picture showing the same.
Once I select the java file, I will see something like this.
And, this is also the first time you are looking some cool java code. Pretty
In a standard ‘activity java’ file, you will see at least
the following three things.
This is pointed by arrow number 1. This is the package name
of your project. You will see this almost every app, and this is also the same
package name that will be displayed when you publish in the store as well.
Remember that domain thing when you created a new project? Well, this package
name is derived from that.
Imports are all the libraries that are being used in the
app. As your app grows, and you use more libraries, you will add all the import
libraries you need right here, at the top. Right now, you don’t need to add
anything because the Android Studio has already taken care of that.
There are a lot of functions that you will be overriding (don’t
worry about overriding and things like that, right now. Just go with it). For
now, the code is overriding two functions that are related to that ‘three dots’
that we talked about earlier.
So, lets delete the two functions – onCreateOptionsMenu and onOptionsItemSelected.
After deleting, the same file should look something like
Now, when I build the app and run it, you will see something
See that? That menu thing is gone! Next, let me ask you to
look at this. Right at the top of the app, it shows the app title. If you go
back to the ‘alert nildana’ app, you will see that it does not have any such
titles. So, I would like to remove that as well.
In order to get rid of that app title, we will have to make
the entire app “full screen”. I don’t know why but I prefer full screen apps
than the one where the title is shown at the top.
To do this, you will need to modify the “Android Manifest”
file. The Android Manifest file, is another file you will be interacting with a
lot. For now, we will just use it. You will find more details about the
manifest file at this blog, right here.
Locate the manifest file using the following picture. Just
to remind you, ensure that you have chosen “android” as the option for your
Project structure on the left side.
Once you open the manifest file, you will see something like
Find the line called - android:theme="@style/AppTheme"
And change it to - android:theme="@style/Theme.AppCompat.Light.NoActionBar"
And here is how you should make it.
Now, when I build and run the app, this is how it will look.
There you go, the full screen app with no menu or the app
title to distract.
To summaries, so far we have done the following
- We have deleted the default ‘hello world’ thing that comes
when you create a new project.
- We have removed that menu, which we are not using
- We have removed the title bar at the app, making the app full
screen and look clean.
Okay then, now, I want to make the words “study nildana”
appear on the screen. This will contain two steps.
Step 1: Add TextView widget to the design UI. You will do
this in the “activity_main.xml” file. So, open that file and simply drag and
drop a “Plain TextView” from the Palette on the left. Here is a picture that
should help you.
After dragging that widget, you will then change the ‘text’
in the properties window to “study nildana” as shown in the below picture
Now let’s build and run it. You should see something like
this and that completes our simple “hello world” training episode.
That takes care of our hello world training. As always, don’t
forget that you can download this app code from github - https://github.com/Jay-study-nildana/helloworld3.git
In the next episode, Episode 5 – Deploy to Phone, we will
talk about deploying your app to the phone and also debugging it live on your
phone. Follow me on twitter, facebook and instagram for more updates. Thanks!