How To Create Diamond Progress Bar Android

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

Solution 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;
intcount=1;

@OverrideprotectedvoidonCreate(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 barfinalDiamondProgressdiamondProgress=newDiamondProgress(this);
    diamondProgress.setMax(1000);

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

    /* Sample Code for animating the progress bar*/newTimer().scheduleAtFixedRate(newTimerTask() {
        @Overridepublicvoidrun() {
            runOnUiThread(newRunnable() {
                @Overridepublicvoidrun() {
                    diamondProgress.setProgress(count++);
                }
            });
        }
    }, 0, 25);


}

Code:

XML: layout/diamond_view

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns: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"><RelativeLayoutandroid:layout_width="200dp"android:layout_height="200dp"><RelativeLayoutandroid:layout_width="wrap_content"android:rotation="90"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="8dp"android:layout_alignParentBottom="true"android:rotation="180"><ProgressBarandroid: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><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="8dp"android:layout_alignParentBottom="true"android:rotation="180"><ProgressBarandroid: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><RelativeLayoutandroid:layout_width="wrap_content"android:rotation="90"android:layout_height="match_parent"><ProgressBarandroid: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><ProgressBarandroid: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.CardViewandroid:layout_width="match_parent"android:layout_margin="4dp"android:id="@+id/dp_card"android:elevation="10dp"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="wrap_content"android:rotation="-45"android:id="@+id/dp_addView"android:layout_height="wrap_content"><TextViewandroid: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>

XML: drawable/progress_drawable

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><!--  background --><itemandroid:id="@android:id/background"><shape><cornersandroid:radius="3dp"/><solidandroid:color="#f2f2f2" /></shape></item><!-- for the actual progress bar --><itemandroid:id="@android:id/progress"><clipandroid:gravity="left"><shape><cornersandroid:radius="3dp"/><solidandroid:color="@color/colorAccent" /></shape></clip></item></layer-list>

Java Class

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;

/**
 * Created by Pythogen on 9/27/2017.
 */

public classDiamondProgress {

    Context context;
    View view;
    RelativeLayout addView;
    int progress = 0;
    int max = 100;
    ProgressBar p1;
    ProgressBar p2;
    ProgressBar p3;
    ProgressBar p4;


    public DiamondProgress(Context context) {
        this.context = context;
        view = LayoutInflater.from(context).inflate(R.layout.diamond_view, null);
        addView = ((RelativeLayout) view.findViewById(R.id.dp_addView));
        p1 = (ProgressBar) view.findViewById(R.id.dp_progress1);
        p2 = (ProgressBar) view.findViewById(R.id.dp_progress2);
        p3 = (ProgressBar) view.findViewById(R.id.dp_progress3);
        p4 = (ProgressBar) view.findViewById(R.id.dp_progress4);

    }

    public ViewgetView() {
        return view;
    }

    public RelativeLayoutgetHostOfInsideContent() {
        return addView;
    }

    public voidsetProgress(int progress) {
        this.progress = progress;
        updateProgressBar();
    }

    public voidsetMax(int max) {
        this.max = max;
        p1.setMax(max);
        p2.setMax(max);
        p3.setMax(max);
        p4.setMax(max);
    }

    public voidupdateProgressBar() {
        double prog = ((double)progress)/max;
        if (prog<.25) {
            p1.setProgress(this.progress*4);
            p2.setProgress(0);
            p3.setProgress(0);
            p4.setProgress(0);
        } else {
            p1.setProgress(max);
            if (prog<.5) {
                p2.setProgress((this.progress*4)-max);
                p3.setProgress(0);
                p4.setProgress(0);
            } else {
                p2.setProgress(max);
                if (prog<.75) {
                    p3.setProgress((this.progress*4)-max*2);
                    p4.setProgress(0);
                } else {
                    p3.setProgress(max);
                    p4.setProgress((this.progress*4)-max*3);
                }
            }
        }
    }
}

Oh, and if you plan on using this, be sure to add the CardView dependancy to your build.grade compile 'com.android.support:cardview-v7:25.1.1'