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;
  }
 }

}