Hyperlink in Callout

[JohnAllen]

In my Android app I created a callout that displays the contents of my website field (Web Addresses).
I'm unable to click on the website inside the callout and navigate to the web address.

What am I doing wrong?
How do I make just the website clickable or an actual hyperlink?

Thanks,

John

[DanO_Neill]

Can you share some code and/or the logcat exception if there is one?

[JohnAllen]

Here is some of my java code:

public class Mapscreen extends Activity {

 public MapView map;
 public boolean m_isMapLoaded;
  
 //Callout Variables
 private int m_calloutStyle;
 private Callout m_callout;
 private ViewGroup calloutContent;
 private Graphic m_identifiedGraphic;
  ArcGISFeatureLayer fLayer; 
 ImageView CallOutClose;

 /** Called when the activity is first created. */
 public void onCreate(Bundle savedInstanceState) {
  // Initial activity content view. (START)
  super.onCreate(savedInstanceState);
  setContentView(R.layout.mapscreen);

  // Retrieve the map layout and initial extent from mapscreen XML layout.
  map = (MapView) findViewById(R.id.map); 
  
  // Add ESRI basemap layer to MapView.
  map.addLayer(new ArcGISTiledMapServiceLayer("" +
  "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"));
  
  // Add Feature layer to the MapView
  String URL = "ADD YOUR MAP SERIVCE HERE";
  ArcGISFeatureLayer fLayer = new ArcGISFeatureLayer(URL, MODE.ONDEMAND);
  map.addLayer(fLayer); 

  // This puts the ERSI logo on the bottom left corner of the screen once the map screen appears. This is mandatory 
                //  by ESRI.
  map.setEsriLogoVisible(true);  
  
  LayoutInflater inflater = getLayoutInflater();
  // Get the MapView's callout from xml->identify_calloutstyle.xml
  m_calloutStyle = R.xml.facility_calloutstyle;
  // Get the layout for the Callout from layout->identify_callout_content.xml
  calloutContent = (ViewGroup) inflater.inflate(R.layout.facility_callout_content, null);  
  
  m_callout = map.getCallout();  
  m_callout.setContent(calloutContent); 
  

  // This initiates/starts the loading dialog when entering into map screen.
  final ProgressDialog loadingDialog = new ProgressDialog(this);
  loadingDialog.setMessage("Loading...");
  loadingDialog.show();
  
  // This initiates the listening process to see if the map loads.
  map.setOnStatusChangedListener(new OnStatusChangedListener() {

   private static final long serialVersionUID = 1L;

   @Override
   public void onStatusChanged(Object source, STATUS status) {

    // Check to see if map has successfully loaded or Initialized.
    if ((source == map) && (status == STATUS.INITIALIZED)) {
     // If the map is loaded successfully set the flag to true and hide the loading dialog.
     m_isMapLoaded = true;
     loadingDialog.hide();
    }

    // Check to see if the map has unsuccessfully loaded or Initialization failed.
    // Initialization failed typically results from no wireless connectivity.
    if (OnStatusChangedListener.STATUS.INITIALIZATION_FAILED == status) {
     // If the map did not load set the flag as false and hide the loading dialog.
     m_isMapLoaded = false;
     loadingDialog.hide();

     // Because the map failed to load, the following toast will appear briefly with the following message.
     Toast toast = Toast.makeText(Mapscreen.this,"Failed to load...Connection 
                                         Issue",Toast.LENGTH_LONG);
     toast.setGravity(Gravity.CENTER, 0, 0);
     toast.show();
    }
   }

  });
  
 //Callout Part - 1
  map.setOnSingleTapListener(new OnSingleTapListener() {

   private static final long serialVersionUID = 1L;

   @Override
   public void onSingleTap(float x, float y) {

    if (m_isMapLoaded) {
     // If map is initialized and Single tap is registered on screen identify the location selected
     identifyLocation(x, y);
    }
   }
  });
 
 } 
 // Initial activity content view. (END)
 
 //Callout Part - 2
 /**
  * Takes in the screen location of the point to identify the feature on map.
  * 
  * @param x
  *            x co-ordinate of point
  * @param y
  *            y co-ordinate of point
  */
 private void identifyLocation(float x, float y) {

  // Hide the callout, if the callout from previous tap is still showing on map
  if (m_callout.isShowing()) {
   m_callout.hide();
  }

  // Find out if the user tapped on a feature
  SearchForFeature(x, y);

  // If the user tapped on a feature, then display information regarding the feature in the callout
  if (m_identifiedGraphic != null) {
   Point mapPoint = map.toMapPoint(x, y);
   // Show Callout
   ShowCallout(m_callout, m_identifiedGraphic, mapPoint);
   //Close button for the callout is initiated here.
   ImageView CallOutClose = (ImageView) findViewById(R.id.callout_close_button);
   CallOutClose.setOnClickListener(new View.OnClickListener() {
    
    @Override
    public void onClick(View v) {
     m_callout.hide();
     
    }
   });
  }
 }
 
 //Callout Part - 3
 /**
  * Sets the value of m_identifiedGraphic to the Graphic present on the
  * location of screen tap
  * 
  * @param x
  *            x co-ordinate of point
  * @param y
  *            y co-ordinate of point
  */
 private void SearchForFeature(float x, float y) {

  Point mapPoint = map.toMapPoint(x, y);

  if (mapPoint != null) {

   for (Layer layer : map.getLayers()) {
    if (layer == null)
     continue;

    if (layer instanceof ArcGISFeatureLayer) {
     ArcGISFeatureLayer fLayer = (ArcGISFeatureLayer) layer;
     // Get the Graphic at location x,y
     m_identifiedGraphic = GetFeature(fLayer, x, y);
    } else
     continue;
   }
  }
 }
 
 //Callout Part - 4
 /**
  * Returns the Graphic present the location of screen tap
  * 
  * @param fLayer
  * @param x
  *            x co-ordinate of point
  * @param y
  *            y co-ordinate of point
  * @return Graphic at location x,y
  */
 private Graphic GetFeature(ArcGISFeatureLayer fLayer, float x, float y) {

  // Get the graphics near the Point.
  int[] ids = fLayer.getGraphicIDs(x, y, 10, 1);
  if (ids == null || ids.length == 0) {
   return null;
  }
  Graphic g = fLayer.getGraphic(ids[0]);
  return g;
 }
 
 //Callout Part - 5
 /**
  * Shows the Attribute values for the Graphic in the Callout
  * 
  * @param calloutView
  * @param graphic
  * @param mapPoint
  */
 private void ShowCallout(Callout calloutView, Graphic graphic, Point mapPoint) {

  // Get the values of attributes for the Graphic
  String Name = (String) graphic.getAttributeValue("Name");
  String Phone = (String) graphic.getAttributeValue("Phone");  
  String LatDegMinSec = (String) graphic.getAttributeValue("LatDegMinSec");
  String LongDegMinSec = (String) graphic.getAttributeValue("LongDegMinSec");
  String Website = (String) graphic.getAttributeValue("Website");  

   // Set callout properties
   calloutView.setCoordinates(mapPoint);
   calloutView.setStyle(m_calloutStyle);
   calloutView.setMaxWidth(700);
   calloutView.setMaxHeight(500);

  // Compose the string to display the results
  StringBuilder FacilityCallout = new StringBuilder();
   FacilityCallout.append("Facility:\t" + Name);
  FacilityCallout.append("\nPhone:\t" + Phone);  
  FacilityCallout.append("\nLatitude:\t" + LatDegMinSec);
  FacilityCallout.append("\nLongitude:\t" + LongDegMinSec); 
  FacilityCallout.append("\nWebsite:\t" + Website);

  TextView calloutTextLine1 = (TextView) findViewById(R.id.callout_content_textview);
  calloutTextLine1.setText(FacilityCallout);  
  calloutView.show();
 } 
 

[JohnAllen]

Has anybody else experienced this problem? Is this a problem or am I not doing something right?

[deleted-user-ATjHIWsdQYmT]

Try something like this (my syntax might be off, but close 😉 😞

FacilityCallout.append(Html.fromHtml("<a href=\"" + Website + "\">Website</a>"));

[JohnAllen]

Andrew thank you for the reply.
I tried your way and kinda got it to work, and then I found another way of making the web site a hyper link.
This is the website I found my information on: http://stackoverflow.com/questions/2734270/how-do-i-make-links-in-a-textview-clickable

All I did was add:

android:autoLink="web"
android:clickable="true"

to my callout TextView in XML layout file and it automatically understood I was using a website and added a hyper-link.


You can also add (phone,map..ect):

android:autoLink="web|phone"

and it will let you click a phone number and direct your screen to the dialer.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/identifyCallout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:orientation="horizontal" >

    <!-- Display field value -->

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true" >

        <TextView
            android:id="@+id/callout_content_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:autoLink="web|phone"
            android:clickable="true"
            android:paddingRight="5dp" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/callout_close_button"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:clickable="true"
        android:src="@drawable/b_close" />

</LinearLayout>

Now I'm working on making my latitude,longitude use Google navigation app when clicked. It's a little different. I'll post when I figure it out completely.

[JohnAllen]

Update:

To get the proper hyperlinks I needed in my apps callouts I had to make some changes.

I changed my app to include both autoLink="" in XML and (Html.fromHtml()); in Java code.

autoLink="" works well if you want to hyper link a phone number, email address, web site, all...ect. in a callout, but it doesn't read lat.long correctly.

I needed the user to be able to select the Lat.Long in the callout and open Google Navigation. The autoLink="" in XML would not do this. So I had to combine/use autoLink="" in XML and (Html.fromHtml()); in Java code.

autoLink="" in XML tries to make all numbers a phone number thus assigning my Lat./Long into a phone number hyperlink. When selected it would make it route the user to the dial pad with numbers (For example: 3445632 in phones dial pad). All-in-All the software isn't smart enough to look at lat.long and determine it needs to map it in Google.

To fix this, I got rid of the StringBuilder with one TextView and made all TextViews to control each line of text in the callout from XML or Java code. Thus, being able to link certain text in different hyperlink "formats".

Instead of making the lat.long. a hyperlink, I made another TextView and used a string called Directions. Directions string uses a web address of each facilities lat.long. (For Exmple: http://maps.google.com/?daddr=56.3546,34.322546) that is stored as an attribute column in my published layer. (See Image 1)

When "Map It" hyperlink is selected Google Maps is opened via the Lat.Long webaddress: (Image 3)

Basically I use ESRI API for the app, but use Google for navigation.

XML Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/identifyCallout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:orientation="horizontal" >

    <!-- Display field value -->

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true" >

        <TextView
            android:id="@+id/callout_content_textview0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"              
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/callout_content_textview0"
            android:autoLink="phone"
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_below="@id/callout_content_textview1"             
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:layout_below="@id/callout_content_textview2"            
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"   
            android:layout_below="@id/callout_content_textview3"           
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"   
            android:layout_below="@id/callout_content_textview4"           
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_below="@id/callout_content_textview5"                         
            android:paddingRight="5dp" />
        
        <TextView
            android:id="@+id/callout_content_textview7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/callout_content_textview6"   
            android:autoLink="web"       
            android:paddingRight="5dp" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/callout_close_button"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:clickable="true"
        android:src="@drawable/b_close" />

</LinearLayout>

Portion of Java Code:

private void ShowCallout(Callout calloutView, Graphic graphic, Point mapPoint) {

  // Get the values of attributes for the Graphic
  String Name = (String) graphic.getAttributeValue("Name");
  String Phone = (String) graphic.getAttributeValue("Phone");
  String Type = (String) graphic.getAttributeValue("Type");
  String Grade = (String) graphic.getAttributeValue("Grade");
  String Directions = (String) graphic.getAttributeValue("LatLongWebLink");
  String LatDegMinSec = (String) graphic.getAttributeValue("LatDegMinSec");
  String LongDegMinSec = (String) graphic.getAttributeValue("LongDegMinSec");
  String Website = (String) graphic.getAttributeValue("Website");  

  // Set callout properties
  calloutView.setCoordinates(mapPoint);
  calloutView.setStyle(m_calloutStyle);
  calloutView.setMaxWidth(700);
  calloutView.setMaxHeight(500);

  TextView calloutTextLine0 = (TextView) findViewById(R.id.callout_content_textview0);     
  calloutTextLine0.setText("Name:" + " " + Name);
  
  TextView calloutTextLine1 = (TextView) findViewById(R.id.callout_content_textview1); 
  calloutTextLine1.setMovementMethod(LinkMovementMethod.getInstance());
  calloutTextLine1.setText("Phone:" + " " + Phone);
  
  TextView calloutTextLine2 = (TextView) findViewById(R.id.callout_content_textview2);     
  calloutTextLine2.setText("Type:" + " " + Type);
  
  TextView calloutTextLine3 = (TextView) findViewById(R.id.callout_content_textview3);     
  calloutTextLine3.setText("Grade:" + " " + Grade);
  
  TextView calloutTextLine4 = (TextView) findViewById(R.id.callout_content_textview4);
  calloutTextLine4.setMovementMethod(LinkMovementMethod.getInstance());
  calloutTextLine4.setText(Html.fromHtml("Directions:" + " " + "<a href=\"" + Directions + "\">Map It</a>"));
  
  TextView calloutTextLine5 = (TextView) findViewById(R.id.callout_content_textview5);     
  calloutTextLine5.setText("Latitude:" + " " + LatDegMinSec);
  
  TextView calloutTextLine6 = (TextView) findViewById(R.id.callout_content_textview6);     
  calloutTextLine6.setText("Longitude:" + " " + LongDegMinSec);
  
  TextView calloutTextLine7 = (TextView) findViewById(R.id.callout_content_textview7);
  calloutTextLine7.setMovementMethod(LinkMovementMethod.getInstance());
  calloutTextLine7.setText("Website:" + " " + Website);    
  
  calloutView.show();
 }