Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

The easiest way to toggle complete layout to grayscale on Android

 

 
Abhishek Jangra
Currently Android@Gojek Tech | Sharing thoughts and knowledge with the world | Social — anything/iabhishek1041 | Email — iabhishek1041@gmail.
Published: 26 November, 2020
Tweet
Share
 

 

Hey friends, I hope you’re doing well. In this blog allow me to share something rather interesting which can be achieved using custom views on Android.

As you may know I am an Android developer working with Gojek. Recently while working on a project our designer wanted the ability to show some of the items on the screen as “disabled”, the task was to turn a view group and all its children into grayscale color scheme based on some external trigger.

The first approach that came to our mind was to use the trusty old findViewById , get a reference to the views and set them to gray scale. But this approach is very high maintenance as different kinds of views have different ways to change the color. Consider this example given below đŸ‘‡đŸ»

 

Image for post

Sample View

 

To set all the views to grayscale, for TextView we have to use setTextColorto set a new color. For ImageView we can set a new resource which in itself is grayscale or use setColorFilter. But every time we add/remove a new view in this layout, that will break the disabled state unless we handle grayscaling for this view as well.

And in case we want to “enable” the views once again based on another trigger, that’s a chore in itself, storing the actual color before setting it to gray and then restoring it when needed. Clearly, we can do better.

 

After lots of reading and mathematics later…

 

Based on my understanding of image processing, ideally we should be able to multiply any RGB color with a transformation matrix and get a grayscale color as a result. Then we tried to find a similar api in Android and ColorMatrix combined with some knowledge of custom views was what we’ve been looking for.

We decided to experiment with a custom matrix with equal amounts of Red, Green and Blue and use it a color filter for a CustomView that extends ConstraintLayout. You can pause and check the full code here.

 

private val paint = Paint()
val cm = ColorMatrix()
cm.set(
    floatArrayOf(
        0.33f, 0.33f, 0.33f, 0f, 0f,
        0.33f, 0.33f, 0.33f, 0f, 0f,
        0.33f, 0.33f, 0.33f, 0f, 0f,
        0f, 0f, 0f, 1f, 0f
    )
)
paint.colorFilter = ColorMatrixColorFilter(cm)

 

We’re using this paint on the canvas in the method dispatchDraw() and draw() . Why both? While rendering a layout, the background is drawn first in the draw() method and then the child views are drawn in dispatchDraw() method, so setting the paint here will make all the children use it as well. I want both the background and child views to appear disabled so I’ve used the paint in both places. Feel free to skip any of those based on your use case.

This approach is like masking the entire thing with a grayscale filter which will automatically take care of any changes to the view in future as well. Also, cherry on top of the cake, if we want to remove the grayscaling logic, setting disabled to false would do the job, no extra logic required!

 

Image for post

Final Result

 

Pro-tip

If you want a different shade of gray in the disabled state, you can change the multiplier parameters of the color matrix. Just remember to use the last parameter to add a constant and balance out the whites. If you look at the way new values of R,G and B are calculated based on the color matrix.

 

Image for post

 

private val paint = Paint()

init {
    val cm = ColorMatrix()
    cm.set(
        floatArrayOf(
            0.149f, 0.149f, 0.149f, 0f, 141f,
            0.149f, 0.149f, 0.149f, 0f, 141f,
            0.149f, 0.149f, 0.149f, 0f, 141f,
            0f, 0f, 0f, 1f, 0f
        )
    )
    paint.colorFilter = ColorMatrixColorFilter(cm)
}

 

If the original color is white (255, 255, 255) and we pass it through the matrix,

 

R` = 255(0.149) + 255(0.149) + 255(0.149) + 141f = 255

 

If we don’t add the 141f as the last parameter, the whites will also become grayish and the disabled state will not look as good, especially if you have a white background.

There you go, you can check out the complete repository here and even try it out yourself. I just love situations like these which push us to learn something new and make thing more robust while making it easier as well. Have you had a similar experience while building your app? Do share that in the comments below.

Stay safe and stay at home, until the next one, Ciao! 😉

 

Image for post

 

 

 

Tags: Android App Development,Android,Custom Views,Mobile App Development,AndroidDev

 

View original article at: 


 

Originally published: November 08, 2020

Android News
Evolution of Android Update SystemEvolution of Android Update System
Evolution of Android Update SystemEvolution of Android Update System

By Ivan Kuten

So, how can you update Android on mobile devices? While developing software for Smart TVs and Android-based set-top boxes, we’ve narrowed it down to four ways, discarding some very exotic options:

By ProAndroidDev -
Android News
Happy Railway
Happy Railway

By Hadi Lashkari Ghouchani

This post is on the tail of Railway Oriented Programming in Kotlin by Antony Harfield. So you need to read it first and continue here. As it’s obvious I really liked it and tried it out. It needs every process have a result like

By ProAndroidDev -
Android News
Unit Tests and Concurrency
Unit Tests and Concurrency

By Stojan Anastasov

Once Retrofit added RxJava support, RxJava became my go-to concurrency framework for writing Android apps. One of the great things about RxJava is the excellent testing support. It includes TestObserver, TestScheduler, RxJavaPlugins so you can switch your schedulers in tests.

By ProAndroidDev -
Android News
When Compat libraries will not save you
When Compat libraries will not save you

By Danny Preussler

And why you should avoid using the “NewApi” suppression! The idea of “Compat” libraries was probably one of the key aspects of Android dominating the mobile space. Other than with iOS, Android users often could not update their operating system after a new version launch, simply as their phones won’t allow them to, the Android problem of fragmentation.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One