Filling progress with drawable texture

[victor-semenovich-dev]

Hello. Tell me please, can I set drawable resource for progress, not color? Something like rcProgressDrawable attribute. I would like to fill progress with drawable texture with tile mode. Can your library provide this feature? If not, is it planned in the future? Thanks in advance.

[redsanso]

Totally quoting!! I want to use a gradient in my progress bar

[redsanso]

I made a temporary implementation while waiting for the official repo to be updated.
This is a simple tutorial in which you will need to create some custom files.

Step 1 : setup

Create a class with a custom name. In example, let's say CustomDrawableProgressBar.java.
What you need is:

• to extend com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar:

  import com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar;
  
  public class CustomDrawableProgressBar extends RoundCornerProgressBar {
  
  }

• to add a Drawable field and create two constructors:

  private Drawable rcProgressDrawable;
  
  public CustomDrawableProgressBar(Context context, AttributeSet attrs) {
      super(context, attrs);
      TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomDrawableProgressBar);
  
      Drawable progressDrawable = attributes.getDrawable(R.styleable.CustomDrawableProgressBar_rcProgressDrawable);
      if(progressDrawable != null){
          rcProgressDrawable = progressDrawable;
      }
  
      attributes.recycle();
  }
  
  public CustomDrawableProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomDrawableProgressBar, defStyleAttr, 0);
  
      Drawable progressDrawable = attributes.getDrawable(R.styleable.CustomDrawableProgressBar_rcProgressDrawable);
      if(progressDrawable != null){
          rcProgressDrawable = progressDrawable;
      }
  
      attributes.recycle();
  }

  since @akexorcist uses them both and we need to use them

• to override the drawProgress method:

  private Drawable rcProgressDrawable;
  
  @SuppressWarnings("deprecation")
  @Override
  protected void drawProgress(LinearLayout layoutProgress, float max, float progress, float totalWidth,
                              int radius, int padding, int colorProgress, boolean isReverse) {
  
      super.drawProgress(layoutProgress, max, progress, totalWidth, radius, padding, colorProgress, isReverse);
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
          if(rcProgressDrawable != null){
              layoutProgress.setBackground(rcProgressDrawable);
          }
      }
  }

• to create (or update) a res/values.xml configuration file like the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomDrawableProgressBar">
        <attr name="rcProgressDrawable" format="reference"></attr>
    </declare-styleable>
</resources>

where name="rcProgressDrawable" is the name of the attribute to call in the layout.xml,
while format="reference" is the type of value requested
("reference" is for android resource id, like '@drawable/my_background_gradient')

Step 2 : use it!

It's simple! Just call your custom attribute on the object you just made, including it in your layout.

<com.your.app.package.CustomDrawableProgressBar
                    android:layout_width="80dp"
                    android:layout_height="8dp"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:layout_margin="8dp"
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    app:rcBackgroundPadding="1dp"
                    app:rcBackgroundColor="#000000"
                    app:rcProgress="0.3"
                    app:rcProgressColor="@color/my_progress_bar_color"
                    app:rcMax="1"
                    app:rcProgressDrawable="@drawable/my_background_gradient" />

IMPORTANT
Always remember to define a value for the attribute app:rcProgressColor because any version before JellyBean will not render the drawable gradient resource, so we need a plain color as a replacement! This is due to the unavailability of the method

View.setBackground(Drawable background)

before API 17.

Demo

Here is an example. The grey background is from my external layout, you would not see it if you copy paste.

The centered bar position is explained in another issue: #42

I would like to give my thanks to @akexorcist for his awesome work. It really boosted my app development!

[huuchi207]

i do everything like that solution but the progress make no effect :(. anything i can try?

[redsanso]

send code and I'll try to help! 2017-02-18 3:56 GMT+01:00 huuchi207 <notifications@github.com>:

…

i do everything like that solution but the progress make no effect :(. anything i can try? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEMS8tOzz2e3ivnX0VvIcy1HiPXvVAnNks5rdl3lgaJpZM4G2fUq> .

[redsanso]

send code and I'll try to help! 2017-02-18 3:56 GMT+01:00 huuchi207 <notifications@github.com>:

…

i do everything like that solution but the progress make no effect :(. anything i can try? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEMS8tOzz2e3ivnX0VvIcy1HiPXvVAnNks5rdl3lgaJpZM4G2fUq> .

[huuchi207]

Thanks for your thought on my problem. Here is my code:
CustomRoundCornerProgressBar.java;

package com.gik.admin.engeek2.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.LinearLayout;

import com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar;
import com.gik.admin.engeek2.R;

/**
 * Created by root on 18/02/2017.
 */

public class CustomRoundCornerProgressBar extends RoundCornerProgressBar {
    private Drawable rcProgressDrawable;

    public CustomRoundCornerProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray attributes = context.obtainStyledAttributes( R.styleable.CustomDrawableProgressBar);

        Drawable progressDrawable = attributes.getDrawable(R.styleable.CustomDrawableProgressBar_rcProgressDrawable);
        if(progressDrawable != null){
            rcProgressDrawable = progressDrawable;
        }

        attributes.recycle();
    }
    public CustomRoundCornerProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomDrawableProgressBar, defStyleAttr, 0);

        Drawable progressDrawable = attributes.getDrawable(R.styleable.CustomDrawableProgressBar_rcProgressDrawable);
        if(progressDrawable != null){
            rcProgressDrawable = progressDrawable;
        }

        attributes.recycle();
    }
    @SuppressWarnings("deprecation")
    @Override
    protected void drawProgress(LinearLayout layoutProgress, float max, float progress, float totalWidth,
                                int radius, int padding, int colorProgress, boolean isReverse) {

        super.drawProgress(layoutProgress, max, progress, totalWidth, radius, padding, colorProgress, isReverse);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            if(rcProgressDrawable != null){
                layoutProgress.setBackground(rcProgressDrawable);
            }
        }
    }
}

Value.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<declare-styleable name="CustomDrawableProgressBar">
		<attr name="rcProgressDrawable" format="reference"></attr>
	</declare-styleable>
</resources>

button setting in layout.xml:

<com.gik.admin.engeek2.view.CustomRoundCornerProgressBar
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:rcProgress="20"
        android:id="@+id/progress_bar"
        app:rcProgressDrawable="@drawable/gradient_progress_bar"
        app:rcProgressColor="@color/turquoise"
        app:rcMax="100"
        app:rcRadius="@dimen/radius_button"
        app:rcBackgroundPadding="2dp"
        app:rcReverse="false"
        app:rcBackgroundColor="@android:color/white"
        android:layout_marginBottom="@dimen/small_margin"/>

and gradient_progress_bar.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="0"
        android:startColor="#00aaad"
        android:endColor="#060606"
        android:centerX="0.1"
        />
</shape>

the result i received:

Help me. Thank u in advance :D

[redsanso]

You'll have to reference the bar in your fragment and manually update it asynchronously.

[huuchi207]

You'll have to reference the bar in your fragment and manually update it asynchronously.

Sorry but i have no idea to update this bar asynchronously. Can u give an example?

[redsanso]

I need to know a little more about the context where the bar is used (Activity or Fragment)

[huuchi207]

I use it in my fragment. In there, i also have a thread to make an animation to this bar.

[redsanso]

As your process keeps running, you'll just have to update the app:rcProgress attribute.
Maybe you could also need to call a invalidate() on the progress bar layout.

[huuchi207]

As your process keeps running, you'll just have to update the app:rcProgress attribute.
Maybe you could also need to call a invalidate() on the progress bar layout.

I found the way to make an slow updated progressbar animation. My case is progressbar 's gradient. I cant do that.
Can u show me an example about that progressbar in activity(or in fragment). I can follow this and make the same.
Thank u so much!

[redsanso]

CustomRoundCornerProgressBar progressBar =(CustomRoundCornerProgressBar)
view.findViewById(R.id.progressBar);
progressBar.setProgress( /* Your value here */ );
progressBar.invalidate();

[huuchi207]

Let me try it. Thank u very much! Vào 24-02-2017 3:58 CH, "Sergio Sansovini" <notifications@github.com> đã viết:

…

CustomRoundCornerProgressBar progressBar =(CustomRoundCornerProgressBar) view.findViewById(R.id.progressBar); progressBar.setProgress( /* Your value here */ ); progressBar.invalidate(); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYeDnZYz7FDJ48c-EvU4dUiruT1qzuQtks5rfpuZgaJpZM4G2fUq> .

[redsanso]

You're welcome! Glad to help

[huuchi207]

I'm so sorry but There is still no gradient effect in my progressbar :(

can u give a sample project about that effect :(. I greatly appreciate your kindness!

[redsanso]

try to remove android:centerX="0.1" in your drawable and tell me if something changes

[huuchi207]

try to remove android:centerX="0.1" in your drawable and tell me if something changes

there is still no change :(

[huuchi207]

can u give me an example project :)

[akexorcist]

Added Gradient color supported in 2.1.0 (see 3f4bcd9, 73f0348, a108bcd)