Question: How to change color of the current step (tabs)?

[Rainer-Lang]

Make sure these boxes are checked before submitting your issue - thank you!

• [x] Check in the issue tracker whether this issue wasn't already reported.
• [ ] If it's a bug report check that clear steps to reproduce, stacktrace, expected behaviour and other needed details are provided.
• [ ] Feature requests contain a description of the feature you're requesting as well as a brief scenario explaining under what circumstances this might be useful.

I'm using tabs. I want to make my users totally clear in which step they are. Therefore I would like to change the color of the current step. For now there is written the step number and the step has the same color as the steps before (with a checkmark inside). Completed steps should have a color, not completed/future steps are grey - and the current step should even have another color.

Is this possible?

[RobertZagorski]

Hello @Rainer-Lang The current implementation allows for replacing "Done" step icon only. The current step as well as done step is marked with the same colour.

However, what you might do is to override "checkmark" icon. To do that

1. Override MSDefaultStepperLayoutTheme
2. Override ms_stepTabDoneIndicatorStyle item to point to a style overriding MSStepTabDoneIndicator
3. Inside that style override srcCompat and android:scaleType item. If this icon would have a background, then ms_activeStepColor would not be visible.

Please, let me know if that suit your needs.

[Rainer-Lang]

@RobertZagorski Thanks, but unfortunately I really only need to change the color behind the current step number. I need to change the color to something more "aggressive" like a orange. The color of the passed could stay eg blue with a checkmark and the future steps grey is even ok.

[RobertZagorski]

This is the effect I achieved using the technique described in my last comment:

If that is not sufficient then additional changes to codebase need to be made.

[Rainer-Lang]

@RobertZagorski I tried, but I don't get your result. Could you please post your changed styles here and anything else to achieve this effect? And yes this is exactly what I want 👍

[Rainer-Lang]

@RobertZagorski I'm thinking, maybe it's really better to have a xml attribute for the background of the current step.

[RobertZagorski]

I agree, that a long term solution might be to abstract current step colour from done step colour.

[zawadz88]

Hi all, In my opinion a custom fork would be better here as this is actually a rather custom thing and against the Material spec, which says that these colors should not differ between the current step and previous steps.

So I don't think this should really be a part of the lib itself. Nevertheless, If @RobertZagorski's solution works I'd use it :)

[Rainer-Lang]

@zawadz88 Material spec is not always right - especially when it comes to ux. The specs are also clear that you could add something different - if it's better design. In this case here I think it's better for the user to make it crystal clear in which step he is. Other color means less cognitive effort to "find" the current step. The user has also distractions (real world) and doesn't look all the time to his smartphone. So it's very easy for him to find the current step if there is a different color.

[zawadz88]

Well, the currently selected step is already in bold so it does stand out (at least in my opinion). I'm not saying this is a bad idea but without any real analysis this is just a speculation what is the best for the user. You might also argue that adding a different color might actually distract the user from the step content which I guess is more important.

So personally I would be reluctant to add such a change (because of the reasons mentioned above) however if the community feels like this would be an actual improvement I won't argue with that that much ;) So if anyone would like to submit a PR with these changes I'll gladly review them.