Step-by-step to create a simple Android App

The video show the steps to build a simple Android App using Android-ADT (Eclipse), in 7 minutes. In the app, clicking on the button to show a photo, and clicking on the photo to remove itself. In the end of the video show how it in working.

  • The app generated using the Project Wizard of Android SDK Tools 22.6.2, ActionBarActivity created with Fragment. So we have to modify fragment_main.xml for layout, and handle our ui elements in onCreateView() of PlaceholderFragment class.
  • The photo is stored inside the app /res/drawable/spiderman.jpg, its name must be in lowercase letter.

/res/layout/fragment_main.xml
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.showmyphoto.MainActivity$PlaceholderFragment" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

<Button
android:id="@+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show my photo" />

<ImageView
android:id="@+id/myimageview"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

/src/com/example/showmyphoto/MainActivity.java
package com.example.showmyphoto;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

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

if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment()).commit();
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment {

Button myButton;
ImageView myImageView;

public PlaceholderFragment() {
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container,
false);

myButton = (Button)rootView.findViewById(R.id.mybutton);
myImageView = (ImageView)rootView.findViewById(R.id.myimageview);

myButton.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View v) {
myImageView.setImageResource(R.drawable.spiderman);
}});

myImageView.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View v) {
myImageView.setImageBitmap(null);
}});

return rootView;
}
}

}