Smooth Corner Transition Android Java

4 min readOct 15, 2020

Problem!

One of the challenges I had in my recent project was that we had a design that has a view with a corner and when the view reaches the top of the activity we have to remove the corner and pin the TabLayour that contains the days of the week to top!
Well, this will give the user better access to the days of the week and will get a better experience and a good feeling of the app.

My opinion is that the user should be treated like a small child, everything should be ready and in front of him and he should not bother

Before we get into Code, we need a series of prerequisites :

The first one is that we want to transition radius for example 25 to 0 so I created two drawable :

container_main_bg_flat.xml :

We use this for when the view reaches the top and we should flatten the radiuses so it has just a white background :

container_main_bg_radius.xml :

the default shape of the view and has again white background and 30dp left and right corner :

What do We want to do?

we want to make the view have a smooth corner animation transition that It gives the impression that it is changing to flat or radius so create another transition drawable that contain the two drawable that we created before :

Main Design :

I make the original design as follows so that I can create a parallax state :

Note that we need to give Tab layout a background, now which background? The same transition that we made using those two shapes!

To make our work, I changed the code into several parts :

In my opinion, for better readability of your code, never do more than one task in one function, this way both access is easier and your code is cleaner

We need to create several functions:

Function to change the color and contents of the Status Bar :

Because I gave a Dark color to the top design of my page and my bottom bracket is white, when the bottom view reaches to the top the Status Bar should be changed to white, and when we change the Status Bar suddenly and very quickly does not make good feel to the user, and I think it's not professional at all. so I used Value Animator and changed the color very smoothly in a certain period of time:

So what is that changeStatusBarUiVisibility inside the above function?

When you change the color of the status bar, the text and the icons inside it are the same color depending on the theme of your phone, and it may interfere with the color you see in the status bar and not be seen.
So you have to change depending on the situation:

But now where do we use these functions?

Once our AppBarLayout has changed its status, we need to know if it is completely closed or open (our tab layout is completely attached to the top of the page or not?)
Before creating a listener for the app bar, let’s first create the Transition
Using the functions we created above, we create a new function:

What did I do here !?

Well, it’s very simple, I first came and took the drawable that I gave to the Tab layout and checked whether the app bar layout is closed or open? And through it, I realized that I have to start the animation or restore it, and then I changed the color of the status bar. Through the listener code below, you can also find out what the status of the app bar is: