MarkerView

The MakerView class can be extended by any user created class in order to display a customized (popup) View whenever a value is highlighted in the chart.

Setting / getting the marker

• setMarkerView(MarkerView mv): Sets a MarkerView for the chart that will be displayed where values are selected.
• getMarkerView(): Returns the MarkerView that has been set for the chart, or null.

Custom implementation

Below you can find an example of what a custom-implementation of the MarkerView could look like. Important is that you implement the following methods:

• refreshContent(Entry e, int dataSetIndex): This method gets called everytime the MarkerView is redrawn, and gives you the chance to update the content it displays (e.g. set the text for a TextView, ...).
• getXOffset(): Here, you should return the offset to the position on the x-axis where the marker is drawn. By default, the marker will be drawn with it's top left edge at the position of the entry.
• getYOffset(): Here, you should return the offset to the position on the y-axis where the marker is drawn. By default, the marker will be drawn with it's top left edge at the position of the entry.

public class CustomMarkerView extends MarkerView {

    private TextView tvContent;

    public CustomMarkerView (Context context, int layoutResource) {
        super(context, layoutResource);
        // this markerview only displays a textview
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, int dataSetIndex) {
        tvContent.setText("" + e.getVal()); // set the entry-value as the display text
    }

    @Override
    public int getXOffset() {
        // this will center the marker-view horizontally
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset() {
        // this will cause the marker-view to be above the selected value
        return -getHeight();
    }
}

After setting up the custom marker class, create a layout in .xml that will represent your marker. The layout in this example only consists of a RelativeLayout with a background image containing a TextView. Of course, you can create any layout you want here.

<?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="40dp"
    android:background="@drawable/markerImage" >

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="7dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text=""
        android:textSize="12dp"
        android:textColor="@android:color/white"
        android:ellipsize="end"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Finally, after you have created your own MarkerView, set it to the chart. When creating your MarkerView, make sure that you provide the layout resource that you created in .xml.

CustomMarkerView mv = new CustomMarkerView (Context, R.layout.custom_marker_view_layout);

// set the marker to the chart
chart.setMarkerView(mv);