Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

MapView inside TabView

Author: Vladimir Kroz
Published? false -- FormatLanguage: W

Problem:

You want to place a MapView object within TabView.

Target application outline

  • Draw two empty tabs
  • Show map on the first tab

Solution:

  1. Create MapView and corresponding XML layout, make sure it runs standalone
  2. Create TabView and corresponding XML layout
  3. Attach MapView activity to one of the tabs using TabSpec.setContent()

That's it!

Discussion:

Warning The Google Maps V1 API is deprecated; new code should use the V2 API discussed in Recipes 4285 and 4297.

Contents


Setup - obtain maps api key

First step - get from google api key to enable your MapView. Just follow google Maps Add-On documentation and eventually you should get something like that: Your key is: 01234567890abvgd9876543eprst333223 (just example) This key is good for all apps signed with your certificate whose fingerprint is: 00:00:11:AA:BB:CC:AB:01:02:22:33:44:55:FF:EE:DD Check out the API documentation for more information.

Layouts

TabLayout (main.xml)

The structure of typical TabLayout includes TabHost as a container, TabWidget to draw tabs and FrameLayout with predefined id "@android:id/tabcontent" to contain interchangeable content.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content"/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<RelativeLayout android:id="@+id/emptylayout1" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"/>
<TextView android:id="@+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Details Details Details Details"/>
</FrameLayout>
</LinearLayout>
</TabHost>

Layout for MapView (Maptabview.xml)

Code for the MapView layout follows.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/maptablayout" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<com.google.android.maps.MapView android:id="@+id/mapview"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="0pFtdSwta8EMTfArj32ycOw2kZg0LSEqa4fUGFA"/>
</RelativeLayout>

Application code

AppMain.java - Entry point

This would be application entry point; later we'll enhance this code with more details

package org.kroztech.cookbook;

import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class AppMain extends TabActivity  {
 TabHost mTabHost;
 FrameLayout mFrameLayout;

 /** Called when the activity is first created.*/
 @Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    mTabHost = getTabHost();
    TabSpec tabSpec = mTabHost.newTabSpec("tab_test1");
    tabSpec.setIndicator("Map");
    Context ctx = this.getApplicationContext();
    Intent i = new Intent(ctx, MapTabView.class);
    tabSpec.setContent(i);
    mTabHost.addTab(tabSpec);
    mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Details").setContent(R.id.textview2));
    mTabHost.setCurrentTab(0);
 }
}

MapTabView.java - Map Activity

The Map Activity follows.

package org.kroztech.cookbook;

import android.os.Bundle;
import com.google.android.maps.MapActivity;

public class MapTabView extends MapActivity {
 @Override
 protected void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.maptabview);
 }
 @Override
 protected boolean isRouteDisplayed() {
   return false;
 }
}

Manifest (AndroidManifest.xml)

And the manifest file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.kroz.tag" android:versionCode="1" android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
    <uses-library android:name="com.google.android.maps"/>
    <activity android:name=".AppMain" android:label="@string/app_name">
       <intent-filter>
           <action android:name="android.intent.action.MAIN"/>
           <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
    </activity>
    <activity android:name="MapTabView" android:label="@string/mapview_name">
       <intent-filter>
          <category android:name="android.intent.category.EMBED"></category>
          <action android:name="android.intent.action.MAIN"></action>
       </intent-filter>
    </activity>
  </application>
 <uses-sdk android:minSdkVersion="3"/>
 <uses-permission android:name="android.permission.INTERNET"></uses-permission>
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"></uses-permission>
</manifest>

Download:

The source code for this project can be downloaded from http://www.kroztech.com/res/android_cookbook/src/MapTabViewDemo.zip.
No records found.