Customizing the callout

Complexity: Beginner Data Requirement: ArcGIS Tutorial Data for Desktop Goal: This topic shows how to customize the ArcGIS for Android map callout by taking you through the necessary steps to create a callout that is the same as one of the software development kit (SDK) samples. Many of the concepts are applicable to customizing other Android View elements that may be used within your application.

The following illustration shows an example callout from the Symbolizing results sample. It has a cyan background and rounded corners. Its content has a household image on the left, a county name on the top right and Square Mile (SQMI) data on the botton right. This topic discusses creating this type of callout.

Creating an XML style file

Steps:

1. Create an Android Extensible Markup Language (XML) style file for the callout. A set of style attributes specific to the map callout are available in the ArcGIS API. Style attributes include the title color, title text size, background color, background alpha, corner curve, and so on. Declare these attributes in an XML element named <calloutViewStyle/> in an XML resource file.
2. In the Symbolizing results sample, an XML resource file named countypop.xml is included in the res/xml directory and includes the necessary attributes to achieve the previously mentioned callout style. Both background and frame color are cyan.The callout is opaque with a background alpha color set to 255. The corner is rounded with the curvature radius set to 10. The anchor is positioned at the lower-middle half of the callout. Since there is no title for this callout, the title related attributes are not defined. See the following code:

   A code snippet of XML file can be found below:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
   <calloutViewStyle
   	backgroundColor="#66FFCC"
   	backgroundAlpha="255"
   	frameColor="#66FFCC"	
   	cornerCurve="10"  
   	anchor="5" />
   </resources>
   

Creating an Android layout

Steps:

1. Define an Android layout containing the text and image elements you want to display in the callout. This is done through the creation of a layout.xml file. Create a file called sqmi.xml and put it in the res/layout directory.
2. Add a top level <RelativeLayout> element and within this, add an <ImageView> and two <TextView> elements. The attributes of the <RelativeLayout> should define the same background color as the background in the callout XML style file. The <ImageView> defines an image to use and the <TextView> elements specify their layout, text color, and ids only. See the following code:

   A code snippet of resulting XML can be found below:

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   	android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FF66FFCC"
   	>
   	<ImageView android:layout_height="wrap_content"
   		android:layout_width="wrap_content" android:id="@+id/family_photo"
   		android:src="@drawable/icon"/>
   	<TextView android:layout_height="wrap_content"
   		android:layout_width="wrap_content" android:id="@+id/county_name"
   		android:layout_toRightOf="@id/family_photo" android:textSize="16dip" android:textColor="#FF000000"
   		android:paddingBottom="5dip"/>
   	<TextView android:layout_height="wrap_content"
   		android:layout_width="wrap_content" 
   		android:id="@+id/pop_sqmi" android:layout_below="@id/county_name"
   		android:layout_toRightOf="@id/family_photo" android:textSize="14dip" android:textColor="#FF000000"/>
   </RelativeLayout>
   

Setting the style and content onto the callout

Steps:

1. Set the callout style and content layout onto the callout by retrieving the callout reference from the map, obtaining the callout style XML resource id, then set this resource id as the style onto the callout object.
2. Subsequently, inflate the layout defined in the Create an Android layout section, populate it with information retrieved from a graphic, and set the layout onto the callout object. This is usually done when certain events occur, for example, by single-tapping a graphic. See the following code:

   Code snippet:

   callout.setStyle(R.xml.countypop);
   String countyName = (String) gr.getAttributeValue("NAME");
   String countyPop = gr.getAttributeValue("POP07_SQMI").toString();
   // Sets custom content layout to callout.								callout.setContent(loadView(countyName,countyPop));