Learning Android Development

Second Android App

2015-09-13T09:40:00.000-07:00

Hi! I would like to invite everyone to check out my second published android app. U.S. Flashcards Pro is an easy to use flashcard app of the state names. The flashcards include the 50 state names of the United States of America. It is a great study tool for an exam!

Here is a screenshot of the app:

U.S. Flashcards Android App

Just tap the map to see the state name:

U.S. Flashcards Android App

I also published an ad free version of the app. On this version of the app, the flashcard also includes the following info of the state:

State Abbreviation
State Capital
Largest City
Area
Population
Statehood
State Bird
State Flower
State Nickname
State Motto

Here is a screenshot of the app:

U.S. Flashcards Pro Android App

Just click the info icon to view the state information:

U.S. Flashcards Pro Android App

The free app can be downloaded from the Google Play Store here : U.S. Flashcards App
The PRO app can be downloaded from the Google Play Store here : U.S. Flashcards Pro App

I would appreciate any feedback or reviews. Thank you!

First Android App

2014-02-26T15:19:00.000-08:00

Hi! I would like to invite everyone to check out my first published android app. It is a simple temperature converter. It supports this units:

• Celsius (°C)
• Delisle (°De)
• Fahrenheit (°F)
• Kelvin (K)
• Newton (°N)
• Rankine (°R)
• Réaumur (°Ré)
• Rømer (°Rø)

Just enter the temperature and select the unit from the list. Here is a screenshot of the app:

Temperature Converter Android App

The app can be downloaded from the Google Play Store here : Temperature Converter App
I would appreciate any feedback or reviews. Thank you!

TableLayout

2013-08-23T07:17:00.001-07:00

Hi everyone! For this post, I am going to keep working with the different layouts. On my previous post, I tried out the Grid View layout. Now, I am going to work with the layout called TableLayout. I am going to create a new Android application project named ContactInformation. I will use it to learn about the TableLayout by creating a basic form. The application will also respond to a button and display the user input. This will be the result:

Contact Information Application

The class TableLayout is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.

The class TableLayout allows objects to be arranged into rows and columns. The rows are defined by the class TableRow. The TableRow layout extends LinearLayout and it arranges objects horizontally. If a TableRow object is not used with a TableLayout object, the TableRow object will act as a LinearLayout with horizontal orientation. The width attribute of a TableRow object should be match_parent and the height attribute should be wrap_content.

In a TableLayout, the rows have cells. The cells are added to each row in increasing column order. If a column order is skipped, that cell is set as empty. Each cell can have a View object. Some View object examples are text views and buttons. The number of columns in a TableLayout depends on the row with the most number of cells and the width of the column depends on the widest cell in that column. By using the XML attribute android:stretchColumns or the method setStretchAllColumns(boolean), all columns can be set as stretchable. By using the XML attribute android:shrinkColumns or the method setShrinkAllColumns(boolean), all columns can be set as shrinkable. By using the methods setColumnShrinkable(int columnIndex, boolean) or setColumnStretchable(int columnIndex, boolean), a specific column can be set shrinkable or stretchable respectively. A column set as stretchable can stretch in width to fit any extra space and a column set as shrinkable can shrink to fit the table. A column can be set to hide by calling the method setColumnCollapsed(int, boolean) or using the XML attribute android: collapseColumns.

Let us start by creating a new Android application project named ContactInformation. Go to File in the main menu and select New -> Other. The wizard will start. Select Android Application Project found in the Android folder and click Next.

Eclipse New Android Application Project

In the New Android Application window, I filled it out with the following fields and clicked Next:

Application Name: Contact Infomation
Project Name: ContactInformation
Package Name: com.android.contactinformation
Minimum Required SDK: API 8: Android 2.2 (Froyo)
Target SDK: API 17: Android 4.2 (Jelly Bean)
Compile With: API 18: Android 4.3
Theme: Holo Light with Dark Action Bar

Eclipse New Android Application Project

In the following window, select the checkboxes to create a custom launcher icon, to create an activity, and to create project in workspace.

Eclipse New Android Application Project

Configure the launcher icon any way you like. For my launcher icon, I chose the following and clicked Next:

Foreground: Clipart
Selected Trim Surrounding Blank Space checkbox
Additional Padding: 24%
Foreground Scaling: Center
Shape: Square
Background Color: Dark green
Foreground Color: Light green

Eclipse Configure Launcher Icon

In the next window, select the checkbox to create an activity and select Blank Activity. Click Next. In the Blank Activity window, I left the default values which are:

Activity Name: MainActivity
Layout Name: activity_main
Navigation Type: None

Click Finish and wait for Eclipse to create the project. After Eclipse is done, you can see the project ContactInformation in the Project Explorer and the file activity_main.xml opened in the Graphical Layout.

activity_main.xml Graphical Layout

As you can see, the application is displaying the string “Hello world!” and the file activity_main.xml looks like this:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

</RelativeLayout>

Modify the activity_main.xml file to the following:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="fill_parent"

android:stretchColumns="1"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

</TableLayout>

As you can see, the layout was changed from RelativeLayout to TableLayout, the width of the layout was set to match_parent, and the height of the layout was set to fill_parent. The XML attribute android:stretchColumns was set to 1, so all columns are set to stretchable. Now, let us add a TableRow to the TableLayout:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="fill_parent"

android:stretchColumns="1"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/first_name"

android:inputType="text"

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

</TableRow>

</TableLayout>

In this TableRow, a padding at the bottom is set to 10dp by using the XML attribute android:paddingBottom. This means there would be space underneath the TableRow. First, a TextView is created with the string resource named first_name, which will be created shortly. You should be seeing an error right now, but when the string resource is added it will fixed. Then, a user-editable text field is created using the <EditText> tag. In this EditText, an id named first_name is assigned as identifier for this view. An identifier is needed, so we can later get what the user wrote. By using the XML attribute android:inputType, the EditView type is set to value text. This means the content type of the EditText will be text. Finally, by using the XML attribute android:hint, a hint for the user is set. This means the string resource named hint_first_name, which will be added soon, will be displayed on the text field as a hint on what the user should type.

The form will contain text fields for the first name, middle name, last name, phone, address, and email. Let us add the string resources needed for the text fields. To do this, there are two ways. You can add the string resources using the interface. The interface of the strings.xml file can be found under the res->values folder in the Resources tab.

strings.xml Resources

To add a new resource, click Add. Select String in the new window and click Ok. On the right side, where it says Attributes for String, enter first_name for the Name field and First Name: for the Value field and save the project.

strings.xml

You should now see the string resource first_name on the list. You can delete the hello_world resource by clicking Remove because it will not be needed. You can use this method to add all the string resources that we are going to be using for the project or you can create them by adding each of them directly to the strings.xml file by clicking the tab.

strings.xml

The final strings.xml file will be:

<?xml version="1.0" encoding="utf-8"?>

<string name="app_name">Contact Information</string>

<string name="action_settings">Settings</string>

<string name="first_name">First Name:</string>

<string name="hint_first_name">Enter First Name</string>

<string name="middle_name">Middle Name:</string>

<string name="hint_middle_name">Enter Middle Name</string>

<string name="hint_last_name">Enter Last Name</string>

<string name="phone">Phone:</string>

<string name="hint_phone">Enter Phone Number</string>

<string name="address">Address:</string>

<string name="hint_address">Enter Address</string>

<string name="email">Email:</string>

<string name="hint_email">Enter Email</string>

</resources>

As you can see, a text and hint were created for each text field. Also, a string resource named button_save was created for a button. Now that we have all the string resources needed, let’s go back to the activity_main.xml file to modify it. This would be the final activity_main.xml file:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:stretchColumns="1"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/first_name"

android:inputType="text"

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

</TableRow>

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/middle_name"

android:inputType="text"

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

</TableRow>

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/last_name"

android:inputType="text"

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

</TableRow>

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/phone"

android:inputType="phone"

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

</TableRow>

<TableRow

android:paddingBottom="10dp">

<TextView

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

<EditText

android:id="@+id/address"

android:inputType="textMultiLine"

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

</TableRow>

<TableRow

android:paddingBottom="40dp">

<TextView

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

<EditText

android:id="@+id/email"

android:inputType="textEmailAddress"

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

</TableRow>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"

android:onClick="sendInformation" />

</TableLayout>

As you can see, a TableRow is added for each text field which will contain a TextView and an EditText. Also, the inputType is set to text except for address, which is set to textMultiLine, and phone, which is set to phone inputType. At the end, a button is added with the string resource name button_save created earlier. By using the XML attribute android:onClick for the button, the name of the method can be set. In this case, it is set to sendInformation. This is the name of the method that will be invoked when the button is clicked and it will be implemented soon.

To be able to respond to the Send button, we need to implement the method sendInformation() on the Main_Activity.java file found under src folder. Add the following code after the onCreateOptionMenu():

public void sendInformation(View view) {

Intent intent = new Intent(this

, DisplayInformationActivity.class);

EditText editText = (EditText) findViewById(R.id.first_name);

String firstName = editText.getText().toString();

editText = (EditText) findViewById(R.id.middle_name);

String middleName = editText.getText().toString();

editText = (EditText) findViewById(R.id.last_name);

String lastName = editText.getText().toString();

editText = (EditText) findViewById(R.id.phone);

String phone = editText.getText().toString();

editText = (EditText) findViewById(R.id.address);

String address = editText.getText().toString();

editText = (EditText) findViewById(R.id.email);

String email = editText.getText().toString();

String info = "First Name: " + firstName + "\n" +

"Middle Name: " + middleName + "\n" +

"Last Name: " + lastName + "\n" +

"Phone: " + phone + "\n" +

"Address: \n" + address + "\n" +

"Email: " + email + "\n";

intent.putExtra(EXTRA_MESSAGE, info);

startActivity(intent);

}

The method sendInformation(View) is invoked when the user clicks on the Send button.

Next, an Intent object is initialized. An Intent object provides runtime binding between separate components. In our case, it will be used to start another activity. The Intent constructor has two parameters, the Context and the Class. Because Activity is a subclass of Context, this is used as the first parameter. DisplayInformationActivity.class is used as the second parameter. You should see an error right now, but this class will be created soon and the error will be fixed. The intent will be deliver to this class.

Next, an EditText object is initialized and, by using the method findViewById(), the text field is assigned to the new EditText object.

A new String object named info is initialized to get the text in the field by using the methods getText() and toString() on the EditText object.

Finally, the method putExtra() is used on the Intent object. An Intent object can carry data types as key-value pairs called extras. The method putExtra() has two parameters. The first parameter is the key name, which in this case is EXTRA_MESSAGE and the second parameter is the value, which in this case is the String object named info. The String object info contains a String chain of all the text found on the text fields.

Add the EXTRA_MESSAGE definition in the beginning of the MainActivity.java class:

public final static String EXTRA_MESSAGE = "com.android.contactinformation.MESSAGE";

The package is used as a prefix to ensure the key is unique and will be able to interact with other apps.

Now, we will create the DiplayInformationActivity.java class. In the main menu, select File->New->Other. Select Android Activity and click Next.

Eclipse Android Activity

On the next window, select BlankActivity and click Next. Enter the following for the Blank Activity and click Finish:

Project: ContactInformation
Activity Name: DisplayInformationActivity
Layout Name: activity_display_information
Title: Contact Information
Launcher Activity: Unchecked
Hierarchical Parent: android.contactinformation.MainActivity
Navigation Type: None

As you can see in the Project Explorer, a new activity was added in the package com.android.contactinformation named DisplayInformationActivity.java and a new layout file named activity_display_information.xml was added to the layout folder. Go to the DisplayInformationActivity.java file. The file should look like this:

package com.android.contactinformation;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.MenuItem;

import android.support.v4.app.NavUtils;

import android.annotation.TargetApi;

import android.os.Build;

public class DisplayInformationActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_display_information);

// Show the Up button in the action bar.

setupActionBar();

}

/**

* Set up the {@link android.app.ActionBar}, if the API is available.

@TargetApi(Build.VERSION_CODES.HONEYCOMB)

private void setupActionBar() {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

getActionBar().setDisplayHomeAsUpEnabled(true);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.display_information, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

// This ID represents the Home or Up button. In the case of this

// activity, the Up button is shown. Use NavUtils to allow users

// to navigate up one level in the application structure. For

// more details, see the Navigation pattern on Android Design:

// http://developer.android.com/design/patterns/navigation.html#up-vs-back

NavUtils.navigateUpFromSameTask(this);

return true;

}

return super.onOptionsItemSelected(item);

}

You will see Eclipse has implemented three methods. The new method onOptionsItemSelected(MenuItem) allows users to navigate up one level. To use the ActionBar, version code HONEYCOMB is needed. You can see Eclipse adds a condition for the getActionBar() method to check the version code.

To receive the intent, add the following code on the method onCreate():

Intent intent = getIntent();

String info = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

To display the information, add the following code after that:

TextView textView = new TextView(this);

textView.setTextSize(20);

textView.setText(info);

To set the TextView object as the activity layout, add the following code after that:

setContentView(textView);

To test the application, right click the project folder on the Project Explorer and select Run As->Android Application. Wait for Eclipse to launch the application. It might take a while if you are starting the emulator.

Contact Information - Emulator

As you can see, they keyboard changed to numbers in the phone text field because the inputType was set to "phone".

Contact Information - Emulator

As you can see, the address text field can have multiple lines because the inputType was set to "textMultiLines". When you are finish click the Send button.

Contact Information - Emulator

The result is:

Contact Information - Emulator

You can click the Up button to enter a new contact information. However, the data will not be saved. To save the data, some of the options are SQLite database or an external storage which will be covered in a future post.

Thank you for reading. Feel free to leave comments, subscribe, or follow me on Google+. If you have any questions about any tutorials found on my blog, feel free to leave a comment on the facebook page and I will do my best to help you.

Grid View

2013-08-20T15:43:00.004-07:00

Hello everyone! For this post, I am going to keep working with the different layouts. On my previous post, I tried out the List View layout. Now, I am going to work with the layout called Grid View. I am going to create a new Android application project named GridViewDemo. I will use it to learn about the Grid View layout by creating a grid of images. This will be the result:

GridViewDemo Application

The class GridView is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.

The Grid View layout is similar to the List View layout. The List View layout displays a list of scrollable objects and the objects are inserted to the list using an Adapter. The Grid View layout displays objects in a two-dimensional, scrollable grid and the objects are inserted to the layout using a ListAdapter. The interface ListAdapter implements Adapter. The ListAdapter class is used as a bridge between the ListView layout and the data source. The ListView is able to display the data source wrapped in a ListAdapter.

First, create the new Android application project named GridViewDemo. Go to File in the main menu and select New -> Other. The wizard will start. Select Android Application Project found in the Android folder and click Next.

Eclipse New Android Application Project

In the New Android Application window, I filled it out with the following fields and clicked Next:

Application Name: GridViewDemo
Project Name: GridViewDemo
Package Name: com.android.gridviewdemo
Minimum Required SDK: API 14: Android 4.0 (IceCreamSandwich)
Target SDK: API 17: Android 4.2 (Jelly Bean)
Compile With: API 18: Android 4.3
Theme: Holo Light with Dark Action Bar

In the following window, select the checkboxes to create a custom launcher icon, to create an activity, and to create project in workspace. Configure the launcher icon any way you like. For my launcher icon, I chose the following and clicked Next:

Foreground: Image – launcher_icon
Selected Trim Surrounding Blank Space checkbox
Additional Padding: 12%
Foreground Scaling: Crop
Shape: Square
Background Color: Blue

Eclipse Configure Launcher Icon

In the next window, select the checkbox to create an activity and select Blank Activity. Click Next. In the Blank Activity window, I left the default values which are:

Activity Name: MainActivity

Layout Name: activity_main

Navigation Type: None

Click Finish and wait for Eclipse to create the project. After Eclipse is done, you can see the project GridViewDemo in the Project Explorer and the file activity_main.xml opened in the Graphical Layout.

activity_main.xml - Graphical Layout

As you can see, the application is displaying the string “Hello world!” and the file activity_main.xml looks like this:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

</RelativeLayout>

I want to create a grid of images. To do this, first save the images you would like to display in the grid into the folder drawable-hdpi found under the res folder. Modify the activity_main.xml to:

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/grid_view"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:columnWidth="150dp"

android:numColumns="auto_fit"

android:stretchMode="columnWidth"

android:gravity="center"

tools:context=".MainActivity" >

</GridView>

As you can see, I added a new id named grid_view. I set the width of each column to 150dp. This dimension value can vary depending on what size you want to display your images. In my case, a width of 100dp will display three columns while a width of 150dp will display two columns. The attribute android:numColumns will set how many columns to show and the attribute android:stretchMode will set how columns should stretch to fill the available empty space. There are also the attributes android:horizontalSpacing and android:verticalSpacing which set the spacing between columns and rows respectively.

Next, create a new class by right clicking the src folder and select New->Class. The new class will be named ImageAdapter and it will extend BaseAdapter.

Eclipse New Java Class

It will have the following code:

package com.android.gridviewdemo;

import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter{

private Context context;

private Integer[] images = {R.drawable.pic_1,

R.drawable.pic_2,

R.drawable.pic_3,

R.drawable.pic_4,

R.drawable.pic_5,

R.drawable.pic_6,

R.drawable.pic_7,

R.drawable.pic_8,

R.drawable.pic_9,

R.drawable.pic_10};

public ImageAdapter(Context context){

this.context = context;

}

public int getCount() {

return images.length;

}

public Object getItem(int position) {

return images[position];

}

public long getItemId(int position) {

return 0;

}

public View getView(int position, View convertView, ViewGroup parent)
{

ImageView imageView;

if (convertView == null) {

imageView = new ImageView(context);

imageView.setLayoutParams(new GridView.LayoutParams(130, 130));

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setPadding(15, 15, 15, 15);

} else {

imageView = (ImageView) convertView;

}

imageView.setImageResource(images[position]);

return imageView;

}

As you can see, an Integer array holds all the references to the images. The names of my images are pic_1, pic_2, etc. Replace those strings to the name of your images. The class ImageAdapter extends BaseAdapter which means we will need to implement the methods from BaseAdapter, which are getCount(), getItem(), getItemId(), and getView(). The method getCount() returns the length of the images array, which is the number of image references you add. The method getItem(int position) returns the object associated with that position in the images array. The method getItemId(int position) returns a long associated to the id. The method getView(int position, View convertView, ViewGroup parent) returns a View associated to the data at the specified position. This method creates a new View for each image added to the ImageAdapter.

First, the specified View is checked if it is null. If the View is null, a new View object is declared and given properties with methods setLayoutParams(), setScaleType(), and setPadding(). The method setLayoutParams(ViewGroup.LayoutParams) sets the height and width for the View. The method setScaleType(ImageView.ScaleType.CENTER_CROP) sets the images to be cropped toward the center. The method setPadding(int, int, int, int) sets the padding for all sides. If the specified View is not null, then the local ImageView object is initialized with the recycled View object. With the method setImageResource(int), the image reference in the array is set as the image resource for the ImageView.

Next, modify the Main_Activity.java file found on the src folder by adding the following code on the onCreate method:

GridView gridview = (GridView) findViewById(R.id.grid_view);

gridview.setAdapter(new ImageAdapter(this));

gridview.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

Toast.makeText(getApplicationContext(), "" + position, Toast.LENGTH_LONG).show();

}

});

A GridView object is initialized using the id named grid_view added earlier on the activity_main.xml file. Then, the method setAdapter() is used to set a custom adapter which is the adapter created earlier named ImageAdapter. With the method setOnItemClickListener(), a new Adapterview.OnItemClickListener is passed as parameter. With the method onItemClick(), a Toast is displayed with the message of the position of the image when the user clicks on it. The position count starts at zero.

To test the application, right click the project folder on the Project Explorer and select Run As->Android Application. Wait for Eclipse to launch the application. It might take a while if you are starting the emulator.

GridViewDemo in Emulator

Thank you for reading. Feel free to leave comments, subscribe, or follow me on Google+.

List View

2013-08-12T12:21:00.001-07:00

Hi again! For this post, I am going to keep working with the different layouts. On my previous post I tested the Linear Layout. Now, I am going to test the layout called List View. On the post about Relative Layout, I created a new Android application project named LayoutDemo. I am going to use the same project now to learn about the List View layout.

The Java class ListView is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.

The List View layout displays a list of scrollable objects. The objects are inserted to the list using an Adapter. The Adapter is used as a bridge between the AdapterView layout and the data source. In other words, the Adapter provides access to the data source and then the data is converted into a view for the AdapterView layout. The AdapterView abstract class extends ViewGroup and can be used for your layout design if the content of the layout is dynamic and needs to be at runtime.

I am going to be using an ArrayAdapter, which is a subclass of Adapter, to access the objects and create a View for the AdapterView layout. The ArrayAdapter is used when the data source is an array. It will create a View for each object by using the toString() method and then place the contents in a TextView. To see how the ListView layout works, I am going to modify the activity_main.xml:

<ListView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/list_view"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:paddingLeft="20dp"

android:paddingRight="20dp"

android:paddingTop="20dp"

tools:context=".MainActivity" >

</ListView>

The result it:

Graphical Layout - activity_main.xml

I am using the <ListView> tag to use the List View layout. I added a new id called list_view for this view so I can retrieve it. As you can see in the Graphical Layout tab, a default list is displayed.

To add items to the list, I am going to modify the MainActivity.java file. So far, your MainActivity.java file should look like this:

package com.android.layoutdemo;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

First, I will populate the array. I do this by adding the following code to the onCreate method:

String[] items =

new String[] {"Ice Cream", "Cake","Cookies", "Brownies",

"Chips", "Candy", "Chocolate"};

Then, I declare a ListView object and use the method findViewById to retrieve the id named list_view added earlier. I do this by adding the following code after the String array named items:

ListView listView = (ListView) findViewById(R.id.list_view);

Now, I am going to create a new ArrayAdapter by using the ArrayAdapter constructor ArrayAdapter(Context context, int resource, T[] objects) and then link it to the listView by using the setAdapter method. I do this by adding the following code:

ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, items);

listView.setAdapter(adapter);

The MainActivity.java file should now look like this:

package com.android.layoutdemo;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

String[] items =

new String[] {"Ice Cream", "Cake", "Cookies", "Brownies",

"Chips", "Candy", "Chocolate"};

ListView listView =

(ListView) findViewById(R.id.list_view);

ArrayAdapter<String> adapter =

new ArrayAdapter<String>

(this, android.R.layout.simple_list_item_1, items);

listView.setAdapter(adapter);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

Test it by running the emulator. Right click the project LayoutDemo in the Project Explorer and select Run As -> Android Application. Wait for Eclipse to launch the application. It might take a while if you are starting the emulator.

The result is:

LayoutDemo

As you can see, it is displaying a list of items with the values from the String array named items. Right now when you click one of the items nothing happens, but by adding a listener you can trigger an event. To do this, the method onItemClick needs to be implemented to handle the event trigger:

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {}

The method onItemClick is an unimplemented method of the class OnItemClickListener, which is going to be link to the ListView object by using the method setOnItemClickListener. The parameter named position is the position of the view in the adapter and id is the row id of the clicked item. To do this, add the following code after listView.setAdapter(adapter); :

listView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

String message = "The item selected is in row: " + position+1;

Toast.makeText(getApplicationContext(), message

, Toast.LENGTH_LONG).show();

}

});

The result is:

Selected Item

When you click on an item, a message should display. I did this by adding a Toast. The Toast class lets you display a message to the user. By using the static method makeText, the application will display the String message: "The item selected is in row: " + position+1 with duration Toast.LENGTH_LONG. One is added to the parameter position because the row count starts at zero. Finally, the method show() displays the Toast.

Display of Toast

You can also remove items from the list by using the method remove. To do this, modify the MainActivity.java file:

package com.android.layoutdemo;

import java.util.ArrayList;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

String[] items = new String[] {"Ice Cream", "Cake"

,"Cookies","Brownies", "Chips", "Candy", "Chocolate"};

final ArrayList<String> itemList =

new ArrayList<String>();

for(int i = 0; i < items.length; i++){

itemList.add(items[i]);

}

ListView listView =

(ListView) findViewById(R.id.list_view);

final ArrayAdapter<String> adapter =

new ArrayAdapter<String>(this

, android.R.layout.simple_list_item_1, itemList);

listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

Toast.makeText(getApplicationContext(), "Deleted " + adapter.getItem(position), Toast.LENGTH_LONG).show();

itemList.remove(position);

adapter.notifyDataSetChanged();

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

The result is:

Deleted Item

As you can see, it deletes the item when clicked and displays a message of the item deleted. In my case, I deleted the item Cookies.

First, I added an ArrayList called itemList and filled it up with the String array called items by using this code:

final ArrayList<String> itemList = new ArrayList<String>();

for(int i = 0; i < items.length; i++){

itemList.add(items[i]);

}

Then, I modified the ArrayAdapter constructor so the data source would be the ArrayList itemList:

final ArrayAdapter<String> adapter =

new ArrayAdapter<String> (this,

android.R.layout.simple_list_item_1, itemList);

Finally, I modified the onClick method so it would display a new message of the item deleted by using a Toast and using the method remove from the ArrayList class the item is deleted from the list. The method notifyDataSetChanged from the ArrayAdapter class should be called at the end so the view refreshes.

On my next post, I will try the other layout GridView. Thank you for reading. Feel free to leave comments, subscribe, or follow me on Google+.

Linear Layout

2013-08-06T16:35:00.000-07:00

Hi everyone! For this post, I am going to keep working with the different layouts. On my previous post Relative Layout, I created a new Android application project named LayoutDemo. I am going to use the same project now to learn about the layout called Linear Layout. The Java class LinearLayout is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.

The LinearLayout arranges objects in a single column or a single row. Similar to the RelativeLayout class, you can arrange this layout by using XML attributes which can be found here: XML attributes

To test a few of this attributes, I am going to modify the activity_main.xml file. On my previous post, I added two string resources to the application and used the Relative Layout. Now, I modified the XML file to:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:paddingLeft = "20dp"

android:paddingRight = "20dp"

android:paddingTop = "20dp"

android:orientation = "vertical"

tools:context=".MainActivity" >

<TextView

android:id = "@+id/hello"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<TextView

android:id = "@+id/first_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<TextView

android:id = "@+id/last_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

</LinearLayout>

The XML attributes android:padding sets the padding in pixels of all four edges. Here, I modified the left, right, and top edges to 20dp:

android:paddingLeft = "20dp"

android:paddingRight = "20dp"

android:paddingTop = "20dp"

With the XML attribute android:orientation = "vertical", I set the layout direction to vertical. The result is:

LayoutDemo App

A vertical orientation will have one object per row. Instead of setting it to vertical, I am going to now set it to horizontal. With the XML attribute android:orientation = "horizontal" , I can set the layout direction to horizontal and the result is:

LayoutDemo App

A horizontal orientation will only be one row high, which is the height of tallest object and any padding you add. For example, if I add

android:paddingRight = "20dp"

android:paddingTop = "20dp"

to the second TextView, the result will be:

Graphical Layout - activity_main.xml

As you can see, there is space to the right of the second string resource and at the top. Now, I will add a button to the layout. You add a button by using the <Button /> tag. First, I added a new string resource. To do this, go to the XML file strings.xml found under the res->values folder in the Project Explorer. Add a new string resource with name “ok” and value “Ok”.

strings.xml

The activity_main.xml file now looks like this with the button added:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:paddingLeft = "20dp"

android:paddingRight = "20dp"

android:paddingTop = "20dp"

android:orientation = "vertical"

tools:context=".MainActivity" >

<TextView

android:id = "@+id/hello"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<TextView

android:id = "@+id/first_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<TextView

android:id = "@+id/last_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<Button

android:layout_width="80dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

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

</LinearLayout>

The result is:

LayoutDemo App

With the XML attribute android:layout_gravity , you can set a left, right, or center alignment. In my case, I chose a center alignment and displayed the string resource named ok for the button. A weight can be set for an object using the XML attribute android:layout_weight. A weight value is set to assign the amount of space the object can occupy on the screen. The default weight for an object is zero and the larger the value the more space the object has to expand. For example, if you have three objects on your layout and you give two of the objects a weight of 1 and the third object is left on the default value, the two objects with the weight of 1 will expand equally and the third object with weight of 0 will not. To see how this works, I modified the second TextView on activity_main.xml:

<TextView

android:id = "@+id/first_name"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_weight = "1"

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

The result is:

LayoutDemo App

As you can see, now the string resource first_name has a weight of 1 and can expand more than the other two string resources. If I modify the third TextView like this,

<TextView

android:id = "@+id/last_name"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_weight = "1"

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

The result is:

LayoutDemo App

Now, the second and third string resources are assigned a weight of 1. As you can see, they expanded equally.

There are more XML attributes which you can try. A list of attributes can be found in the link mentioned before. On my next posts, I will try the other layouts like GridView and ListView. Thank you for reading. Feel free to leave comments, subscribe, or follow me on Google+.

Relative Layout

2013-08-05T10:38:00.000-07:00

Hello everyone! For this post, I am going to try out different layouts. I don’t have any user interface in mind, but I want to see how the different layouts work with texts, buttons, or labels. To start, I am going to create a new Android application project in Eclipse. Select File from the main menu and select New -> Other. A new window will pop-up to select a wizard. Select Android Application Project under the Android folder and click Next. In the New Android Application window, I filled it out with the following fields and clicked Next:

Application Name: LayoutDemo
Project Name: LayoutDemo
Package Name: com.android.layoutdemo
Minimum Required SDK: API 8: Android 2.2 (Froyo)
Target SDK: API 17: Android 4.2 (Jelly Bean)
Compile With: API 18: Android 4.3
Theme: Holo Light with Dark Action Bar

New Android Application

Foreground: Clipart – Black star
Selected Trim Surrounding Blank Space checkbox
Additional Padding: 27%
Foreground Scaling: Center
Shape: Circle
Background Color: Blue
Foreground Color: Pink

Configure Launcher Icon

In the next window, select the checkbox to create an activity and select Blank Activity. Click Next. In the Blank Activity window, I left the default values which are:

Activity Name: MainActivity
Layout Name: activity_main
Navigation Type: None

Click Finish and wait for Eclipse to create the project. After Eclipse is done, you can see the project LayoutDemo in the Project Explorer and the file activity_main.xml opened in the Graphical Layout.

LayoutDemo Application

As you can see, the application is displaying the string “Hello world!” and the file activity_main.xml looks like this:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

</RelativeLayout>

The Java class RelativeLayout is one of the subclasses of the class ViewGroup found in the package android.view. The package provides classes for the user interface which includes screen layouts and ways for the user to interact with them. The user interface that you design can have more than one layout nested within another layout.

The Relative Layout lets you choose where the objects will be located relative to each other. For example, there could be an object right of another object or there could an object at the top. The XML attributes used for this layout can be found here: XML Attributes

To test a few of this attributes, I am going to add to our current activity_main.xml file. First, I add two new string resources. I do this by going to the file strings.xml under the res -> values folder. I added a string resource called first_name, which holds my first name as value, and a string resource called last_name, which holds my last name as value.

strings.xml

First I will try this configuration,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:id = "@+id/hello"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<TextView

android:id = "@+id/first_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below = "@id/hello"

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

<TextView

android:id = "@+id/last_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below = "@id/first_name"

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

</RelativeLayout>

The result is:

Graphical Layout - activity_main.xml

As you can see, I am using resources of type id on each TextView to identify which object is relative to another. The string resource hello_world has id name hello, the string resource first_name has id name first_name, and the string resource last_name has id name last_name.

The line android:layout_below = "@id/hello” on the second TextView makes the string first_name display below the string hello_world.

The line android:layout_below = "@id/first_name" on the third TextView makes the string last_name display below the string first_name.

Now, I will modify the third TextView:

<TextView

android:id = "@+id/last_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below = "@id/hello"

android:paddingLeft = "9dp"

android:layout_toRightOf = "@id/first_name"

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

The result is:

Graphical Layout - activity_main.xml

As you can see, I used the XML attribute android:layout_toRightOf to specify that the string resource last_name goes to the right of the string resource first_name. Also, I used the XML attribute android:paddingLeft to specify a padding in pixels to the left edge of the last_name resource.

If I put this line on the third TextView:

android:layout_alignParentBottom="true" will result in:

Graphical Layout - activity_main.xml

When this XML attribute is set to true, it will align the bottom margin. As you can see, now the string resource last_name is aligned to the bottom instead of to the right which would be:

android:layout_alignParentRight="true". This will result in:

Graphical Layout - activity_main.xml

There are more XML attributes which you can try. A list of attributes can be found in the link mentioned before. On my next posts, I will try the other layouts like LinearLayout, GridView, and ListView. Thank you for reading. Feel free to leave comments or follow me on Google+.

Running HelloAndroid Application

2013-08-01T18:42:00.001-07:00

Hi again! On my last post, I configured an Android Virtual Device called NexusS_4.2.2. Before I run the HelloAndroid application, I am going to do a little modification to the application. Then, I am going to test the application in the previously created AVD and on my phone, which has Android version 4.1.2. This is the HelloAndroid application so far:

HelloAndroid Application

It is the default project I created in Eclipse. As you can see, the default file activity_main.xml is already displaying the string “Hello world!”. I want to modify this string so it displays “Hello Android! =)” instead. To do this, right now you are on the Graphic Layout tab in Eclipse. Double Click the “Hello world!” string.

Hello world! string

It will take you to the xml file tab with the string resource, which you just double clicked, highlighted blue.

hello_world resource

As you can see, the name of the string resource is hello_world. To be able to modify this string, go to the Project Explorer and open the file strings.xml. This file is under the resource folder (res) then under the values folder in the Project Explorer. You will see an interface where you can add, edit, and remove Android resources.

Android Resources

Examples of resources are strings, colors, and images. To modify the hello_world resource, click on the resource element on the left side. You should now see the attributes of the resource on the right side. I changed the name of the resource to hello_android and the value to “Hello Android! =)”.

hello_android resource

Save the project and you should see the name of the resource change to hello_android on the left side. You can either modify the resource by using the Resources interface or you can access the strings.xml file by clicking the tab at the bottom next to the Resources tab.

strings.xml

Change the resource string name hello_world to hello_android and its value to “Hello Android! =)”. In other words, the complete line will be:

<string name="hello_android">Hello Android! =)</string>

As you can see, the name and value of the resource changed on the Resources tab too after you save it. Since I changed the resource name, I have to also modify the activity_main.xml file. You probably see an error in Eclipse after you save the strings.xml file because the hello_world resource no longer exists.

activity_main.xml

Change hello_world to hello_android on the activity_main.xml file and save it. The error should be corrected now. Right click the project folder in the Project Explorer and select Run As -> Android Application or click the green run icon on your toolbar to select Run As -> Android Application.

Run As Android Application

If the emulator was off, it will take some time for it to start. You don’t have to close the emulator every time you want to run the application. Restarting the emulator will be like restarting an actual device. You should see the HelloAndroid application running after it starts.

Hello Android Application

You can drag the application to the home screen like you would do in an actual device.

NexusS_4.2.2 Home Screen

Now I want to run the application on my phone. To do this I need to download the USB driver. The driver you will need depends on the model of the phone. If the phone is a Nexus One, Android Developer Phone, or a Nexus S like the emulator we configured, you only need to download the Google USB driver found in the Android SDK Manager.

Android SDK Manager

If you need another USB driver, here is a list of drivers : Drivers

After getting the USB driver, you need to enable USB Debugging on your phone. Since I got Android version 4.1.2, USB Debugging can be found on Settings -> Developer options. This applies to Android versions 4.0 or newer. For Android 3.2 or older, USB Debugging can be found on Settings -> Applications -> Development.

Developer options

I clicked on the run green icon on Eclipse once more and a new window called Android Device Chooser pops up.

Android Device Chooser

In this window, select the radio button Choose a running Android device and click Ok. The HelloAndroid application should now be running on phone! Thank you for reading. Feel free to leave me comments or follow me by clicking Add to circles on Google+ Followers.

Hello Android Application on phone

Android Virtual Device Configuration

2013-07-30T15:34:00.001-07:00

Hi everyone! So far, I have configured a new Android application project in Eclipse and taken a closer look at the Project Explorer. On this post, I will do the configuration of the AVD. The Android Virtual Device (AVD) is an emulator that will let you test the application on different resolutions and sizes. The configuration will emulate an actual device with specific hardware and software options. You can also use an actual device to test you application. I will be using both the emulator and my phone which has Android version 4.1.2 to test the application. Here is the window view that I have so far for the HelloAndroid application.

HelloAndroid Eclipse Window

To access the AVD Manager through Eclipse, you need to select Window from the main menu and click AVD Manager from the list of options. But as you can see, I didn’t have that option.

Eclipse Window View

Instead, I chose Customize Perspective from the list of options under Window. I clicked the Command Groups Availability tab and selected the Android SDK and AVD Manager checkbox.

Eclipse Customize Perspective

Then, I clicked Ok. On my toolbar, I can now see the Android Virtual Device Manager.

Eclipse AVD Toolbar

In the AVD Manager, you can configure different virtual devices by selecting the hardware features you would like the device to have. Examples of these features are device ram size, GPS, and camera. During the configuration, you can also choose what Android platform will be running on the virtual device. It is recommended to test the application on different types of device configurations to make sure there are no problems when using a different size, resolution or platform version. It is also important to keep in mind the minimum SDK version chosen for the application because the application will not run on the virtual device if the API Level chosen in the AVD Manager configuration is less than what your application requires. To start the AVD Manager, click the Android Virtual Device Manager icon in your toolbar. A new window will appear called Android Virtual Device Manager.

Android Virtual Device Manager

Click New to create a new AVD. A window will appear where you will configure the new AVD.

AVD Manager

I entered the following information in the fields and clicked Ok:

AVD Name: NexusS_4.2.2
Device: Nexus S (4.0”, 480 x 800: hdpi)
Target: Android 4.2.2 – API Level 17
CPU/ABI: ARM (armeabi-v7a)
Keyboard: checkbox selected
Skin: checkbox selected
Front Camera: None
Back Camera: None
Memory Options: Ram: 343, VM Heap: 32
Internal Storage: 200 MiB
SD Card: Default
Emulation Options: Default

AVD Manager

The new AVD configuration should now appear in the list of the previous window.

AVD Manager

You can create new virtual devices, edit, or delete them. To launch the AVD click Start. A window will appear with launch options. I selected the checkbox Scale display to real size and changed the Screen Size to 7.0 so it would fit in my screen.

AVD Launch Options

Finally, I clicked Launch. The NexusS_4.2.2 AVD will start and we are done with the new AVD configuration!

NexusS_4.2.2 AVD

On my next post, I will run the application in the NexusS_4.2.2 AVD and also on my phone.

Android Application Project Explorer

2013-07-29T15:44:00.000-07:00

Hello everyone! On my last post, I configured a new Android application project in Eclipse. The view in Eclipse was like this after creating it:

HelloAndroid Application

Now, I want to build and run the application. Before I do that, I am going to take a closer look at the Project Explorer view in Eclipse.

Eclipse Project Explorer View

By configuring a new Android application project, it created various folders and subdirectories. The first subdirectory shown in the Project Explorer view of Eclipse is called src. The source folder has a package and a Java class. The package name is chosen in one of the first windows while creating a new Android application. In my case, the Java class name is MainActivity.java.

MainActivity.java

The name depends on the name given while creating a new blank activity. An Android application needs at least one activity and it can have more than one. The following subdirectory in the Project Explorer view is called gen. The folder has a package with two Java classes. The first Java class is called BuildConfig.java and it is an automatically generated file which shouldn’t be modified. The second Java class is called R.java.

R.java

It is also an automatically generated file which shouldn’t be modified. This class is generated by the aapt tool from the resource data that was found in the application. These classes will automatically change as modifications are done in the project. The following part in the Project Explorer is a set of libraries. The version of Android depends on what you chose while creating the Android application project. Another important folder called res in the Project Explorer contains several subdirectories. The first few folders in the resource folder begin with the word drawable. These folders have the launcher icon file that was selected while creating the Android application project. In my case, it contains the graphic file ic_launcher.png which is the green android logo in a black box.

ic_launcher.png

This graphic file can be changed for another graphic by adding the specific size in each of drawable folders. The following folders in the Project Explorer have XML files.

Eclipse Project Explorer

The files on these folders have the configuration for the screens in the application. An important file after the resource folder is the AndroidManifest.xml file.

AndroidManifest.xml

This XML file contains information about the application like the android version, minimum SDK version, target SDK version, and activity. It also contains permissions for the device like for example to allow an application to access information about networks or to allow an application to access the camera.

Creating New Android Application Project

2013-07-21T15:21:00.000-07:00

Hi again! Now I am going to make sure everything installed works by building my first Android app. It will be a simple app which will display “Hello Android” in the screen. Let’s get started! I launched Eclipse to start a new Android project. To start a new Android project in Eclipse, you can select File from the menu and then select New -> Other or just click the New icon in the toolbar. I clicked the New icon in the toolbar. The New window will appear to create a new project. The Android Application Project can be found in the Android folder. Select Android Application Project and click Next.

Eclipse New Project

After clicking Next, the New Android Application window appears.

Eclipse New Android Application

The New Android Application window has the following fields:

Application Name: This is the name of the application that will appear in the Play Store. This name will also appear in the Manage Application list in Settings.
Project Name: This is the name of the Android project that will appear in Eclipse. It can be the same name of the application but it must be unique within the workspace.
Package Name: This is the name of the application package. It follows the same rules as packages in the Java programming language. The name chosen must be a unique identifier across all packages installed on the Android system. It must stay the same for the lifetime of the application and it is typically the reverse domain name of your organization plus one or more application identifiers.
Minimum Required SDK: This field is the lowest version of Android that the application will support. This is indicated by the API level. Lower API levels can support more devices, but fewer features are available. This should be set to the lowest version available that allows your application to provide all of its features, so the application can support as many devices as possible.
Target SDK: This field is the highest version of Android in which your application was tested and known to work with.
Compile With: This field is set by default to the latest version of Android available in your SDK. Setting this field to the latest version will enable new features for the latest devices. It is the target API against which you will compile the application.
Theme: This is the base Android UI theme to use for the application.

For my application, I chose the following and clicked Next:

Application Name: Hello Android
Project Name: HelloAndroid
Package name: com.android.helloandroid
Minimum Required SDK: API 8: Android 2.2 (Froyo)
Target SDK: API 17: Android 4.2 (Jelly Bean)
Compile With: API 17: Android 4.2 (Jelly Bean)
Theme: Holo Light with Dark Action Bar

On the next window, I left the default values and clicked Next. The following window lets you configure the launcher icon.

Eclipse Configure Launcher Icon

You can browse for an image file, select clipart, or enter text to use as launcher icon. As you are customizing your icon, you can see the icon it generates for all screen densities on the right side of the window. For my application, I chose:

Foreground: default image file
Selected trim surrounding blank space
Additional Padding: 13%
Foreground Scaling: Crop
Shape: Square
Background Color: Black

After I was done configuring launcher icon, I clicked Next. On the following window, select Blank Activity and click Next.

Eclipse Create Activity

The new window that appears has three fields which will let you enter an activity name, a layout name, and navigation type for the activity. I left the fields on their default value and clicked Finish.

Eclipse Blank Activity

After Eclipse creates the new Android project, you should have a new directory with the name of the project which you chose. You can see this on the left side of Eclipse on the Package Explorer. The package name which you chose should be seen in the src folder. In the package, you should find the MainActivity class.

Eclipse IDE

We are done creating the new Android application project! If you have any questions feel free to leave a comment. I will do my best to help you. On my next post, I will run the application.

Installation for Android Development

2013-07-20T23:53:00.000-07:00

Since I already have Eclipse installed, I am going to use that existing IDE for Android development. All I need to download is the SDK Tools. The Android SDK has the API libraries and everything needed to build, test and debug apps for Android. If you are new to Android development you can download the ADT (Android Developer Tools) Bundle. The ADT Bundle has Eclipse + ADT plugin, Android SDK Tools, Android Platform-tools, the latest Android platform, and the latest Android system image for the emulator. The download can be found here: Android SDK. The download for Eclipse IDE can be found here: Eclipse IDE

After downloading the SDK Tools, the executable file starts the installer.

Android SDK Tools Setup

The installer will first check if the JDK (Java SE Development Kit) is installed. It will install it if necessary.

Android SDK Tools Setup

Then, it will ask for which users you want to install Android SDK Tools. After selecting, click Next.

Android SDK Tools Setup

On the following window, choose the install location. Remember this location because when setting up the ADT plugin, you will need to refer to this directory.

Android SDK Tools Setup

Select Install. After installation is complete and you are using Eclipse IDE for Android development, do not start the Android SDK Manager. The next step is to download the ADT Plugin for Eclipse. Start Eclipse and select Help. Then select Install New Software.

Eclipse Install New Software

Click Add and enter the following in Name ADT Plugin and Location https://dl-ssl.google.com/android/eclipse/.

Eclipse Install New Software

Select the checkbox next to Developer Tools and click Next. After reading and accepting the license agreements, click Finish.

Eclipse Install New Software

After installation is completed, restart Eclipse. When Eclipse restarted, I was supposed to get a window that said “Welcome to Android Development” where the option Use existing SKDs needed to be selected. Then you need to select the directory to where u downloaded the Android SDK. The window did not appear for me. Instead, I went to Window and selected Preferences.

Eclipse Preferences

Afterwards, I clicked Browse and selected the location of the Android SDK directory.

Eclipse Android Preferences

Then I executed the Android SDK Manager which can be found in the Android SDK directory. The SDK Manager provides all the packages to add to the Android SDK. Select the checkboxes Tools folder, first Android version folder, and Android Support Library found on the Extras folder.

Android SDK Manager

After selecting all the necessary packages, click Install. When the installation is completed, I will be ready to build my first app!

In case you get stuck in one of the installation steps, here is a very nice tutorial on the installation of the ADT Bundle:

About Blog

2013-07-20T22:44:00.003-07:00

Hi everyone! My name is Esther. I am a recent graduate with a bachelor in computer science because programming is my passion and so is learning. Every day I spend time reading about new technologies and learning about advances in this field. I love learning about everything! What can I say? I am a technology lover. One thing that especially has caught my eye is Android development. So, what is Android?

Android is a Linux-based operating system currently being developed by Google. It is open source software which allows developers to write applications and deploy them to the app store called Google Play. The Google Play store grows every day and with billions of downloads up to date the applications are limitless. On May 2013, it was announced there are 900 million Android activations and 48 billion apps have been installed from the Google Play store.

How amazing is that! I am very interested in learning about Android and I created this blog to share what I am learning and also to use it as a reference. I’m a beginner, so feel free to guide me by leaving comments or by asking any doubts you have. I will do my best to help. I’m excited to get started!