2

I'm trying out my luck here with this question since it's kinda design related [will request migration to stackoverflow it needed but I still believe these kind of questions could have their place here].

I have created shape, saved it as an SVG and imported it in Android Studio as Vector Asset. I wanted to create a clip over it and use that as a progressDrawable for my progressBar but it kinda failed.

This is what it should look like:

enter image description here

My drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="256dp"
            android:height="630dp"
            android:viewportHeight="630.062"
            android:viewportWidth="256.997">
            <path
                android:fillColor="#000000"
                android:pathData="M128.9,57.09m-57.09,0a57.09,57.09 0,1 1,114.18 0a57.09,57.09 0,1 1,-114.18 0" />
            <path
                android:fillColor="#000000"
                android:pathData="M27,148.58C12.09,148.58 0,160.67 0,175.58v149.99c0,14.91 12.09,27 27,27s27,-12.09 27,-27V175.58C54,160.67 41.91,148.58 27,148.58z" />
            <path
                android:fillColor="#000000"
                android:pathData="M230,148.58c-14.91,0 -27,12.09 -27,27v149.99c0,14.91 12.09,27 27,27c14.91,0 27,-12.09 27,-27V175.58C257,160.67 244.91,148.58 230,148.58z" />
            <path
                android:fillColor="#000000"
                android:pathData="M127.99,133.58c-34.79,0 -63,-1.79 -63,33v226.49v6.5v203.49c0,14.91 12.09,27 27,27c14.91,0 27,-12.09 27,-27V425.42v-1.77c0,-4.97 4.03,-9 9,-9s9,4.03 9,9v1.77v177.64c0,14.91 12.09,27 27,27c14.91,0 27,-12.09 27,-27V399.57v-6.5V166.58C190.99,131.79 162.79,133.58 127.99,133.58z" />
        </vector>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/colorAccent" />
            </shape>
        </clip>
    </item>
</layer-list>

Used in the layout:

<ProgressBar
     style="?android:attr/progressBarStyleHorizontal"
     android:layout_width="90dp"
     android:layout_height="200dp"
     android:max="100"
     android:progress="70"
     android:progressDrawable="@drawable/vector_progressbar" />
0

My solution so far, even though it's a sort of a hack is to create a cut-out of my shape from a rectangle and color it the same as my background, wrap it inside a RelativeLayout and place the ProgressBar under it with with a small margin, that way, the only visible part of the progress bar is what is shown through the cut-out.

enter image description here

  • For now, from lack of answers I will mark this as the accepted answer till (if) someone else comes with a solution. – Alin Apr 17 '18 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.