CODEWITHSUNDEEP
androidandroid-progressbar
Freewind
Freewind

Reputation: 198418

How to create a horizontal loading progress bar?

When uninstalling an android application, or do some configuration, there will show such a horizontal progress bar, like following picture:

progress bar

It's not the same style like @android:style/Widget.ProgressBar.Horizontal.

How to use it in my own application?

Upvotes: 105

Views: 192499

Answers (7)

AmrDeveloper
AmrDeveloper

Reputation: 4722

Now you can create it easily using LinearProgressIndicator from the material design with a lot of customization for example

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

Check MaterialDesign link for more information and code examples

https://material.io/components/progress-indicators/android#using-progress-indicators

And in Jetpack Compose you can use LinearProgressIndicator with color and background customization and can set progress too

LinearProgressIndicator()

Upvotes: 12

venciallee
venciallee

Reputation: 775

Progress Bar in Layout

<ProgressBar 
    android:id="@+id/download_progressbar"
    android:layout_width="200dp"
    android:layout_height="24dp"
    android:background="@drawable/download_progress_bg_track"
    android:progressDrawable="@drawable/download_progress_style"
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminate="false"
    android:indeterminateOnly="false" />

download_progress_style.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <scale 
          android:useIntrinsicSizeAsMinimum="true" 
          android:scaleWidth="100%" 
          android:drawable="@drawable/store_download_progress" />
    </item>
</layer-list>

store_download_progress.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff207d94" />
</shape>

Upvotes: 17

Sambhav Khandelwal
Sambhav Khandelwal

Reputation: 3765

If you want a progress bar like this:

enter image description here

Then you can add this style to you progress bar:

?android:attr/progressBarStyleHorizontal

Then your progress bar would look like this:

<ProgressBar
        android:id="@+id/loading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:progress="10"
        android:layout_margin="10dp"
        android:indeterminate="false" />

Upvotes: 1

Jaspinder Kaur
Jaspinder Kaur

Reputation: 1149

For using the new progress bar

style="?android:attr/progressBarStyleHorizontal"

for the old grey color progress bar use

style="@android:style/Widget.ProgressBar.Horizontal"

in this one you have the option of changing the height by setting minHeight

The complete XML code is:

<ProgressBar
    android:id="@+id/pbProcessing"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tvProcessing"
    android:indeterminateOnly="true"/>

indeterminateOnly is set to true for getting indeterminate horizontal progress bar

Upvotes: 83

Vitas
Vitas

Reputation: 2347

Just add a STYLE line and your progress becomes horizontal:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progress"
        android:layout_centerHorizontal="true"      
        android:layout_centerVertical="true"      
        android:max="100" 
        android:progress="45"/>

Upvotes: 216

Tarit Ray
Tarit Ray

Reputation: 994

Worked for me , can try with the same 

<ProgressBar
    android:id="@+id/determinateBar"
    android:indeterminateOnly="true"
    android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
    android:indeterminateDuration="10"
    android:indeterminateBehavior="repeat"
    android:progressBackgroundTint="#208afa"
    android:progressBackgroundTintMode="multiply"
    android:minHeight="24dip"
    android:maxHeight="24dip"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:visibility="visible"/>

Upvotes: 6

Sergey Glotov
Sergey Glotov

Reputation: 20356

It is Widget.ProgressBar.Horizontal on my phone, if I set android:indeterminate="true"

Upvotes: 80

Related Questions