Create rectangle border progress bar in android

问题

I want to create a progress bar which should look like the above image. Someone has an idea to do this, is like a button but the borders are like a progress bar.

Thanks

回答1:

I solved with help of this

How to create Diamond Progress Bar Android

drawable/progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--  background -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="@color/colorWhite" />
        </shape>

    </item>


    <!-- for the actual progress bar -->
    <item android:id="@android:id/progress">
        <clip android:gravity="left">
            <shape>
                <corners android:radius="3dp"/>
                <solid android:color="@color/colorPrimary" />
            </shape>
        </clip>
    </item>

</layer-list>

ButtonProgress.java

public class ButtonProgress implements View.OnClickListener {

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

    private OnClickAcceptListener mOnClickAcceptListener;


    public ButtonProgress(Context context, OnClickAcceptListener listener) {
        this.context = context;
        view = LayoutInflater.from(context).inflate(R.layout.diamond_view, null);
        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);
        title = (TextView) view.findViewById(R.id.dp_title);
        mOnClickAcceptListener = listener;

        title.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        mOnClickAcceptListener.mOnClickButton();
    }

    public interface OnClickAcceptListener {
        void mOnClickButton();
    }

    public void setListenerAccept(OnClickAcceptListener listener) {
        this.mOnClickAcceptListener = listener;
    }

    public View getView() {
        return view;
    }

    public RelativeLayout getHostOfInsideContent() {
        return addView;
    }

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

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

    public void updateProgressBar() {
        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);
                }
            }
        }
    }
}

layout/progress_view.xml

<?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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="vertical"
    android:padding="10dp"
    android:rotation="0">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="63dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="90">

            <RelativeLayout
                android:layout_width="60dp"
                android:layout_height="6dp"
                android:layout_alignParentBottom="true"
                android:rotation="180">

                <ProgressBar
                    android:id="@+id/dp_progress4"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:layout_marginLeft="11dp"
                    android:layout_marginRight="0dp"
                    android:layout_marginBottom="0dp"
                    android:progress="100"
                    android:progressDrawable="@drawable/progress_drawable"
                    android:visibility="visible" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:rotation="180">

            <ProgressBar
                android:id="@+id/dp_progress3"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:layout_marginLeft="0dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="0dp"
                android:progress="100"
                android:progressDrawable="@drawable/progress_drawable" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:rotation="90">

            <ProgressBar
                android:id="@+id/dp_progress2"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="wrap_content"
                android:layout_height="6dp"
                android:layout_marginLeft="0dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:progress="100"
                android:progressDrawable="@drawable/progress_drawable" />
        </RelativeLayout>

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

        <TextView
            android:id="@+id/dp_title"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:fontFamily="@font/nexa_regular"
            android:gravity="center"
            android:text="@string/action_accept"
            android:textColor="@color/colorWhite"
            android:textSize="18sp" />
    </RelativeLayout>
</RelativeLayout>

and finally in your view

buttonProgress = new ButtonProgress(getBaseActivity(), this);
        buttonProgress.setListenerAccept(this);
        buttonProgress.setMax(1000);

 waitTimer = new Timer();
        waitTimer.scheduleAtFixedRate(new TimerTask() {
            @Override
            public void run() {
                try {
                    getBaseActivity().runOnUiThread(() -> buttonProgress.setProgress(count++));
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }, 0, time);

回答2:

I never did animations. Although I did draw a few customs svg icons for android and pdf for iOS with gimp.

I would try:

First, draw a rectangle in clockwise (because this is the direction that you want, no?).

Second, check the result in android.

Third, import the SVG in https://shapeshifter.design/ trying following https://www.youtube.com/watch?v=EuZIU_5O63Y

Best Regards!

来源：https://stackoverflow.com/questions/59513710/create-rectangle-border-progress-bar-in-android