DAY 4 -''Hello Android" App - my first android app :)

About this App : This is a very simple app which has been given in  http://developer.android.com. I thought this would be the best one for a start.We will have a text box and button in this app. If we write 'Hello Android' in the text box, and click the button, it will get displayed in another window.


Step 1:Creating a new project

• Open Eclipse
• Go -File -New- Project
• Expand the folder named 'Android'
• And select  'Android Application Project'

Application name:App name that appears to the users.

Project Name: Name of project directory and that appears in Eclipse.

Package Name: Name of the app namespace. This should be unique among all the apps installed in the android directory. So usually the reverse order of the publisher or company is used as the suffix.

Build SDK : Platform version against which you will compile your app.By default it is set to the latest version.

Minimum Required SDK : Lowest version of Android that your App supports.To support as many devices as possible, you should set this to the lowest version available that allows your app to provide its core feature set.

• Click Next

• This window is to customize the icon as we wish. Click Next after setting the required icon for the app.
• Now we are asked to select an activity template for our app.Select 'Blank Activity' and click Next.
• Leave all the activity details to default and click 'Finish'.

Step 2: Getting ready with the lay out

Did you get that?? Yes???Awesome..We are good to go :)
 Have a look at the left side package explorer window.You could see many folders created under the name of your app. I have no clue what all those are. We may get a better idea when we learn more.
I decided not to break my head for the time being and just to proceed with the next step of  the tutorial.

Now double click the activity_main.xml tab.

In this page we are gonna design the look of our application. As explained earlier we have to put a text box and a button in the first screen .

Delete the code already present and paste the code given below .

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".DisplayMessageActivity" >
  
 <EditText android:id="@+id/edit_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendMessage"
        android:text="@string/button_send" />

</LinearLayout>

Explanation

Linear Layout:

A Layout that arranges its children in a single column or a single row.' android:orientation="horizontal' is used to

 set the direction of the row.

Edit Text :

This is a user editable text field. 

android:id=@+id/edit_message :This provides a unique identifier for the view, which you can use to reference the object from your app code.

 (@) - required when you're referring to any resource object from XML.

id - resource type

edit_message - the resource name.

 android:hint :This is a default string to display when the text field is empty

Defining a string: 

For example : android:hint="@string/edit_message"

 Here the value is taken from a string whose name is 'edit_message'. Let us see how to 

define a string with a value.

Go to res - Values- Strings.xml

Click Add button.Give name -'edit_message'and value - 'Enter a message'.  

Create one more string with name as 'button_send' and value as 'Send'.

These strings are being used in the xml  above. Without this declarations, it will throw an error when compiled.

 

So after this, we will get a screen having a text box and a button.

 

Step 3:  Respond to the 'Send' Button

In the activity_main.xml ' android:onClick="sendMessage" ' is used to respond to the Send button. This specifies which method to be called(sendMessage) on the click event of the button.

Form the MainActivity dropdown (as shown in the image above) select 'Open Main Activity' which will open MainActivity.java file.

Add the following code at the end.

  /** Called when the user clicks the Send button */

    public void sendMessage(View view) {
        Intent intent = new Intent(this, DisplayMessageActivity.class);
        EditText editText = (EditText) findViewById(R.id.edit_message);
        String message = editText.getText().toString();
        intent.putExtra(EXTRA_MESSAGE, message);
        view.setBackgroundColor(0xFF00FF00 );
        startActivity(intent);
    }

So when button is clicked

• sendMessage function is called.
• An intent is created which will point to the activity that has to be started on send button's click event.
• The message from edit_message string will be retrieved.
• That message is also added to the intent.
• And intent is passed to the activity.An Intent provides a facility for performing late runtime binding between the code in different applications. Its most significant use is in the launching of activities, where it can be thought of as the glue between activities. It is basically a passive data structure holding an abstract description of an action to be performed.

Step 4: Creating second Activity

 create a new activity using Eclipse:

1. Click New in the toolbar.In the window that appears, open the Android folder and select Android Activity. Click Next.Select BlankActivity and click Next.Fill in the activity details:
2. • Project: MyFirstApp
   • Activity Name: DisplayMessageActivity
   • Layout Name: activity_display_message
   • Navigation Type: None
   • Hierarchial Parent: com.example.myfirstapp.MainActivity
   • Title: My Message
   Click Finish.
   
   
   
   
   

 Step 5: Receive intent and display the message.

•  From layout, select activity_display_messgae.xml.
• From Displaymessage dropdrown select 'open DisplayMessage' which will open 'DisplayMessageActivity.java file.
•  Paste the following code there to get the message from intent and to display it on screen.
•  package com.example.my.first.app;
  import android.os.Bundle;
  import android.app.Activity;
  import android.content.Intent;
  import android.view.Menu;
  import android.view.MenuItem;
  import android.widget.TextView;
  import android.support.v4.app.NavUtils;
  
  
  
      public class DisplayMessageActivity extends Activity {
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
  
              // Get the message from the intent
              Intent intent = getIntent();
              String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
  
              // Create the text view
              TextView textView = new TextView(this);
              textView.setTextSize(40);
              textView.setText(message);
  
              // Set the text view as the activity layout
              setContentView(textView);
          }
      }
  Thats it..Our App is ready . We can run that now.But before that we have to set a virtual device to run it.For that follow the steps below 

 Launch the Android Virtual Device Manager:In Eclipse, click Android Virtual Device Manager from the toolbar.

  

• Click NEW
• Fill in the details
• Click Create AVD
• Select the Virtual Device created
• Click Start 

Step 6 :Running the Application 

To run the app from Eclipse, open one of your project's files and click Run from the toolbar. Eclipse installs the app on your AVD and starts it.Enter the message and get it displayed as shown below.

So thats it..Feel so happy to see this output. Got some idea on view,Viewgroup,Textview,edittext,linearlayout,activity,Android emulator etc. All together its a good day ..Bye bye..keep learning..see you with the next activity soon.