Introduction

Today you are going to learn how to create a simple Metro Map app. This app is being created just to show you how to switch among various activities and how to add an image in Android programming.
I used Android studio to make this app since we can preview the layout any time easily in it. You can use any other IDE like Eclipse.
Step 1:
Open the layout XML file (in my case activity_main.xml) present in the layout folder of your project. Initially, you will get the following code:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:paddingLeft="@dimen/activity_horizontal_margin"
  6. android:paddingRight="@dimen/activity_horizontal_margin"
  7. android:paddingTop="@dimen/activity_vertical_margin"
  8. android:paddingBottom="@dimen/activity_vertical_margin"
  9. tools:context=".MainActivity">
  10. <TextView
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:text="@string/hello_world" />
  14. </RelativeLayout>
Step 2:
Do the following changes in your layout file (I am changing the RealtiveLayout to LinearLayout because my layout just exists so my final view of the layout does not require any relative placing of components).
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:paddingBottom="@dimen/activity_vertical_margin"
  6. android:paddingLeft="@dimen/activity_horizontal_margin"
  7. android:paddingRight="@dimen/activity_horizontal_margin"
  8. android:paddingTop="@dimen/activity_vertical_margin"
  9. tools:context=".MainActivity"
  10. android:orientation="vertical">
  11. <TextView
  12. android:id="@+id/txt"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:text="@string/hello_world"
  16. android:layout_marginBottom="5dp"/>
  17. </LinearLayout>
Step 3:
Now let us create the buttons in the XML file as required in this app:
  1. <Button
  2. android:id="@+id/fullMap"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:text="@string/full"
  6. android:textColor="@color/fullCol"
  7. android:background="@color/bg"
  8. />
  9. <Button
  10. android:id="@+id/redMap"
  11. android:layout_width="fill_parent"
  12. android:layout_height="wrap_content"
  13. android:text="@string/red"
  14. android:textColor="@color/redCol"
  15. />
  16. <Button
  17. android:id="@+id/blueMap"
  18. android:layout_width="fill_parent"
  19. android:layout_height="wrap_content"
  20. android:text="@string/blue"
  21. android:textColor="@color/blueCol"
  22. />
  23. <Button
  24. android:id="@+id/greenMap"
  25. android:layout_width="fill_parent"
  26. android:layout_height="wrap_content"
  27. android:text="@string/green"
  28. android:textColor="@color/greenCol"
  29. />
  30. <Button
  31. android:id="@+id/orangeMap"
  32. android:layout_width="fill_parent"
  33. android:layout_height="wrap_content"
  34. android:text="@string/orange"
  35. android:textColor="@color/orangeCol"
  36. />
Step 4:
The changes in "string.xml" file in the "values" folder are:
  1. <resources>
  2. <string name="app_name">metro</string>
  3. <string name="action_settings">Settings</string>
  4. <string name="hello_world">Welcome to metro maps.......</string>
  5. <string name="full">Full Map</string>
  6. <string name="red">Red Line Map</string>
  7. <string name="blue">Blue Line Map</string>
  8. <string name="green">Green Line Map</string>
  9. <string name="orange">Orange Line Map</string>
  10. <string name="back">Back</string>
  11. </resources>
Step 5:
Since I wanted to change the text colors in the Buttons to make the layout more appealing, let us create a "colors.xml" file. Right-click on Values then select "New" -> "Values Resource File". The contents of this file are:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="bg">#957AFF</color>
  4. <color name="fullCol">#000000</color>
  5. <color name="redCol">#b93131</color>
  6. <color name="blueCol">#269cb5</color>
  7. <color name="greenCol">#63b6ab</color>
  8. <color name="orangeCol">#b43f26</color>
  9. </resources>
Note the use of reference of the colors created above in the layout's XML file.
Finally the layout looks like:
1.jpg
Step 6:
Let us create another layout file to make the layout of the page displaying the image. Right-click on Layout then select "New" -> "Values Resource File". Name it as "activity_fullmap". The contents of this file are:
  1. <Button
  2. android:id="@+id/back"
  3. android:layout_width="100dp"
  4. android:layout_height="50dp"
  5. android:text="@string/back"/>
  6. <ImageView
  7. android:id="@+id/im"
  8. android:layout_height="410dp"
  9. android:layout_width="350dp"
  10. android:layout_marginTop="50dp"
  11. android:layout_marginLeft="20dp"
  12. />
ImageView has been added for the display of the image of the Metro Maps.
Note: The name of the new XML file must contain an underscore, otherwise it will show you an error in the later stages of project completion.
This will look like:
2.jpg
Step 7:
Download all the images required from Google, in other words, the images of the Metro Maps. I have used a Metro full map, Blue Line map, Red Line map, Green Line map and Orange Line map. Copy these jpeg images and paste them in "drawable". You can paste these images in all the drawable like drawable-hdpi, drawable-ldpi, etc to have a view in all sizes. The names of the image files used by me are: blue, red, green, orange, full.
Now let us start with the Java coding...
Step 8:
Make a new activity namely "FulllMap.java" to display the complete map of Metro. Right-click on "src" then select "Java Class". Name this class "FullMap". The contents of this file are:
  1. package com.metro;
  3. import android.app.Activity;
  4. import android.content.Context;
  5. import android.content.Intent;
  6. import android.os.Bundle;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.widget.Button;
  10. import android.widget.ImageView;
  12. public class FullMap extends Activity
  13. {
  14. ImageView v; // to be able to display the image
  15. Button b;
  16. final Context context=this;
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. setContentView(R.layout.activity_fullmap); // note the use of the layout file
  21. v=(ImageView)findViewById(R.id.im);
  22. v.setImageResource(R.drawable.full); //setting the required inage of full map
  24. b=(Button)findViewById(R.id.back); // button created to go to the front page
  25. b.setOnClickListener(new OnClickListener() {
  26. @Override
  27. public void onClick(View v) {
  28. Intent i=new Intent(context,MainActivity.class); /*intent of the main activity is set so as to return to the main page*/
  29. startActivity(i);
  31. }
  32. });
  34. }
  35. }
Step 9:
Similarly, make activities for the remaining maps to be displayed. So make 4 more activities in the same way and name them "RedMap", "BlueMap", "GreenMap", "OrangeMap". The code remains the same as above except the name of the image file to be opened. Also, the package has to be the same.
In RedMap.java: v.setImageResource(R.drawable.red);
In BlueMap.java: v.setImageResource(R.drawable.blue);
In GreenMap.java: v.setImageResource(R.drawable.green);
In OrangeMap.java: v.setImageResource(R.drawable.orange);
Rest of the code remains same as that of FullMap.java
Step10:
Make the changes in "MainActivity.java" (created by default) in "src" as follows:
  1. package com.metro;
  3. import android.content.Context;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.app.Activity;
  7. import android.view.Menu;
  8. import android.view.View;
  9. import android.view.View.OnClickListener;
  10. import android.widget.Button;
  11. import android.widget.ImageView;
  13. public class MainActivity extends Activity implements OnClickListener {
  14. ImageView image;
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  20. ((Button)findViewById(R.id.fullMap)).setOnClickListener(this);
  21. ((Button)findViewById(R.id.redMap)).setOnClickListener(this);
  22. ((Button)findViewById(R.id.blueMap)).setOnClickListener(this);
  23. ((Button)findViewById(R.id.greenMap)).setOnClickListener(this);
  24. ((Button)findViewById(R.id.orangeMap)).setOnClickListener(this);
  25. }
  27. @Override
  28. public boolean onCreateOptionsMenu(Menu menu) {
  29. // Inflate the menu; this adds items to the action bar if it is present.
  30. getMenuInflater().inflate(R.menu.main, menu);
  31. return true;
  32. }
  34. @Override
  35. //this method will be called on button click
  36. public void onClick(View v) {
  37. // TODO Auto-generated method stub
  38. final Context context=this;
  39. switch(v.getId())
  40. {
  41. //when the button for red map is pressed, open the RedMap activity
  42. case R.id.redMap:
  43. Intent i=new Intent(context,RedMap.class);
  44. startActivity(i);
  45. break;
  46. //when the button for blue map is pressed, open the BlueMap activity
  47. case R.id.blueMap:
  48. Intent i1=new Intent(context,BlueMap.class);
  49. startActivity(i1);
  50. break;
  51. //when the button for green map is pressed, open the GreenMap activity
  52. case R.id.greenMap:
  53. Intent i2=new Intent(context,GreenMap.class);
  54. startActivity(i2);
  55. break;
  56. //when the button for orange map is pressed, open the OrangeMap activity
  57. case R.id.orangeMap:
  58. Intent i3=new Intent(context,OrangeMap.class);
  59. startActivity(i3);
  60. break;
  61. //when the button for full map is pressed, open the FullMap activity
  62. case R.id.fullMap:
  63. Intent i4=new Intent(context,FullMap.class);
  64. startActivity(i4);
  65. break;
  66. }
  67. }
  69. }
Step 11:
Don't forget to make changes in the Manifest file, otherwise, the new activities will not run. Open the manifest file "AndroidManifest.xml" (in my case). Initially, you will see the following code:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="com.metro"
  4. android:versionCode="1"
  5. android:versionName="1.0" >
  7. <uses-sdk
  8. android:minSdkVersion="8"
  9. android:targetSdkVersion="17" />
  11. <application
  12. android:allowBackup="true"
  13. android:icon="@drawable/ic_launcher"
  14. android:label="@string/app_name"
  15. android:theme="@style/AppTheme" >
  16. <activity
  17. android:name="com.metro.MainActivity"
  18. android:label="@string/app_name" >
  19. <intent-filter>
  20. <action android:name="android.intent.action.MAIN" />
  22. <category android:name="android.intent.category.LAUNCHER" />
  23. </intent-filter>
  24. </activity>
  25. </application>
  27. </manifest>
Now make the following changes in this file to add other activities: ( write this between the closing tag of the activity and application in the preceding shown file)
  1. <activity
  2. android:name="com.metro.BlueMap"
  3. android:label="metro">
  4. </activity>
  6. <activity
  7. android:name="com.metro.RedMap"
  8. android:label="metro">
  9. </activity>
  11. <activity
  12. android:name="com.metro.GreenMap"
  13. android:label="metro">
  14. </activity>
  16. <activity
  17. android:name="com.metro.OrangeMap"
  18. android:label="metro">
  19. </activity>
  21. <activity
  22. android:name="com.metro.FullMap"
  23. android:label="metro">
  24. </activity>
Step 12:
Now your Metro app is ready to run.
On running the first screen looks like:
r1.jpg
When you click on the Full Map button, you will get:
r2.jpg
You can click on other buttons and see the output.
Thank you... enjoy coding :)