Vertical seek-bar not showing Progress colour on run-time in Android

Question

Output I'm getting Desired Output

I’m New to Android Application development I’m working on one project, in it I need to show vertical seekbar I have used below code in XML and in JAVA . I want the right side output but I’m getting left side output in my device I’m getting the desired output in XML but not in my device. Help me to solve this issue

For XML I used this:

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_marginRight="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:paddingTop="9dp"
>

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
    android:id="@+id/mySeekBar"
    android:layout_width="30dp"
    android:layout_height="match_parent"
    android:max="100"
    android:progress="40”
    android:progressTint="@color/color_red"
    android:progressBackgroundTint="@color/color_gray"
    android:thumb="@drawable/custom_thumb"
    android:splitTrack="false"
    app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->

For JAVA I use below code:

   progress =prefs.getInt("PROGRESS", 0);
if (progress == 33) {
    verticalSeekBar.setProgress(progress);
    tvCooking.setAlpha(1f);

ivCooking.setAlpha: (1f); verticalSeekBar.setProgressBackgroundTintList(ColorStateList.valueOf(color_red)); verticalSeekBar.setProgressTintList(ColorStateList.valueOf(color_red)); } if (progress == 66) { verticalSeekBar.setProgress(progress); tvOrderMoved.setAlpha(1f); ivOrderMoved.setAlpha(1f); verticalSeekBar.setProgressBackgroundTintList(ColorStateList.valueOf(color_red)); verticalSeekBar.setProgressTintList(ColorStateList.valueOf(color_red)); } if (progress == 99) { verticalSeekBar.setProgress(progress); tvDeliveryDone.setAlpha(1f); tvDeliveryDone.setAlpha(1f); verticalSeekBar.setProgressBackgroundTintList(ColorStateList.valueOf(color_red)); verticalSeekBar.setProgressTintList(ColorStateList.valueOf(color_red)); } verticalSeekBar.setProgress(progress); if (orderId != 0) { verticalSeekBar.setProgress(progress); verticalSeekBar.setProgressBackgroundTintList(ColorStateList.valueOf(color_red)); verticalSeekBar.setProgressTintList(ColorStateList.valueOf(color_red)); startTimer(); } }

Answer 1

Please try code in Java file like below:

if(progress==33) {
            verticalSeekBar.setProgress(progress);
            verticalSeekBar.setProgressBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.color_red)));
            verticalSeekBar.setProgressTintList(ColorStateList.valueOf(getResources().getColor(R.color.color_red)));
        }

setProgressBackgroundTintList and setProgressTintList using ColorStateList.valueOf(getResources().getColor(R.color.color_red))

I hope its work for you.

Answer 2

You can use from the following sample code. You can change int[] colors variable according to your needs.

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
    style="@style/seekbar_wrapper">
    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
        android:id="@+id/seek_red"
        android:max="255"
        app:seekBarRotation="CW270"
        style="@style/control_seekbar" />
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

//where:
<style name="seekbar_wrapper">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">160dp</item> <!--change it as you want-->
    <item name="android:paddingLeft">4dp</item>
    <item name="android:paddingRight">4dp</item>
    <item name="android:background">@android:color/darker_gray</item>
</style>

<style name="control_seekbar">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:thumb">@drawable/seek_thumb</item>
    <item name="android:thumbOffset">8dp</item>
</style>

//drawable#seek_thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#abcdef"/>
            <size
                android:width="16dp" <!--change it as you want-->
                android:height="16dp"/>
        </shape>
    </item>
</layer-list>

JAVA Sample Code:

public class YourFragment extends Fragment {

    @BindView(R.id.seek_red) VerticalSeekBar seekbar;
    private int width, height;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        final View v = inflater.inflate(R.layout.your_layout_file, container, false);
        ButterKnife.bind(this, v);

        //set color for thumb:
        seekbar.getThumb().setColorFilter(getColor(R.color.YOUR_DESIRED_COLOR),  PorterDuff.Mode.SRC_IN);

        //get width & height programmatically.
        seekbar.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
            width  = seekbar.getWidth();
            heigth = seekbar.getHeight();
            updateColor(init_value_of_progressbar);
        });


        //update color when thumb position is changed
        seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                @Override
                public void onProgressChanged(SeekBar seekBar, int i, boolean fromUser) {
                    if(fromUser) {
                         updateColor(progress);
                    }
                }

                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {}

                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {}
        });

        return v;
    }


    //set color to seekbar with ShapeDrawable class:
    private void updateColor(int progress){
        ShapeDrawable shape = new ShapeDrawable(new RectShape());
        //You can use different ways for the colors variable.
        int[] colors = new int[]{Color.GRAY, Color.rgb(progress, 0, 0)};
        Shader shader = new LinearGradient(0, 0, width, height, colors, null, Shader.TileMode.MIRROR);
        shape.getPaint().setShader(shader);
        seekbar.setProgressDrawable(shape);
    }

}

Answer 3

I think it's your margins issue

So I found a solution

Solution :-

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:paddingTop="9dp">

        <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
            android:id="@+id/mySeekBar"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:max="100"
            android:progress="40"
            android:progressBackgroundTint="@color/color_gray"
            android:progressTint="@color/color_red"
            android:splitTrack="false"
            android:thumb="@drawable/custom_thumb"
            app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Note :- Below can run only API level 21 or higher

android:progressBackgroundTint="@color/color_dark"
android:progressTint="@color/black"
android:splitTrack="false"

So inteadof that use below it will use for all device:-

android:progressDrawable="@drawable/text_seekbar_progress"

text_seekbar_progress (drawable file) :-

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="@dimen/btn_radius" />
        <solid android:color="@color/black" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="@dimen/btn_radius" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="@dimen/btn_radius" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </clip>
</item>
</layer-list>