Liquid Bottom Navigation UI Design in Jetpack Compose

hello everyone recently I came across this exciting concept of bottom navigation and in this video I will show you how I implement it in Jetpack compose in the beginning I wasn't even sure how the effect was created but after a short Googling I found one tutorial in Adobe After Effects basically the idea behind this effect is that the original image is at first blurred objects close to each other merge into one mess then the image is sharpened again but the alpha channel is slightly shifted is in animation software but how to implement it on Android fortunately since Android 12 it's easy to apply common graphic effects using render effect it's even possible to chain multiple effects and apply them directly to a view or composable I went through the documentation and figure out that I would need two graphical effects to achieve similar results blur and color metrics color filter to set the render effect jetpack compose provides graphic layer modifier it applies a visual effect to a result of the graphic layer scope before it's drawn on the screen this is an example of using the blur effect after applying the blur effect each pixel in the resulting image has a value equal to average value of its neighboring pixels in the input image the radius controls the size of the neighboring area around the X and y-axis a higher radius means more blurry image color metrics filter is a little bit more difficult it's a color filter that transform colors through F4 times 5 color metrics for a better understanding of how the color Matrix Works let's name each component in The Matrix with letters from A to T when we apply the Matrix to a pixel in RGB a color space the result is computed as follows the sum of the red color Channel multiplied by a the green Channel multiply by B the blue Channel multiply by C Alpha Channel multiply by D plus E equals the value of the red color channel of the resulting pixel and likewise for other channels for example this color Matrix involves incoming Colors by scaling each Channel by -1 and then Shifting the result up by 255 to remain in the standard color space trade implementation is pretty straightforward we only need to provide a matrix as a float array by using the right Matrix parameters we can get for example a grayscale picture where all color channels are the same or a picture with inverted colors however we don't actually need to change any color information the important part for us will be the last line of the metrics the alpha Channel let's take a look again at the color Matrix equations when we get the rid of all colors we get this simple linear equation mapping the opacity of the input image to the opacity of the resulting image when we set the S to 1 and T to 0 we preserve the same opacity and we have the smooth transition on the edges of the Blurred image but we need to have more binary like opacity it means everything under some threshold should be zero and everything above should be one so I increase the S value and you can see that the mapping is now steeper when I decrease the T value the graph has moved more to the right and we can adjust these variables to have almost binary alphactional values in the resulting image it's worth mentioning that the values are clamped to range from 0 to 255. now let's change color filters together and play with different settings to see if we can get the similar results as in the animation at the beginning of this video yes this looks pretty similar now let's open Android studio and implement it at first I create custom bottom navigation similar to the one from the beginning of the video to achieve a similar look I have created a custom shape in a vector editor which I'm using as a background and two icon buttons with some standard material design icons and you can already see how it looks in the preview window next I create a wrapper Around The Floating Action button for easier manipulation and preventing code duplication it will be used for the plus button and three other buttons moving on the screen all these animated buttons will be displayed in a floating action button group I will use animation progress which is just a floating value from 0 to 1 to control the current position of the buttons and here will be also applied the render effect at first I will try it only with the main button ok the good render effect method creates a chain effect consists of the blur effect and color filter effect as I showed before parameters are hard-coded for now let's see how it looks in the preview as you can see there is one issue the rendering effect cleaned up the content of the button in this case the plus icon but it can be easily solved when I put the same button group on the top of this one but this time without the render effect as I said at the beginning of the video the render effect works only on devices with Android 12 and higher I need to add one check to prevent runtime crashes on older phones [Music] then I can add more buttons and use the value of Animation progress to control the padding of buttons progress is adjusted for each button so they can move in different time periods and it's transformed using easing so they speed up quickly and slow down gradually then the adjusted progress is multiplied by some hard-coded padding value to get the final padding similar to opacity to get the more natural looking effect of icons appearing and disappearing to keep the code more clean and testable I implemented the animation in the parent composable [Music] whenever the is menu extended value changes the animate flowed estate starts a new coroutine changing the animation progress to the desired value foreign nice it's almost there [Music] let's create a circle that will be used as a background for the reduce Button as well as another animation effect when the user clicks on the extent or reduce button Circle pops up for a short time this animation will be a little bit shorter so it would be better to use another progress value to control it and this is the final result animation is not very smooth in the preview window but on the real device it looks much better I hope you like this video if so please share it with others and subscribe to my channel see you next time foreign

Channel: Juraj Kusnier

Views: 11,427

Keywords:

Id: nP42CBV5Rd0

Length: 10min 8sec (608 seconds)

Published: Tue Feb 28 2023