Home > Blockchain >  Horizontal Progressbar with multiple colour
Horizontal Progressbar with multiple colour

Time:03-31

I have four different color button and one progress bar this now my query is when i click on any button so progressbar will progress with same color serially say for example I have fou diff. color button orange,blue,green,red now when I click on orange button so progress bar will progress with orange color next I click on blue color so progress bar will progress with blue color when again click on orange color so progrss bar progress with orange color but not new state that progress with previous pregresed orange color how can i do that? Please let me know if any idea it will very helpful for me thanks in advance.

CodePudding user response:

I don't know how to do that with progressBar, but you can create a Layout in the shape of progressBar with four views separated with vertical guidelines, and color each view with different color. Then programatically change the percents of the guidelines and the visibility of the view on buttons click.

CodePudding user response:

Use material design Progress indicator and change indicator color dynamically when pressing on the specific button.

add dependency in your gradle,

implementation "com.google.android.material:material:1.5.0"

sample.xml,

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.google.android.material.progressindicator.LinearProgressIndicator
            android:id="@ id/progress_indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="30dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:indeterminate="true"
            app:trackThickness="20dp"
            app:trackCornerRadius="20dp"
            app:indicatorColor="@color/green"/>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginBottom="50dp"
            android:orientation="horizontal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">
    
            <Button
                android:id="@ id/button_green"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:text="Green" />
    
            <Button
                android:id="@ id/button_red"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:text="Red" />
    
            <Button
                android:id="@ id/button_blue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Blue" />
    
        </LinearLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>

SampleActivity.kt,

class SampleActivity:AppCompatActivity(R.layout.atest) {
    
        @SuppressLint("ResourceAsColor")
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            val buttonGreen = findViewById<Button>(R.id.button_green)
            val buttonRed = findViewById<Button>(R.id.button_red)
            val buttonBlue = findViewById<Button>(R.id.button_blue)
    
            val progressIndicator = findViewById<LinearProgressIndicator>(R.id.progress_indicator)
    
            buttonGreen.setOnClickListener {
                progressIndicator.setIndicatorColor(R.color.green)
            }
    
            buttonRed.setOnClickListener {
                progressIndicator.setIndicatorColor(R.color.red)
            }
    
            buttonBlue.setOnClickListener {
                progressIndicator.setIndicatorColor(R.color.blue)
            }
        }
    }
  • Related