CODEWITHSUNDEEP
androidxmlandroid-layout
Vishal Sanghani
Vishal Sanghani

Reputation: 894

Border around progress bar

I am trying to get border around a progress bar, but not able to get

What I am getting:

What I am getting

I don't want to fill the background with blue colour.

This is what I want:

Want

This is the XML file

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#1669A0" />
        <corners android:radius="10dp" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <layer-list>
            <item>
                <color android:color="#00000000" />
            </item>
            <item
                android:left="5dp"
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp">
                <shape>
                    <solid android:color="#00FF00" />
                    <corners android:radius="10dp" />
                </shape>
            </item>
        </layer-list>
    </clip>
</item>
</layer-list>

Upvotes: 7

Views: 8950

Answers (3)

Ian
Ian

Reputation: 31

You can try this :

<ProgressBar 
    android:id="@+id/ProgressBar01" 
    android:layout_width="121dp" 
    android:layout_height="15dp" 
    android:progress="50"
    android:max="100" 
    android:secondaryProgress="0"
    style="?android:attr/progressBarStyleHorizontal" 
    android:progressDrawable="@drawable/myprogressbar" 
    android:layout_marginTop="10dp"/>

and use this drawable (myprogressbar.xml)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="25dip" />
            <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF"
                android:centerY="0.75" android:endColor="#ffffff" android:angle="90" />
            <stroke android:width="1dp" android:color="#6B8E23" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="25dip" />
                <gradient android:startColor="#9ACD32" android:endColor="#FFFF00"
                    android:angle="90" />
                <stroke android:width="1dp" android:color="#6B8E23" />
            </shape>
        </clip>
    </item>
</layer-list>

As explained in this article

Upvotes: 3

Lotos
Lotos

Reputation: 231

Maybe it will be helpful for other people who have the same problem: You can just add line in shape section to add stroke (as a border) to it and then add proper padding in progress section (usually equal or bigger than stroke width).

Example:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="YOUR BACKGROUND COLOR HERE"/>
            <stroke android:color="YOUR BORDER COLOR HERE" android:width="5dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress"
        android:top="5dp"
        android:bottom="5dp"
        android:right="5dp"
        android:left="5dp">
        <clip>
            <scale android:scaleWidth="100%" >
                <shape>
                    <corners android:radius="10dp"/>
                    <solid android:color="YOUR PROGRESS COLOR HERE"/>
                </shape>
            </scale>
        </clip>
    </item>
</layer-list>

You will get something like that: enter image description here

Upvotes: 15

Jake
Jake

Reputation: 1000

Try changing #00000000 to #ffffff (six 'f's). #00000000 is transparent, while #ffffff is white. If you use#00000000, you will only see the color that is directly behind that layer (in this case, blue).

Upvotes: 1

Related Questions