Jon G
Jon G

Reputation: 1706

Android horizontal indeterminate progress bar lollipop

I have implemented a horizontal indeterminate progress bar in my Android application. I am building and running the app on lollipop (v22), so using their styles.

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminateOnly="true" 
    android:layout_width="15dp"
    android:layout_height="wrap_content" />

The height of the view appears to be the requested 15dp, but the height of the animating progress bar contained within seems to be a fixed height (~2dp). Is it possible to change the height of horizontal indeterminate progress bar (to be e.g. match_parent of the view)?

I found that the style referenced is android.R.styleable.ProgressBar_indeterminateOnly. I believe this references a drawable called progress_indeterminate_horizontal_material.xml in platforms/android-22/data/res/drawable. This in turn references vector_drawable_progress_indeterminate_horizontal.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="10dp"
    android:width="360dp"
    android:viewportHeight="10"
    android:viewportWidth="360" >
    <group
        android:name="progress_group"
        android:translateX="180"
        android:translateY="5" >
        <path
            android:name="background_track"
            android:pathData="M -180.0,-1.0 l 360.0,0 l 0,2.0 l -360.0,0 Z"
            android:fillColor="?attr/colorControlActivated"
            android:fillAlpha="?android:attr/disabledAlpha"/>
        <group
            android:name="rect2_grp"
            android:translateX="-197.60001"
            android:scaleX="0.1" >
            <path
                android:name="rect2"
                android:pathData="M -144.0,-1.0 l 288.0,0 l 0,2.0 l -288.0,0 Z"
                android:fillColor="?attr/colorControlActivated" />
        </group>
        <group
            android:name="rect1_grp"
            android:translateX="-522.59998"
            android:scaleX="0.1" >
            <path
                android:name="rect1"
                android:pathData="M -144.0,-1.0 l 288.0,0 l 0,2.0 l -288.0,0 Z"
                android:fillColor="?attr/colorControlActivated" />
        </group>
    </group>
</vector>

I have added these and their requirements to my project and started playing with the vector, but so far I am unable to get the progress bar to appear the correct size.

Adjusting the height, viewportHeight, translateY and pathData:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="5dp"
    android:width="360dp"
    android:viewportHeight="5"
    android:viewportWidth="360" >
    <group
        android:name="progress_group"
        android:translateX="180"
        android:translateY="2.5" >
        <path
            android:name="background_track"
            android:pathData="M -180.0,-2.5 l 360.0,0 l 0,5.0 l -360.0,0 Z"
            android:fillColor="?attr/colorControlActivated"
            android:fillAlpha="?android:attr/disabledAlpha"/>
        <group
            android:name="rect2_grp"
            android:translateX="-197.60001"
            android:scaleX="0.1" >
            <path
                android:name="rect2"
                android:pathData="M -144.0,-2.5 l 288.0,0 l 0,5.0 l -288.0,0 Z"
                android:fillColor="?attr/colorControlActivated" />
        </group>
        <group
            android:name="rect1_grp"
            android:translateX="-522.59998"
            android:scaleX="0.1" >
            <path
                android:name="rect1"
                android:pathData="M -144.0,-2.5 l 288.0,0 l 0,4.0 l -288.0,0 Z"
                android:fillColor="?attr/colorControlActivated" />
        </group>
    </group>
</vector>

Looks about right in the preview, but the progress bar doesn't appear when built.

Upvotes: 0

Views: 1406

Answers (1)

Jon G
Jon G

Reputation: 1706

As suggested by @alanv, I was almost there. You can use the method written above to adjust the size, just don't forget to include the colour!

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="5dp"
    android:width="360dp"
    android:viewportHeight="5"
    android:viewportWidth="360" >
    <group
        android:name="progress_group"
        android:translateX="180"
        android:translateY="2.5" >
        <path
            android:name="background_track"
            android:pathData="M -180.0,-2.5 l 360.0,0 l 0,5.0 l -360.0,0 Z"
            android:fillColor="@color/my_color"
            android:fillAlpha="?android:attr/disabledAlpha"/>
        <group
            android:name="rect2_grp"
            android:translateX="-197.60001"
            android:scaleX="0.1" >
            <path
                android:name="rect2"
                android:pathData="M -144.0,-2.5 l 288.0,0 l 0,5.0 l -288.0,0 Z"
                android:fillColor="@color/my_color" />
        </group>
        <group
            android:name="rect1_grp"
            android:translateX="-522.59998"
            android:scaleX="0.1" >
            <path
                android:name="rect1"
                android:pathData="M -144.0,-2.5 l 288.0,0 l 0,4.0 l -288.0,0 Z"
                android:fillColor="@color/my_color" />
        </group>
    </group>
</vector>

Upvotes: 0

Related Questions