jay's old blog

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

android training – Episode 7 – page navigation



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

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

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.

  • Navigating from one activity to another activity
  • Send data from one activity to another using ‘Bundle’ object

In this app tutorial, we will show you how to go from one app page (or activity) to another app page (or activity). This is a basic level of skill needed in building apps because most apps require you to move between activities/app pages. Further, we will also show you how to send simple data from one activity to another activity using this object called as ‘Bundle’. It is useful for simple data operations.

Of course, if you want to send huge sets of data between activities, a better option would be to use SQLite but that is something we will talk about some day in the future.

As always, here is how your new project should look. If you are not sure how we got something like this, refer our training episodes 1 to 6. I want to draw your attention to the circle. That is where all the layouts (the xml part of an android activity) are located. We are looking at navigating to another activity, so we need to add a new activity.




I just want to add here that an android activity is actually a combination of two pieces.

  • Activity – First Piece – The xml page that forms the UI part and is where we put buttons, TextView and all the visual stuff. This will have an extension of “.xml”. For example, MainActivity.xml
  • Activity – Second Piece – The java page that forms the code part where all the backend action takes place. This will have an extension of “.java”. For example, MainActivity.java

Okay, coming back, there are so many ways to add a second activity. We will do something like this, and follow the pictures in sequence. Start off by “right clicking” the “layout” on the project directory, then selecting “new” and then selecting “activity” and then selecting “blank activity”.





After you do that, you will see something like this. Don’t do anything extra. Leave everything as it is, and hit “Finish”.




Now, you have a new activity called “Main2Activity” which adds two files to your project. One .xml and One .java file, as explained before. Here is the picture to show where they are located.




Now, I am going to do the following.

  • Add some basic text in both the activities. This has already been covered in earlier episodes.
  • Add a button in the first activity. On pressing this button, the app will go from first activity to the second activity. Adding buttons is also covered in earlier episodes.
  • In the button, I will add code that will allow me to go to second activity. This I will explain in detail.

So, here is my OnClick function for the button. This is how it looks before I add the code that will perform page navigation.

            @Override
            public void onClick(View view)
            {
                //This is where I will write my code that will move the app from this activity to the next one

            }//end of OnClick function

In order to perform page navigation, I need to use Intents. Someday, I will write a detailed blog post about Intents. For now, understand that Intents (short for Intentions) are something that will use whenever you wish the app to do something for you. Right now we “Intent” to navigate to the second activity.

So, I will fist create an Intent, and assign it a purpose. Check out the code snippet, and the code comments to understand what is happening. This is how it will look after I have added the code that will perform page navigation.

            @Override
            public void onClick(View view)
            {
                //This is where I will write my code that will move the app from this activity to the next one
                //I now create a intent object, and then provide it with the application context and the class
                //of the activity i want to go to
                Intent in = new Intent(getApplicationContext(),Main2Activity.class);

                //after assigning the intent, I will then start it.
                startActivity(in);

            }//end of OnClick function

Now, let me run the app, and see if the page navigation is actually happening. Here is how app looks upon launching.




And it has come to the second page/activity, after pressing the button




Alright then! Our app is doing simple page navigation. Basic navigation is of no use, if we cannot send some data. Next, we will send a simple sentence (string) from the first page/activity to the second page/activity. To do so, as informed before, I will use a Bundle. You see, a bundle uses a simple database that is based on the key/value principle of storing data.

Perhaps someday, we will write a detailed blog post about key/values. Till then, the basic concept is that when storing data, we will first create a ‘key’ and then assign some value to it. Later, we use the ‘key’ and then extract that value from the Bundle.

Here is the code that will use the Bundle, a key and its value. Follow the comments to understand what is happening. In this code, I am sending the words “page navigation tutorial from study nildana” from the first activity to the second activity. Please note that this code is in the “MainActivity.java” file.

                //I now create a intent object, and then provide it with the application context and the class
                //of the activity i want to go to
                Intent in = new Intent(getApplicationContext(),Main2Activity.class);
                //after assigning the intent, I will then start it.

                //I wish to send a string that contains the sentence "page navigation tutorial from study nildana"
                //so created a string variable that will hold this sentence
                String sentence_to_send = "page navigation tutorial from study nildana";

                //Now, putting this String variable into the bundle that will go with the intent
                //Remember the key and value thing we talked about in the blog?
                //Here the key is on the left side and the  name is 'sentence_from_first_activity'
                //The corresonding value is the variable 'sentence_to_send'
                in.putExtra("sentence_from_first_activity",sentence_to_send);

                //now, when this intent is started, the bundle we sent will go to the next page.
                startActivity(in);

Now, I need to move to the second activity, and collect this bundle. Then, I need to collect the string/sentence I want, using the key I used in the first activity. Check out the code snippet and the comments to understand what is happening. Please note that this code is in the “Main2Activity.java” file, which is the target of this intent.

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

        //first I need to create a bundle object to collect all the extras
        //here i have creaed a bundle and also collected all the sent values
        Bundle b = getIntent().getExtras();
        //now I will use the key that was used in the first activity to collect my string value
        //the collected string value has been stored in the variable called 'temp'
        String temp = (String) b.getCharSequence("sentence_from_first_activity");

        //now I will set the text of the TextView object that is already in this activity

        TextView textView = (TextView) findViewById(R.id.textView_second_activity);
        textView.setText(temp);
    }

Now, let me see if the app actually sends the string by running the app.




And, look at that. The information did come through the bundle.




Well, there you go. We now have a simple app that will navigate from one page to another. It will also carry some data with it. As always, don’t forget to download the code from our GitHub repository right here - https://github.com/Jay-study-nildana/sn_tr_activity_nagivation_2

Next episode, we are going to show a simple calculator that will use all the concepts that we taught you from Episode 1 to Episode 7. In fact, one of study nildana students will be building that app. 

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

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.