How to create Diamond Progress Bar Android

Question

My Client wants a diamond shaped progress that looks like this:

My first attempt was to use a library, but I can't find one that exists

My next attempt was to learn how to use the ProgressBar view that comes with android, and set my own drawable using this answer (the closest thing to an answer on stack overflow), but the answer only works on ring shapes, not rectangles.

What is the best way to create a diamond-shaped progress view? (By any means: custom view, progressDrawable) and how do I do that?

Answer 1

After some more tests, I came up with a hacky answer. It's just 4 progress bars aligned to the edge of a Relative layout, and a CardView on top of them. Rotate the whole thing, and wrap it in a class and bam, you got yourself a diamond progress bar. (Use math to calculate the progress of each bar)

It can be a little weird on the corners (where the progress bars overlap) but overall it works well enough

Usage:

ViewGroup background;
int count = 1;

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

    //Something to add the progress bar to
    background = (ViewGroup) findViewById(R.id.relative);

    //initializing the progress bar
    final DiamondProgress diamondProgress = new DiamondProgress(this);
    diamondProgress.setMax(1000);

    //adding the progress bar
    background.addView(diamondProgress.getView());

    /* Sample Code for animating the progress bar*/
    new Timer().scheduleAtFixedRate(new TimerTask() {
        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    diamondProgress.setProgress(count++);
                }
            });
        }
    }, 0, 25);


}

Code:

XML: layout/diamond_view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:rotation="45"
    android:padding="43dp"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="200dp">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:rotation="90"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="8dp"
                android:layout_alignParentBottom="true"
                android:rotation="180">
                <ProgressBar
                    android:layout_width="match_parent"
                    android:layout_height="8dp"
                    android:layout_marginLeft="3dp"
                    android:id="@+id/dp_progress4"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:progressDrawable="@drawable/progress_drawable"
                    android:layout_alignParentBottom="true" />
            </RelativeLayout>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="8dp"
            android:layout_alignParentBottom="true"
            android:rotation="180">
            <ProgressBar
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_marginLeft="3dp"
                android:progress="50"
                android:id="@+id/dp_progress3"
                android:progressDrawable="@drawable/progress_drawable"
                style="?android:attr/progressBarStyleHorizontal"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:rotation="90"
            android:layout_height="match_parent">
            <ProgressBar
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_marginLeft="3dp"
                android:progress="100"
                android:id="@+id/dp_progress2"
                android:progressDrawable="@drawable/progress_drawable"
                style="?android:attr/progressBarStyleHorizontal" />
        </RelativeLayout>

        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:layout_marginLeft="3dp"
            android:progress="100"
            android:progressDrawable="@drawable/progress_drawable"
            style="?android:attr/progressBarStyleHorizontal"
            android:id="@+id/dp_progress1"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_margin="4dp"
            android:id="@+id/dp_card"
            android:elevation="10dp"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:rotation="-45"
                android:id="@+id/dp_addView"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Sample Inside Content"
                    android:id="@+id/dp_text"
                    android:gravity="center"
                    android:textSize="24sp"/>
            </RelativeLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>


</RelativeLayout>