Using Transitions API with Email Validation in Open Event Organizer Android App
Transitions in Material Design apps provide visual continuity. As the user navigates the app, views in the app change state. Motion and transformation reinforce the idea that interfaces are tangible, connecting common elements from one view to the next.
In the Open Event Organizer Android App, we need a transition from the Get Started screen such that, if the user email is registered, we transition to the Login Screen otherwise, we Transition to the Sign Up Screen. And the transition should be such that the email field is continuously visible. One more condition is that, if the email field is even varied by one character, we need to transition back to the Get Started Screen.
To implement this, we need to use Shared Elements from the Android Transitions API.
What are shared elements?
A shared element transition determines how views that are present in two fragments transition between them. For example, an image that is displayed on an ImageView on both Fragment A and Fragment B transitions from A to B when B becomes visible.
Fade transition is used to fade a view and ChangeBounds transition is used to move a view without changing its size.
To make a transition, we use the setupTransitionAnimations() function like this:
(Note that we have created our own Fade and ChangeBounds transitions and not using XML)
| public void setupTransitionAnimation(Fragment fragment) { Fade exitFade = new Fade(); exitFade.setDuration(100); this.setExitTransition(exitFade); fragment.setReturnTransition(exitFade); ChangeBounds changeBoundsTransition = new ChangeBounds(); fragment.setSharedElementEnterTransition(changeBoundsTransition); Fade enterFade = new Fade(); enterFade.setStartDelay(300); enterFade.setDuration(300); fragment.setEnterTransition(enterFade); this.setReenterTransition(enterFade); } |
Now, in order to detect, if the email field is touched and even changed by one character, we use the TextWatcher like this:
| binding.emailLayout.getEditText().addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { //do nothing } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (start != 0) { sharedViewModel.setEmail(s.toString()); getFragmentManager().popBackStack(); } } @Override public void afterTextChanged(Editable s) { //do nothing } } |
So basically, the moment the text is changed, we add the changed email to the SharedViewModel so that it can be used in the other fragments, and then to start the transition, we pop the back stack using getFragmentManager().popBackStack();
This is what the result looks like:
Resources
- Google – Android developer blog post:
https://android-developers.googleblog.com/2018/02/continuous-shared-element-transitions.html