CODEWITHSUNDEEP
androidandroid-stylesandroid-progressbar
Rafael Lima
Rafael Lima

Reputation: 3535

how to change android progress bar thickness

this should be a very easy to customize style...

i want a horizontal progress bar that is slithly thick (or that i can customize the thickness) and the color matches the apps color

if i do

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/textLoading"
    android:layout_centerHorizontal="true"
    android:indeterminate="true"
     />

the progress bar is horizontal and matches app visual identity... but is too thin... the person need glases to see it

if i do

<ProgressBar
        android:id="@+id/progressBar"
        style="android:Widget.ProgressBar.Horizontal"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/textLoading"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
         />

the progress bar is good thickness but the color is a stupid yellow that matches nothing in this plannet

how can i customize individual parameters???

Upvotes: 14

Views: 14228

Answers (4)

mārt1cz
mārt1cz

Reputation: 693

You can use Android Material Progress Bar: com.google.android.material.progressindicator.LinearProgressIndicator

XML example:

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:id="@+id/progressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="45"
    app:indicatorColor="@color/blue_light"
    app:trackColor="#FFFFFF"
    app:trackCornerRadius="5dp"
    app:trackThickness="10dp" />

Now you can use app:trackThickness to adjust the thickness of the progress bar

You can also check out Google's Material Design page regarding Material Progress Bar here: https://material.io/components/progress-indicators/android#using-progress-indicators

Upvotes: 9

Uriel Frankel
Uriel Frankel

Reputation: 14612

Here is an example for a progress bar:

 <ProgressBar
        android:id="@+id/progressBar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:progressDrawable="@drawable/my_progressbar" />

and here is my_progressbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@android:id/background"
    android:gravity="center_vertical|fill_horizontal">
    <shape android:shape="rectangle">
        <corners android:radius="10dp"/>
        <size android:height="20dp"/>
        <solid android:color="@color/blue"/>
    </shape>
</item>
<item
    android:id="@android:id/progress"
    android:gravity="center_vertical|fill_horizontal">
    <scale android:scaleWidth="100%">
        <shape android:shape="rectangle">
            <corners
                android:radius="10dp"
                />
            <size android:height="20dp"/>
            <solid android:color="@color/yellow"/>
        </shape>
    </scale>
</item>
</layer-list>

Here is an example of how it looks: thick progressbar

Upvotes: 10

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363459

You can customize the style with:

<ProgressBar
    android:id="@+id/progressBar"
    android:indeterminate="true"
    style="@style/CustomProgressBar"

with:

<style name="CustomProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
      <item name="minHeight">32dip</item>  <!-- default 16dp -->
      <item name="maxHeight">32dip</item>  <!-- default 16dp -->
</style>

If you want to customize the color use:

<ProgressBar
    style="@style/CustomProgressBar"
    android:indeterminate="true"
    android:theme="@style/CustomProgressBarTheme"
    />

with:

  <style name="CustomProgressBarTheme">
    <item name="colorControlActivated">@color/....</item>
  </style>

enter image description here

Upvotes: 0

Moustafa EL-Saghier
Moustafa EL-Saghier

Reputation: 1931

there are many ways to achieve what you need:

1- use android:scaleY="8" in your XML file

or from code

mProgressBar.setScaleY(3f);

2- style="@android:style/Widget.ProgressBar.Horizontal" this will make you have Horizontal progress bar, so you can inherit it in styles and edit it as follows:

<style name="CustomProgressBarHorizontal" parent="android:Widget.ProgressBar.Horizontal">
      <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
      <item name="android:minHeight">10dp</item>
      <item name="android:maxHeight">20dp</item>
</style>

Upvotes: 12

Related Questions