MPAndroidChart PieChart how to change the center text to display the different color and font size

Question

Currently I use the MPAndroidChart from GITHUB and draw the piechart to display the two line text, each line has different color and different font size,I check the source codes

Answer 1

You can accomplish this without modifying MPAndroidChart source by nesting your com.github.mikephil.charting.charts.PieChart component and your center text within a RelativeLayout in your activity layout. You can use a LinearLayout component to format your center text rows.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >
    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.github.mikephil.charting.charts.PieChart>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="vertical">
        <TextView
            android:id="@+id/pieChartMonthlyAverage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStat"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:text="@string/charts.label.average"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:layout_marginTop="-4dp"
            android:text="@string/charts.label.monthly"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/ChartStatLabel"
            android:layout_marginTop="-4dp"
            android:text="@string/charts.label.bill"/>
    </LinearLayout>
</RelativeLayout>

Be careful to place your LinearLayout containing your center text below your PieChart component. Here is the end result.

Answer 2

Use public void setCenterText(CharSequence text) on the chart and pass a SpannableString as its argument. Style your SpannableString to your heart's content.

Answer 3

PieData data = new PieData(dataSet);  
pieChart.setCenterText("Total Questions 5" );        
pieChart.setCenterTextSize(14f);
pieChart.setCenterTextColor(Color.BLUE);

Answer 4

after study the source codes, i change the PieChartRenderer.java to change the mCenterTextPaint.setColor(Color.parseColor("#333333")); mCenterTextPaint.setTextSize(Utils.convertDpToPixel(20f)); mCenterTextPaint.setTextAlign(Align.CENTER);

then use the "\n" as a split to get the first line

   int index = centerText.indexOf("\n");

   Spannable tempSpannable = new SpannableString(centerText);
   tempSpannable.setSpan(new RelativeSizeSpan(0.75f), 0, index, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
   tempSpannable.setSpan(new ForegroundColorSpan(Color.parseColor("#999999")),
                        0, index, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

   // If width is 0, it will crash. Always have a minimum of 1
   mCenterTextLayout = new StaticLayout(tempSpannable, 0, centerText.length(),
                        mCenterTextPaint,
                        (int)Math.max(Math.ceil(mCenterTextLastBounds.width()), 1.f),
                        Layout.Alignment.ALIGN_NORMAL, 1.f, 0.f, false);

then get what i wanted is