Android L - Material design on SwipeRefreshLayout color scheme

Question

I´m starting to implement the Material Theme on my newest project, preparing it for the launch of the new L version.

I´ve been reading the Material design guidelines and found this.

UI Color Application

Choose your palette

Limit your choice of colors by choosing three color hues in the primary and one accent color in the secondary palette. The accent color may or may not need fall back options

More or less it explains how to implement those hues on the app, including the accent color but when using the main color on my app with the SwipeRefreshLayout progress bar, it doesn't feel right.

App example SwipeRefreshLayout Material design

Should it be a mix between the accent color and the android:colorPrimary?

Any thoughts about this? Is there any explanation about implementing progress bars on the Material design guideline that I´ve missed?

Thanks in advance

https://stackoverflow.com/a/32460907/8237188 answer might be helpful . — Muahmmad Tayyib, Jul 29 '20 at 20:37

Benito Bertoli · Accepted Answer · 2014-11-06T08:13:46.383

156

The Material design spec has been updated with the new guidelines for the swipe to refresh pattern.

As of revision 21 of the support library, SwipeRefreshLayout now displays a circular indicator.
When you start swiping down, the indicator has an arrow (which suggests refreshing). When you release it, it loses the arrow and starts spinning.

SwipeRefreshLayout

Now we can still set a color scheme and the progress bar will cycle between the colors.

So which colors should we use?

Let's take a look at the Google I/O source code:

mSwipeRefreshLayout.setColorSchemeResources(
                R.color.refresh_progress_1,
                R.color.refresh_progress_2,
                R.color.refresh_progress_3);

And here are the colors:

<color name="refresh_progress_1">@color/theme_accent_2</color>
<color name="refresh_progress_2">@color/theme_accent_1</color>
<color name="refresh_progress_3">@color/theme_primary</color>

So yes, it is a mix between the primary and the accent colors.

edited Nov 06 '14 at 08:13

answered Jul 31 '14 at 12:56

Benito Bertoli

25,285
12
54
61

Well, it looks like its in an early state right now. Good answer by the way. I'll keep it open a little bit more and if by the end of the week there's no better one I'll accept it. – reixa Jul 31 '14 at 14:04
22

This is awful. They should at least let us choose which design we like more. Their own material design styled apps use bars as pull to refresh indicators. – Kuno Oct 23 '14 at 13:53
1

@Kuno you can get linear progress code from here http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/5.L_preview/android/support/v4/widget/SwipeRefreshLayout.java – Roger Alien Oct 28 '14 at 00:52
Yep, that's what I ended up with. You have to copy BakedBezierInterpolator, SwipeProgressBar and SwipeRefreshLayout. – Kuno Oct 28 '14 at 09:58
1

It is more convenient to create an array of colors in colors.xml and use that for some people http://stackoverflow.com/questions/28118038/how-to-pass-int-array-of-color-resource-ids-from-array-xml-to-swiperefreshlayout – Micro Feb 20 '16 at 11:03
Shadow doesn't appear in Samsung Note 5 – Neon Warge Mar 30 '17 at 06:12

score 0 · Answer 2 · answered Aug 09 '19 at 12:05

Given solution did not work for me.

I simple extended and used this instead.

class SwipeToRefreshLayout(context: Context, attrs: AttributeSet): SwipeRefreshLayout(context, attrs)  {

var listener: OnRefreshListener? = null

fun setRefreshing(refreshing: Boolean, fireCallback: Boolean) {
    super.setRefreshing(refreshing)
    listener?.onRefresh()
}

override fun setOnRefreshListener(listener: OnRefreshListener?) {
    super.setOnRefreshListener(listener)
    this.listener = listener
}
}

I hope someone finds it helpful.

Android L - Material design on SwipeRefreshLayout color scheme

2 Answers2

Linked