Skip To Content

Customize the callout

In this topic

The following illustration shows a 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 bottom right. This topic discusses creating this type of callout.

Create an XML style file

  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 Runtime SDK for Android. Style attributes include 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. Set your attributes to these specifications. See the following code:

    A code snippet of XML file can be found below:

    <?xml version="1.0" encoding="utf-8"?>
    	anchor="5" />

Create an Android layout

  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. Within this element, 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. See the following code:

    A code snippet of resulting XML can be found below:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns: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"
    	<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"
    	<TextView android:layout_height="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"/>

Set the style and content of the callout

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

    Code snippet:

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