Once I was faced with the task of creating an application that will display product information when scanning using augmented reality. Moreover, it was necessary to display buttons, by clicking on which it was possible to add a product and delete it. After some searches, it was decided to use Google Play Services Vision.


First, we need a view which renders a series of custom graphics to be overlayed on top of an associated preview
(i.e., the camera preview).



Add them to the layout:

All the logic for adding information about products and changing their state has been added to the ViewModel:


I implemented handling of button clicks in a fragment as follows:

The Container Transform is similar to the Shared Element transform. Furthermore that transition is the foundation for the container transform.

While it is built on shared element transitions, the concept is slightly different. Shared element transitions will animate individual which appear in both start and end states. However, as the name suggests, the container transform is more about transitioning a container such as a CardView. However, it is possible to use both together, as we’ll see.

First we create a Kotlin extension function:

And we use it in the fragment to transition from the button to the dialog and back. The TransitionManager class will help us with this and its beginDelayedTransition method:

Source code: https://github.com/GeorgCantor/team.marker

We can also create dialog transitions:

Once I needed to create the same page indicator as in Instagram. And I want to share how I implemented it. I used a ViewPager2 to swipe images.

Source code: https://github.com/GeorgCantor/InstagramClone




Fragment layout:

Item layout:

Alex Kirillov

I am an Android Developer https://github.com/GeorgCantor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store