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

 

[Compose Snippet]Neomorphic Button 🔘

 

 
Suraj Sau
Android Developer. 日本語勉強中。한국어를 공부하고.
Published: December 28, 2020
Tweet
Share
 
 
Courtesy: https://www.pinterest.jp/pin/395753886007567718/

 

Image for post

version used for the code snippets

 

Image for post

 

Implementing Neomorphic views (hopefully I haven’t slaughtered the terminology here 😅) is explained to a greater clarity in this awesome article by gihub/fornewid.

As a TLDR; to the article, the impression of smooth elevation and subtle depression upon ‘pressing’ is achieved by animating two separate blur-edged shapes of two colors, a lighter shade and a darker shade of the general surface color.

Below is a demonstration of the same implementation above but, without the center gray circle at the top.

 

Image for post

 

Basically, we diagonally displace the two blurred circles relative to the center one.

The diagonal displacement is achieved by animation frameworks provided in Compose. Another thing to notice here is that, the displacement animations are triggered only when we ‘touch’ the view or remove our ‘touch’. This calls for a little different approach than simply triggering the animation in onClick() callbacks.

 

Modifier.pressIndicatorGestureFilter()

With Compose we have a variety of GestureFilters at our disposal. In this particular case we’re going to usePressIndicatorGestureFilter , whose documentation reads,

 

This gesture detector has callbacks for when a press gesture starts and ends for the purposes of displaying visual feedback for those two states.fun Modifier.pressIndicatorGestureFilter(..)

 

 

Going through the above snippet,

[1] buttonState serves the purpose of triggering a recomposition of @Composable NeomorphButton() when its value is changed.

[2] Given a change in buttonState value, we need to trigger an animation from the previous state to the current value of buttonState, hence the toggle logic.

[3] For proper understanding of implementingtransition() in Compose, I would highly recommend this Raywenderlich tutorial. As a summary, transition() is Compose’s state-animation framework. In this case, transition from PRESSED to IDLE or vice versa, will alter buttonStateProgress value ‘using’ the predefined tween() animator.

[4] As we toggle the buttonState on interacting with @Composable NeomorphButton(), we have to toggle the ‘from’ & ‘to’ states of transition()This will ensure that the animation reverses on toggling buttonState.

[5] Implementing Modifier.pressIndicatorGestureFilter(), we listen to the onStart() and onStop() callbacks and alter buttonState value accordingly.

 

Pass the TransitionState

The TransitionState obtained from defining the transition() in @Composable NeomorphButton() is then passed on as a parameter to @Composable CircleNeomorph(). As per documentation, any child @Composable depending on a TransitionState will have their recomposition triggered whenever, theTransitionState value changes.

 

[transition] takes a transition definition, a target state and child composables.These child composables will be receiving a [TransitionState] object as an argument, which captures all the current values of the animation. Child composables should read the animation values from the [TransitionState] object, and apply the value wherever necessary.@Composablefun <T> transition(..): TransitionState

 

 

[1] From the TransitionState passed on, we obtain the buttonStateProgress (animated in its parent@Composable NeomorphButton()) which is used to calculate the x & y alignment biases of the blurred circles. As the value of buttonStateProgress animates from PRESSED to IDLE or vice versa, so do the alignment biases.

[2] This is the upper blurred circle with the lighter shade. I’m achieving blur here by using RadialGradient brush for Modifier.background().

[3] Since the upper circle will be displaced towards top-left, both of its alignment bias values should be negative & equal.

[4] This is the lower blurred circle with the darker shade.

[5] Since the lower circle will be displaced towards bottom-right, both of its alignment bias values should be positive & equal.

[6] This is the central circle whose color matches the overall surface color.

There you have it, a simple implementation of Neomorphic animation in Jetpack Compose. 😀

My implementation may not be the most optimised or perfect, but hopefully it could help you with few references to Compose implementations.

I’m documenting all my snippets at a single place. Check out Jetpack Compose over a Cup of Hot Chocolate ☕️

 

 

 

Tags: Android, Jetpack Compose, Neomorphism, Animation

 

View original article at: 


 

Originally published: December 07, 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