Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
265 lines (202 sloc) 12.5 KB


AnimatedPieView is a simple and easy-to-use pie-chart view.

Chinese Doc

jcenter license Android Arsenal Api Author Backers on Open Collective Sponsors on Open Collective


Version 1.2.0 is released, it is recommended to upgrade to this version.

This version was completely rewritten which has better comments and documentation.

Welcome to submit the Bug ~ I will be the first time to solve the problem.


Update Log:

18/07/18 - ver 1.2.4

  • fix autoSize
  • support description label @see #12

Develop Plan (Update Log->Update Log

No plan now....I'm eagerly waiting for your great suggestions.

  • Support legends
  • Support label for description text
  • Project Optimization and Reconstruction, version 1.2.0 release
  • Support alpha to highlight the selected pie
  • Support the pies to have a space between them
  • TextField adapt animation position changed
  • Text Line show animation
  • Click callback
  • Click effect
  • Support click for every pie
  • Support transform between pie-chart and ring-chart
  • Support animation drawing


Description Method Preview
animation drawing -- pie_animation
transform between pie-chart and ring-chart strokeMode(boolean) pie_switch
space between splitAngle(float) pie_split_angle
description text drawText(true) pie_with_text
click effect canTouch(true) / selectListener() pie_click_effect
alpha to highlight (reverse) focusAlphaType(
alpha to highlight focusAlphaType(
description text label IPieInfo.PieOption pie_option


Use in gradle(please replace {latestVersion} to the download badge version)

	dependencies {
	        implementation 'com.github.razerdp:AnimatedPieView:{latestVersion}'

Simple Usage

step 1:Define any class to implement the IPieInfo interface(you can also use SimplePieInfo)

public class Test implements IPieInfo {
    public float getValue() {
        // This return value will determine the percentage
        return 0.5f;

    public int getColor() {
        // This return value will determine the cur-pie color,please return @colorInt,but not @colorRes
        return Color.WHITE;

    public String getDesc() {
        // description text, may not return
        return "这是一个测试";
    public PieOption getPieOpeion() {
       // option for pie,example: descript label
       return mPieOption;

step 2:New AnimatedPieViewConfig and configure it

AnimatedPieView mAnimatedPieView = findViewById(;
AnimatedPieViewConfig config = new AnimatedPieViewConfig();
config.startAngle(-90)// Starting angle offset
      .addData(new SimplePieInfo(30, getColor("FFC5FF8C"), "这是第一段"))//Data (bean that implements the IPieInfo interface)
      .addData(new SimplePieInfo(18.0f, getColor("FFFFD28C"), "这是第二段"))
      ...(addData so on)
      .duration(2000);// draw pie animation duration
// The following two sentences can be replace directly 'mAnimatedPieView.start (config); '


AnimatedPieViewConfig mConfig=mAnimatedPieView.getConfig();
mConfig.animOnTouch(true)// Animation when selected pie(default:true)
       .addData(IPieInfo info, boolean autoDesc)// Add data (bean that implements the IPieInfo interface).autoDesc:automatically add description(e.g. 8.8%)
       .floatExpandAngle(15f)// Selected pie's angle of expansion
       .floatShadowRadius(18f)// Selected pie's shadow of expansion
       .floatUpDuration(500)// Selected pie's floating animation duration
       .floatDownDuration(500)// Last selected pie's float down animation duration
       .floatExpandSize(15)// Selected pie's size of expansion(only for pie-chart,not ring-chart)
       .strokeMode(true)// Whether to draw ring-chart(default:true)
       .strokeWidth(15)// Stroke width for ring-chart 
       .duration(2500)// Animation drawing duration
       .startAngle(-90f)// Starting angle offset
       .selectListener(new OnPieSelectListener<IPieInfo>())// Click callback
       .drawText(true)// Whether to draw a text description
       .textSize(12)// Text description size
       .textMargin(8)// Margin between text and guide line
       .autoSize(true)// Auto fit chart radius
       .pieRadius(100)// Set chart radius
       .pieRadiusRatio(0.8f)// Chart's radius ratio for parent ViewGroup
       .guidePointRadius(2)// Chart's radius
       .guideLineWidth(4)// Text guide line stroke width
       .guideLineMarginStart(8)// Guide point margin from chart
       .textGravity(AnimatedPieViewConfig.ABOVE)// Text Gravity 【
            -AnimatedPieViewConfig.ABOVEText will be drawn above the guide line
            -AnimatedPieViewConfig.BELOWText will be drawn below the guide line
            -AnimatedPieViewConfig.ALIGNText will be drawn align to the guide line
            -AnimatedPieViewConfig.ECTOPICText will be drawn above the line in the 1, 2 quadrants and below the line in the 3, 4 quadrants
       .canTouch(true)// Whether to allow the pie click to enlarge
       .splitAngle(1)// Clearance angle
       .focusAlphaType(AnimatedPieViewConfig.FOCUS_WITH_ALPHA_REV)// Alpha change mode for selected pie
       .interpolator(new DecelerateInterpolator())// Set animation interpolator
       .focusAlpha(150) // Alpha for selected pie (depend on focusAlphaType)
       .legendsWith((ViewGroup) findViewById(, new OnPieLegendBindListener<BasePieLegendsView>() {
                                       public BasePieLegendsView onCreateLegendView(int position, IPieInfo info) {
                                           return position % 2 == 0 ?
                                                   : DefaultCirclePieLegendsView.newInstance(MainActivity.this);

                                       public boolean onAddView(ViewGroup parent, BasePieLegendsView view) {
                                           return false;
                                   }); // Set a legends container to bind legends views

Api in PieOption:

you can decide your pie with create PieOption

    public PieOption getPieOption() {
        return new PieOption()
                .setDefaultSelected(true) // Selected this pie by default
                .setIconHeight(50) // Text icon height
                .setIconWidth(50) // Text icon width
                .setIconScaledHeight(0.5f) // Text icon height scaling
                .setIconScaledWidth(0.5f) // Text icon width scaling
                .setLabelIcon(bitmap) // Text icon bitmap resource
                .setLabelPadding(5) // Icon and text distance
                .setLabelPosition(PieOption.NEAR_PIE); // Decide which position of the icon in the pie

QQ Group:590777418

Welcome to join our QQ group for communication.

Buy me a coffee

Wechat AliPay

Develop Passage:




This project exists thanks to all the people who contribute.


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]