Courses

Module 12: Creating an Uber Clone Transcript i kept most of the default transitions and did a few animations along the way but i didn’t spend too much time on either one of those by default codename one uses the slide or slide fade transitions these should look decent for the most part but i wanted to demonstrate and discuss some of the nuanced transitions in the uber app [Music] in the native uber app transitions look a bit different between ios and android i didn’t go there because i don’t think this was done on purpose in android’s material design a common transition pattern is one where we move an element from one view to the next and indeed this is what we have between the login form and the enter mobile number form as you can see the enter your mobile number and flag elements animate to the place in the next form while other elements fade in out respectively this transition repeats itself in reverse when we press back there are a couple of things that might not be immediately obvious when you look at this the background pattern instantly disappears instead of fading this might be on purpose but it doesn’t look good this is a bit hard to see as it happens relatively quickly but the back arrow slides in from the left codename one has a morph transition which doesn’t include the slide in out option for some elements only the fade in out of these elements so we’ll pass on that aspect i chose to fade the background pattern in out as it looks much better i’m not sure why uber chose not to do that notice that this works for us despite the fact that the background is constantly rotating when we get back to the main form and this isn’t supported in the native android app transitions are decoupled from the forms or components that they transition this allows us to define a transition regardless of the contents of a form in order to use the morph transition we need to communicate to it the components we would like to animate but they might not be instantiated at this time yet so we need to use component names if the components on both forms have the same name we can make the code even shorter we can perform the transition using this code in login form we will obviously need the corresponding code in enter mobile number form notice we set the names to the identical values we could have used different names and then just specified those different names in the morph method we would also want morph to run in reverse when going back so the obvious thing to do is define a morph transition in the back command but there are a couple of nuances notice i used strings instead of get name as the back command is defined before the components in the full code listing this is one of those things that you only see on the device the virtual keyboard opens when we enter the mobile number form so when we go back it looks a bit weird on android i stop editing to fold it first and then use the callback to detect when the keyboard actually finished closing otherwise the transition will run before the form had time to adjust the problem is that if you run this code it will fail badly the background animation tries to repaint while the transition is in progress the solution for that is a small simple change to login form painter i’m effectively blocking animation of the background during transition which would also make the transition smoother as a result

Module 12: Creating an Uber Clone Transcript the code for morph transitions broke another thing it broke the facebook or google login form which looks awful going in now because morph is generally designed for a specific form i want to use the vertical cover effect which is common on ios and looks pretty decent on android 2. cover slides the form on top of the existing form from the bottom it’s usually combined with uncover which slides the form out in the reverse way because of this unique semantic the cover transition uses both the in and out transition flags however this can pose a problem with the default out transition of the form that we are leaving in this case you would see the out animation of the login form which in this case is morph followed by the incoming cover animation the solution is to remove the out animation from the outgoing form and restore it to the original value when we get back we do that within the remove transition temporarily method which we call here from the facebook or google login form we need to remove both the in and out transitions as we might show a cover transition on top of another cover transition form when we return to the original form we restore its transitions to their original values we remove the show listener to prevent a memory leak and multiple restore calls when going back and forth

Module 12: Creating an Uber Clone Some animations are worth keeping product-specific. This lesson is a good example. The circular highlight around the floating action button is not a general-purpose UI pattern you would add to every app. It is a small piece of branding and feedback that fits the ride-hailing experience the course is cloning. ...

Module 12: Creating an Uber Clone Up to this point the Uber clone mostly proves that the core ride flow works. This lesson starts turning the surrounding app chrome into something more believable by making the side menu lead to real account-oriented screens. That shift matters because a convincing application is not just its flagship interaction. Once a user can open settings or tap their avatar, the app starts feeling like a complete product instead of a narrow demo. ...

Module 12: Creating an Uber Clone Editing account details is one of those places where a lot of apps make the user work harder than necessary. The lesson starts by calling out Uber’s more segmented editing flow and then chooses a flatter, more direct alternative: bind text fields straight to the user object and save only when the user leaves the form. ...

Module 13: Creating a Facebook Clone Before writing code, this module does something the course does well when it is at its best: it studies the product being cloned instead of charging straight into implementation. That matters because the point is not to reproduce Facebook pixel for pixel. The point is to understand which product decisions are worth copying, which ones are inconsistent or awkward, and which ones can teach useful lessons about building a large data-heavy mobile app. ...

Module 13: Creating a Facebook Clone With the product direction defined, the next step is to create a project that can actually support it. This lesson is less about raw project generation and more about choosing the right styling and structural foundation for an app that will grow quickly. ...

Module 13: Creating a Facebook Clone Splash screens are easy to overthink. The point is not to hide all startup work behind branding. The point is to make the first moment of the app feel intentional instead of abrupt. This lesson uses a splash screen for a practical reason. The Facebook-style login experience looks very different from the rest of the app, so dropping the user immediately into an unrelated partially loaded screen would feel messy. A simple transition screen gives the app a more coherent starting point. ...

Module 13: Creating a Facebook Clone The login screen is the first place where the Facebook clone stops being an abstract styling exercise and starts making real product decisions. Facebook’s native login UI is inconsistent across platforms, and the video handles that honestly by taking inspiration rather than trying to reproduce every awkward choice exactly. ...

Module 13: Creating a Facebook Clone Once the login screen exists, the next challenge is the signup flow. This lesson makes two important architectural moves before building more screens: it creates a reusable form shell for the signup wizard, and it introduces a lightweight rich-text component for short formatted text with links. ...