Thursday, August 1, 2013

Android Hello World Part 1

I learnt to develop my Andriod helloworld app from the beautiful contents of the site http://developer.android.com/training/basics/firstapp/index.html

 

Following is the understanding I obtained after creating the hello world app

 

1.      Download the Android SDK from http://developer.android.com/sdk/index.html

 

2.      Open up the sdk folder. You will see an eclipse folder inside it. Open the eclipse and click new.

Fill up the following information in it

 

3.      Click Next.

4.      Now you can select an activity template from which to begin building your app.

For this project, select BlankActivity and click Next.

5.      Leave all the details for the activity in their default state and click Finish.

 

Few directories and files in the Android project


AndroidManifest.xml - The manifest file describes the fundamental characteristics of the app and defines each of its components. 

 

One of the most important elements your manifest should include is the <uses-sdk> element. This declares your app's compatibility with different Android versions using the android:minSdkVersion andandroid:targetSdkVersion attributes. For your first app, it should look like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ... >
   
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" />
    ...
</manifest>

src/

Directory for your app's main source files. By default, it includes an Activity class that runs when your app is launched using the app icon.

res/

Contains several sub-directories for app resources. Here are just a few:

drawable-hdpi/

Directory for drawable objects (such as bitmaps) that are designed for high-density (hdpi) screens. Other drawable directories contain assets designed for other screen densities.

layout/

Directory for files that define your app's user interface.

values/

Directory for other various XML files that contain a collection of resources, such as string and color definitions.

When you build and run the default Android app, the default Activity class starts and loads a layout file that says "Hello World." The result is nothing exciting, but it's important that you understand how to run your app before you start developing.

Run on a Real Device


If you have a real Android-powered device, here's how you can install and run your app:

1.    Plug in your device to your development machine with a USB cable. If you're developing on Windows, you might need to install the appropriate USB driver for your device. For help installing drivers, see the OEM USB Drivers document.

2.    Enable USB debugging on your device.

o    On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.

o    On Android 4.0 and newer, it's in Settings > Developer options.

Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go toSettings > About phone and tap Build number seven times. Return to the previous screen to findDeveloper options.

To run the app from Eclipse:

1.    Open one of your project's files and click Run  from the toolbar.

2.    In the Run as window that appears, select Android Application and click OK.

Eclipse installs the app on your connected device and starts it.

 

The graphical user interface for an Android app is built using a hierarchy of View and ViewGroup objects. View objects are usually UI widgets such as buttons or text fields andViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.

Android provides an XML vocabulary that corresponds to the subclasses of View and ViewGroup so you can define your UI in XML using a hierarchy of UI elements.

Building a Simple User Interface


Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.

In this lesson, you'll create a layout in XML that includes a text field and a button. In the following lesson, you'll respond when the button is pressed by sending the content of the text field to another activity.

Add a Text Field


To create a user-editable text field, add an <EditText> element inside the <LinearLayout>.

Like every View object, you must define certain XML attributes to specify the EditText object's properties. Here’s how you should declare it inside the <LinearLayout> element:

    <EditText android:id="@+id/edit_message"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:hint="@string/edit_message" />

About these attributes:

android:id

This provides a unique identifier for the view, which you can use to reference the object from your app code, such as to read and manipulate the object (you'll see this in the next lesson).

The at sign (@) is required when you're referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name (edit_message).

The plus sign (+) before the resource type is needed only when you're defining a resource ID for the first time. When you compile the app, the SDK tools use the ID name to create a new resource ID in your project's gen/R.java file that refers to the EditText element. Once the resource ID is declared once this way, other references to the ID do not need the plus sign. Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

android:layout_width and android:layout_height

Instead of using specific sizes for the width and height, the"wrap_content" value specifies that the view should be only as big as needed to fit the contents of the view. If you were to instead use "match_parent", then the EditText element would fill the screen, because it would match the size of the parent LinearLayout. For more information, see the Layouts guide.

android:hint

This is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the "@string/edit_message" value refers to a string resource defined in a separate file. Because this refers to a concrete resource (not just an identifier), it does not need the plus sign. However, because you haven't defined the string resource yet, you’ll see a compiler error at first. You'll fix this in the next section by defining the string.

Note: This string resource has the same name as the element ID: edit_message. However, references to resources are always scoped by the resource type (such as id or string), so using the same name does not cause collisions.

Add a Button


Now add a <Button> to the layout, immediately following the <EditText> element:

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_send" />

The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. This button doesn't need the android:id attribute, because it won't be referenced from the activity code.

Make the Input Box Fill in the Screen Width


The layout is currently designed so that both the EditText and Button widgets are only as big as necessary to fit their content, as shown in figure 2.

Figure 2. The EditText and Button widgets have their widths set to "wrap_content".

This works fine for the button, but not as well for the text field, because the user might type something longer. So, it would be nice to fill the unused screen width with the text field. You can do this inside a LinearLayoutwith the weight property, which you can specify using the android:layout_weight attribute.

The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views. This works kind of like the amount of ingredients in a drink recipe: "2 parts vodka, 1 part coffee liqueur" means two-thirds of the drink is vodka.

In order to improve the layout efficiency when you specify the weight, you should change the width of theEditText to be zero (0dp). Setting the width to zero improves layout performance because using"wrap_content" as the width requires the system to calculate a width that is ultimately irrelevant because the weight value requires another width calculation to fill the remaining space.

Here’s how your complete layout file should now look:

<?xml version="1.0" encoding="utf-8"?>
<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">
   
<EditText android:id="@+id/edit_message"
       
android:layout_weight="1"
       
android:layout_width="0dp"
       
android:layout_height="wrap_content"
       
android:hint="@string/edit_message" />
   
<Button
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="@string/button_send" />
</LinearLayout>

In Eclipse, click Run  from the toolbar.

 

You will be able to see a screen like the following in your android. Not necessarily the same

 

No comments:

Post a Comment