Skip to content

Commit 30f2c85

Browse files
style(progress): Improve progressbar theming (track color and flexible progress color)
Signed-off-by: Andy Scherzinger <[email protected]>
1 parent dbb6fee commit 30f2c85

File tree

4 files changed

+90
-15
lines changed

4 files changed

+90
-15
lines changed

sample/src/main/java/com/nextcloud/android/common/sample/MainActivity.kt

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
*/
99
package com.nextcloud.android.common.sample
1010

11+
import android.graphics.Color
1112
import android.os.Bundle
1213
import android.widget.Toast
14+
import androidx.activity.SystemBarStyle
15+
import androidx.activity.enableEdgeToEdge
1316
import androidx.appcompat.app.AlertDialog
1417
import androidx.appcompat.app.AppCompatActivity
1518
import androidx.core.graphics.toColorInt
@@ -23,11 +26,15 @@ import com.nextcloud.android.common.ui.theme.utils.AndroidViewThemeUtils
2326
import com.nextcloud.android.common.ui.theme.utils.ColorRole
2427
import com.nextcloud.android.common.ui.theme.utils.DialogViewThemeUtils
2528
import com.nextcloud.android.common.ui.theme.utils.MaterialViewThemeUtils
29+
import com.nextcloud.android.common.ui.util.extensions.addSystemBarPaddings
2630

2731
class MainActivity : AppCompatActivity() {
2832
private lateinit var binding: ActivityMainBinding
2933

3034
override fun onCreate(savedInstanceState: Bundle?) {
35+
val style = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT)
36+
enableEdgeToEdge(style, style)
37+
window.addSystemBarPaddings()
3138
super.onCreate(savedInstanceState)
3239

3340
binding = ActivityMainBinding.inflate(layoutInflater)
@@ -109,6 +116,8 @@ class MainActivity : AppCompatActivity() {
109116
material.themeChipInput(binding.inputChip)
110117
material.themeChipSuggestion(binding.suggestionChip)
111118
material.themeChipFilter(binding.filterChip)
119+
material.colorProgressBar(binding.circularProgressBar)
120+
material.colorProgressBar(binding.linearProgressBar)
112121
material.colorMaterialButtonPrimaryFilled(binding.dialogBtn)
113122
}
114123
}

sample/src/main/res/layout/activity_main.xml

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -159,15 +159,39 @@
159159

160160
</com.google.android.material.chip.ChipGroup>
161161

162+
<com.google.android.material.progressindicator.CircularProgressIndicator
163+
android:id="@+id/circular_progress_bar"
164+
android:layout_width="200dp"
165+
android:layout_height="200dp"
166+
android:indeterminate="false"
167+
android:indeterminateOnly="false"
168+
android:progress="35"
169+
app:layout_constraintStart_toStartOf="parent"
170+
app:layout_constraintTop_toBottomOf="@id/chipGroup"
171+
app:trackCornerRadius="5dp"
172+
app:trackThickness="5dp" />
173+
174+
<com.google.android.material.progressindicator.LinearProgressIndicator
175+
android:id="@+id/linear_progress_bar"
176+
android:layout_width="200dp"
177+
android:layout_height="wrap_content"
178+
android:layout_margin="20dp"
179+
android:indeterminate="false"
180+
android:indeterminateOnly="false"
181+
android:progress="35"
182+
app:layout_constraintStart_toEndOf="@+id/circular_progress_bar"
183+
app:layout_constraintTop_toBottomOf="@id/chipGroup"
184+
app:trackCornerRadius="5dp"
185+
app:trackStopIndicatorSize="0dp"
186+
app:trackThickness="5dp" />
187+
162188
<com.google.android.material.button.MaterialButton
163189
android:id="@+id/dialogBtn"
164190
android:layout_width="wrap_content"
165191
android:layout_height="wrap_content"
166192
android:text="@string/open_dialog"
167-
android:layout_marginTop="@dimen/standard_half_margin"
168-
android:layout_marginBottom="@dimen/standard_half_margin"
169-
app:layout_constraintTop_toBottomOf="@id/chipGroup"
170-
app:layout_constraintStart_toStartOf="parent" />
193+
app:layout_constraintStart_toStartOf="parent"
194+
app:layout_constraintTop_toBottomOf="@+id/circular_progress_bar" />
171195

172196
</androidx.constraintlayout.widget.ConstraintLayout>
173197
</FrameLayout>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/usr/bin/env bash
2+
3+
# SPDX-FileCopyrightText: 2022-2023 Nextcloud GmbH and Nextcloud contributors
4+
# SPDX-License-Identifier: MIT
5+
6+
exit 0

ui/src/main/java/com/nextcloud/android/common/ui/theme/utils/MaterialViewThemeUtils.kt

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ import javax.inject.Inject
4747
/**
4848
* View theme utils for Material views (com.google.android.material.*)
4949
*/
50-
@Suppress("TooManyFunctions")
50+
@Suppress("TooManyFunctions", "LargeClass")
5151
class MaterialViewThemeUtils
5252
@Inject
5353
constructor(
@@ -375,30 +375,66 @@ class MaterialViewThemeUtils
375375
)
376376
fun colorCardViewBackground(card: MaterialCardView) = themeCardView(card)
377377

378-
fun colorProgressBar(progressIndicator: LinearProgressIndicator) {
379-
withScheme(progressIndicator) { scheme ->
380-
colorProgressBar(progressIndicator, dynamicColor.primary().getArgb(scheme))
378+
/**
379+
* Themes a [LinearProgressIndicator] using the provided [ColorRole].
380+
*
381+
* @param linearProgressIndicator The progress indicator to theme.
382+
* @param colorRole The color role to be used for the active indicator part. Defaults to [ColorRole.PRIMARY].
383+
*/
384+
fun colorProgressBar(
385+
linearProgressIndicator: LinearProgressIndicator,
386+
colorRole: ColorRole = ColorRole.PRIMARY
387+
) {
388+
withScheme(linearProgressIndicator) { scheme ->
389+
colorProgressBar(linearProgressIndicator, colorRole.select(scheme))
381390
}
382391
}
383392

393+
/**
394+
* Themes a [LinearProgressIndicator] using the provided color [Int].
395+
*
396+
* @param linearProgressIndicator The progress indicator to theme.
397+
* @param color The color to be used for the active indicator part.
398+
*/
384399
fun colorProgressBar(
385-
progressIndicator: LinearProgressIndicator,
400+
linearProgressIndicator: LinearProgressIndicator,
386401
@ColorInt color: Int
387402
) {
388-
progressIndicator.setIndicatorColor(color)
403+
withScheme(linearProgressIndicator) { scheme ->
404+
linearProgressIndicator.setIndicatorColor(color)
405+
linearProgressIndicator.trackColor = dynamicColor.secondaryContainer().getArgb(scheme)
406+
}
389407
}
390408

391-
fun colorProgressBar(progressIndicator: CircularProgressIndicator) {
392-
withScheme(progressIndicator) { scheme ->
393-
colorProgressBar(progressIndicator, dynamicColor.primary().getArgb(scheme))
409+
/**
410+
* Themes a [CircularProgressIndicator] using the provided [ColorRole].
411+
*
412+
* @param circularProgressIndicator The progress indicator to theme.
413+
* @param colorRole The color role to be used for the active indicator part. Defaults to [ColorRole.PRIMARY].
414+
*/
415+
fun colorProgressBar(
416+
circularProgressIndicator: CircularProgressIndicator,
417+
colorRole: ColorRole = ColorRole.PRIMARY
418+
) {
419+
withScheme(circularProgressIndicator) { scheme ->
420+
colorProgressBar(circularProgressIndicator, colorRole.select(scheme))
394421
}
395422
}
396423

424+
/**
425+
* Themes a [CircularProgressIndicator] using the provided color [Int].
426+
*
427+
* @param circularProgressIndicator The progress indicator to theme.
428+
* @param color The color to be used for the active indicator part.
429+
*/
397430
fun colorProgressBar(
398-
progressIndicator: CircularProgressIndicator,
431+
circularProgressIndicator: CircularProgressIndicator,
399432
@ColorInt color: Int
400433
) {
401-
progressIndicator.setIndicatorColor(color)
434+
withScheme(circularProgressIndicator) { scheme ->
435+
circularProgressIndicator.setIndicatorColor(color)
436+
circularProgressIndicator.trackColor = dynamicColor.secondaryContainer().getArgb(scheme)
437+
}
402438
}
403439

404440
fun colorTextInputLayout(textInputLayout: TextInputLayout) {

0 commit comments

Comments
 (0)