Dark shadow left at the end while using using light and dark version of same color.

[AdarshYadav]

I am drawing two arc in WheelIndicatorView using following color codes #cc0000(dark red) & #66cc0000(light red). I have added dark red first and then light red but there is a dot(.) with dark red color left at the end(see the attachment). Below is my code -

    verifiedWheel = new WheelIndicatorItem(verified , getResources().getColor(R.color.red));
   mWheelIndicatorView.addWheelIndicatorItem(20);

    connectedWheel = new WheelIndicatorItem(connected ,              getResources().getColor(R.color.light_red));
    mWheelIndicatorView.addWheelIndicatorItem(50);

    mWheelIndicatorView.setFilledPercent(70);
    mWheelIndicatorView.startItemsAnimation();

[Sutirth]

Hey Adarsh how are you putting text in between the wheel indicator view through xml?? Can you help me in doing the same.

[AdarshYadav]

@Sutirth :- I didn't it as following:-

   <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/dimen_38">
   <com.virginred.ui.custom.wheelview.WheelIndicatorView
    android:layout_width="@dimen/point_pop_up_round_view"
    android:layout_height="@dimen/point_pop_up_round_view"
    android:layout_centerInParent="true"
    android:id="@+id/wheel_indicator_view"
    app:itemsLineWidth="@dimen/my_business_outer_circle_width"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/points_points"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/red"
            android:textSize="@dimen/text_28"
            app:typeface="roboto_bold_italic"
            android:text="0"/>

        <com.devspark.robototextview.widget.RobotoTextView
            android:id="@+id/vault_desc_points"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/general_monthly_pts"
            android:textColor="@color/product_text_view_backgroud"
            android:textSize="@dimen/text_14"
            app:typeface="roboto_regular" />
    </LinearLayout>

[Sutirth]

@AdarshYadav Thanks for posting But I figured it out quite a while used the FrameLayout with text for the same.

Cheers!!!

[dlazaro66]

@AdarshYadav I notice you're using a color with Alpha value (#66cc0000). That's the reason the indicator is showing like that. If you go deep into the code, you will see how is done (first paint a curved line, and then two points). So when drawing alpha color over alpha color you will get that. I suggest you at this moment to use only solid colors when using the indicator view.

[AdarshYadav]

@dlazaro66 :- I guess you are right. But on other hand I have fixed it by commenting following code inside draw function in WheelIndicatorView.java. Which will update draw function like:-

private void draw(WheelIndicatorItem indicatorItem, RectF surfaceRectF, float angle, Canvas canvas) {
    itemArcPaint.setColor(indicatorItem.getColor());
    itemEndPointsPaint.setColor(indicatorItem.getColor());
    // Draw arc
    canvas.drawArc(surfaceRectF, ANGLE_INIT_OFFSET, angle, false, itemArcPaint);
    // Draw top circle
    // canvas.drawCircle(minDistViewSize / 2, 0 + itemsLineWidth, itemsLineWidth,    itemEndPointsPaint);
    // int topPosition = minDistViewSize / 2 - itemsLineWidth;
    // Draw end circle
    // canvas.drawCircle((float) (Math.cos(Math.toRadians(angle + ANGLE_INIT_OFFSET)) * topPosition + topPosition + itemsLineWidth),
    // (float) (Math.sin(Math.toRadians((angle + ANGLE_INIT_OFFSET))) * topPosition +  topPosition + itemsLineWidth), itemsLineWidth, itemEndPointsPaint);
}