Skobbler callout tail imageview displayed incorrectly Android SDK 2.5.1

Question

I have code that adds a custom annotation callout view to be displayed whenever an annotation is selected my Skobbler mapview.

@Override
public void onAnnotationSelected(final SKAnnotation annotation) {
  ...
  mapPopup = mapHolder.getCalloutView();
  // set the callout view’s background color
  mapPopup.setViewColor(Color.WHITE);
  View view = getLayoutInflater().inflate(R.layout.map_callout, null);
  ...
  mapPopup.setCustomView(view);
  // setting 2nd parameter to 'true' will cause tail to be displayed
  mapPopup.showAtLocation(annotation.getLocation(), true);
  ...
}

I also request in the showAtLocation() call that the callout view be displayed with the "tail" imageview. However, when I test in the app, I see that the tail appears at the top of my map_surface_holder RelativeLayout container instead of at the bottom of the FrameLayout container that displays the callout popup view.

When I pan the map, I can see that the tail view moves left and right relative to the movement of the callout view, but it remains aligned to the top of the map_surface_holder container, never moving up or down.

Do I need to add some code somewhere to make the tail image view aware of where it should be placed in the y-axis direction of the RelativeLayout container?

I did try adding a call to mapPopup.setVerticalOffset(offset) to see if that had any effect, but the tail image remained locked to the top of the screen.

One other difference I could see between my custom callout view and the default one provided by the Skobbler is that the standard view is a RelativeLayout container while my implementation is a FrameLayout. However, I'm not sure that it should matter since the Tail ImageView here is being added to the parent of my callout view, not as a child.

Thank you in advance for any help in the matter, and let me know if any additional details would be helpful.

Thanks!

Montgolfier

we're looking into it – Vlf

Please check if the solution provided on the forum fixes the problem: forum.skobbler.com/showthread.php/… – Vlf

Answer 1

We've tried to reproduce the problem with both 2.5.1 and 3.X - but we weren't able.

Here is the code we used:

//MapActivity
    @Override
    onCreate(Bundle savedInstanceState)
    {
    …
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    mapPopup = mapViewGroup.getCalloutView();
    View view = inflater.inflate(R.layout.layout_popup, null);
    popupTitleView = (TextView) view.findViewById(R.id.top_text);
    popupDescriptionView = (TextView) view.findViewById(R.id.bottom_text);
    mapPopup.setCustomView(view);
    …
    }

@Override
public void onAnnotationSelected(final SKAnnotation annotation) {
    if (navigationUI.getVisibility() == View.VISIBLE) {
        return;
    }
    // show the popup at the proper position when selecting an
    // annotation
    int annotationHeight = 0;
    float annotationOffset = annotation.getOffset().getY();
    switch (annotation.getUniqueID()) {
        case 10:
            annotationHeight =(int) (64 * getResources().getDisplayMetrics().density);
            popupTitleView.setText("Annotation using  texture ID ");
            popupDescriptionView.setText(null);
            break;
        case 11:
            annotationHeight = customView.getHeight();
            popupTitleView.setText("Annotation using custom view");
            popupDescriptionView.setText(null);
            break;
    }
    mapPopup.setVerticalOffset(-annotationOffset + annotationHeight / 2);
    mapPopup.showAtLocation(annotation.getLocation(), true);
}

//layout_popup.xml

<ImageView
    android:id="@+id/left_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:clickable="true"
    android:padding="5dp"
    android:src="@drawable/icon_map_popup_navigate" />

<LinearLayout
    android:id="@+id/mid_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/left_image"
    android:orientation="vertical"
    android:paddingBottom="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    android:weightSum="1" >

    <TextView
        android:id="@+id/top_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Title text"
        android:textColor="@color/black"
        android:textSize="18dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/bottom_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:linksClickable="true"
        android:text="Subtitle text"
        android:textColor="@color/black"
        android:textSize="14dp" />
</LinearLayout>

Alicyclic