jay's old blog

this blog will be deleted soon - please visit my new blog - https://thesanguinetechtrainer.com

android training – Episode 4 - Hello World – Part II



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 additional modifications.

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 –http://blog.studynildana.com/post/study-nildana-and-github

Topics Covered In This Episode

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 nildana”
  • 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)

Let’s Start

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 World

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 like this.




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 delete it.

After 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 neat, eh?




In a standard ‘activity java’ file, you will see at least the following three things.

Package

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

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.

Extra Functions

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 this.




Now, when I build the app and run it, you will see something like this.




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 this.




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!
Comments are closed