CODEWITHSUNDEEP
androidmaterial-designandroid-progressbar
Javierd98
Javierd98

Reputation: 810

Android Material Design rounded progress_bar

I´m working on an app wich uses different progress bars, and I want them to look as the ones in Google fit, with rounded cornes. Google fir bars I have a custom drawable for each bar with different colors, and it rounds the outside corners but not the inside corners, as you can see here: My bars My custom drawable is:

<?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>
            <corners android:radius="@dimen/progress_bar_rounded" />
            <solid android:color="@color/progressbarBackground" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="@dimen/progress_bar_rounded" />
                <solid android:color="@color/progressbarGreen" />
            </shape>
        </clip>
    </item>
</layer-list>

An the progress bars code is:

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/progress_bar_high"
    android:id="@+id/GreenProgressBar"
    android:indeterminate="false"
    android:layout_marginLeft="15dp"
    android:layout_gravity="center_vertical"
    android:progressDrawable="@drawable/custom_green_progressbar" />

I could use some libraries as https://github.com/akexorcist/Android-RoundCornerProgressBar , but as it is such a simple thing i think it´s not worth it. I also have been looking on different threads, but nothing has worked for me. Any idea, without having to work with .9.png images, if possible?

Thanks a lot!

Upvotes: 6

Views: 5480

Answers (1)

tachyonflux
tachyonflux

Reputation: 20211

Use the scale tag rather than clip:

<?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>
            <corners android:radius="@dimen/progress_bar_rounded" />
            <solid android:color="@color/progressbarBackground" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%" android:useIntrinsicSizeAsMinimum="true">
            <shape>
                <corners android:radius="@dimen/progress_bar_rounded" />
                <solid android:color="@color/progressbarGreen" />
                <size android:width="@dimen/progress_bar_rounded"/>
            </shape>
        </scale>
    </item>
</layer-list>

Upvotes: 11

Related Questions