How to represent circle border with multiple colors in android

Question

I am looking for a custom widget to draw a circle with multiple border colors.

Say for example if my total circle represent 0-360, I need to color my circle border with different colors.

For example, I need to mark 0-60 with red, 61-120 with green, 121-300 with magenta and 301-360 with yellow border color.

please suggest me how I can do it in android.

Answer 1

You application is pretty simple. I don't recommend your using an external library. You can quickly implement a class that draws and manages your desired shape. An example is presented:

public class DifferentColorCircularBorder{

    private RelativeLayout parentLayout;

    public DifferentColorCircularBorder(RelativeLayout parentLayout) {
        this.parentLayout = parentLayout;
    }

    public void addBorderPortion(Context context, int color, int startDegree, int endDegree) {
        ProgressBar portion = getBorderPortion(context, color, startDegree, endDegree);
        parentLayout.addView(portion);
    }

    private ProgressBar getBorderPortion(Context context, int color, int startDegree, int endDegree) {
        LayoutInflater inflater = LayoutInflater.from(context);

        ProgressBar portion = (ProgressBar) inflater.inflate(R.layout.border_portion, parentLayout, false);
        portion.setRotation(startDegree);
        portion.setProgress(endDegree - startDegree);

        portion.getProgressDrawable().setColorFilter(color, Mode.SRC_ATOP);

        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) portion.getLayoutParams();
        params.addRule(RelativeLayout.CENTER_IN_PARENT);
        portion.setLayoutParams(params);

        return portion;
    }

}

border_portion is defined as below:

<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="220dp"
    android:layout_height="220dp"
    android:progressDrawable="@drawable/circle_exterior"
    android:layout_centerInParent="true"
    android:max="360"/>

circle_exterior is defined here:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="10dp" >

    <solid android:color="#ff111111" />    

</shape>

The MainActivity class is defined like this:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout interiorLayout = (RelativeLayout) findViewById(R.id.interior);

        DifferentColorCircularBorder border = new DifferentColorCircularBorder(interiorLayout);
        border.addBorderPortion(getApplicationContext(), Color.RED, 0, 40);
        border.addBorderPortion(getApplicationContext(), Color.GREEN, 40, 90);
        border.addBorderPortion(getApplicationContext(), Color.BLUE, 90, 270);
        border.addBorderPortion(getApplicationContext(), 0xFF123456, 270, 360);

    }
}

finally activity_main layout is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <RelativeLayout
        android:id="@+id/interior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <View
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/circle_interior_bg"
            android:layout_centerInParent="true" />

    </RelativeLayout>

</RelativeLayout>

Explanation about the dimensions: This is an example. Here, I have picked the dimensions to fit the circle perfectly. Change these based on your application.

Image sample:

Answer 2

i just created a simple Library for that purpose CircularStatusView , it was inspired by WhatsApp Status and it's easy to use.

first up add the view, in my case i've added it around CircleImageView but you can use on any view.

<RelativeLayout
        android:id="@+id/image_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_centerInParent="true"
            android:padding="6dp"
            android:src="@mipmap/ic_launcher" />

        <com.devlomi.circularstatusview.CircularStatusView
            android:id="@+id/circular_status_view"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_centerInParent="true"
            app:portion_color="@color/colorAccent"
            app:portion_spacing="4dp"
            app:portion_width="4dp"
            app:portions_count="8" />
    </RelativeLayout>

you can set the portions count Programmatically by using:

circularStatusView.setPortionsCount(count);

and for the portions color:

circularStatusView.setPortionsColor(color);

you can also set specific color for every portion:

circularStatusView.setPortionColorForIndex(/*index of portions starting from first portion at the top CW */ i, color);

Answer 3

for this you can try this library that i had come across https://github.com/mucahitsidimi/GaugeView might be useful.

uses a custom view of fixed lengths to render the circle by using canvas