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!

android training – Episode 2 - Before you start developing


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. If so, here, we want to talk about a few things that are not just about android development, but development in general.

Your Computer

Your computer is by far the most important friend in your journey to become a developer. It is like your boyfriend/girlfriend. That means, you should take good care of it otherwise your boyfriend/girlfriend will leave you hanging when you need him/her the most.

What does taking care mean?

  • Ensure that your computer has an always on internet connection. As you will learn as this training progresses, developing without internet connection is impossible. Ensure that you have a decent internet connection.
  • Viruses! For the sake of god, please do not just plug in any and every pen drive into your computer. Keep your antivirus updated.
  • Free disk space – Ensure that your computer has at least 50 GB of free space in the C: drive. Do not fill it up like crazy.
  • Wireless Keyboard/Mouse – Please make sure that your computer and especially if you have a laptop, you use wireless keyboard and mouse. Today, you can buy a wireless keyboard and mouse for less than a 1000 bucks. Please become wireless. Also, don’t type on the laptop keyboard. It will hurt your hands, and make you less efficient.
  • UPS – If you are using a desktop, get a basic UPS that will at least give you enough time to shut down the PC when you are working.

Knowledge of Java

Android is a platform, an operating systems. On top of it runs apps. Our training reference app ‘alert nildana’ is one such app and it runs on top of android. The programming language used to develop apps for Android is Java.

The big question is, do you need to know Java? What if you are coming from a C background or C++ or C#? What if you have never coded before?

There is no definitive answer, but rather an explanation. If you know Java, then you will really have a easy time understanding this training program. Like, really easy. If you know any other language, especially C++ and C# (Object Oriented Programming Languages), then you can figure out most of the code with some difficulty.

If you don’t know any programming language, it will be tricky but not impossible. Well, nothing is impossible.

Android Studio

While this tutorial was being written, the officially supported IDE for android development is Android Studio. For those who are new, IDE (Integrated Development Environment) is a software used for developing applications. Each platform has its own IDE. For instance, if you are building apps for web and desktop, you can do using Visual Studio IDE. Coming back to Android Studio, yes, Android Studio is the IDE you will be using.

Google Developer Account

If you are serious about android app development, you should get yourself an account for the Google Play Store. Do that right away.

Credit Card

Yes, it seems silly to mention credit card here but you will eventually need to make some purchases and credit card is the only way to do it. So, borrow one from your parents or brother or sister. Keep it handy

Well, those are all some ‘things’ I wanted to share before we just head first into coding. If you are ready, move on to Episode 3, “Setting up your computer”.

Follow me on twitter, facebook and instagram for more updates. Thanks!

android training – Episode 4 - Hello World – Part I



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 3. Now, it’s time to build that hello world project.

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/helloworld2

If you don’t know about GitHub, check out our blog post here - http://blog.studynildana.com/post/study-nildana-and-github

Here is what you will see when you run Android Studio for the very first. Select the option that is selected in the blue circle. This will create a new project for you.