Server-Driven UI with Android Dynamic Views — “The Warrior Weapon Master”
He is one of the characters mentioned in The Perfect D&D Party for your Application article. Known as the Warrior Weapon Master, who is bold enough to be in front of the user and make use of all types of resources, joining their own strengths with those of their allies (Wizard, Cleric, and Ranger), it represents the fact that, in many Android projects, simple short-flow or action view screens are often created; however, “simple” does not necessarily mean fast. Also, lately, I’ve been working on a project in which the development teams need to create several screens that looked like short-flows and make quick experiments. Thanks to that, I’ve been wondering about the possibilities that could help optimize the team’s time, and, starting from that point, I created a new version of a solution based on the Server-Driven UI concept that a friend (Gustavo Santorio) and I had previously developed. Santorio wrote an article showing the initial part of this solution.
Introduction
Let’s clarify the background before dealing with the codes, OK? The solution is inspired by the vivchar repository that has been already created with the initial solution, which consists in using a RecyclerView with multiple items, in which each ViewType will be a component. To do that, we need to apply a concept called ViewRender to simplify data input and convert it into a legible type for our adapter, which will be subsequently shown on our screen; however, as I mentioned above, it was also necessary to prepare the dynamic to smoothly receive other dynamic flows and not only show components on the screen. The entire process should be traceable as well.
Before we get started, let’s split the dynamic into two parts:
- The dynamic mechanism, which is responsible for showing the Views on screen with some tools to make it easier to be used;
- Adaptation of its components to “plug” them into the dynamic, such as creating its components in item 4 of “Implementation”.
To make it all easier, I have created a DynamicViews library responsible for the dynamic’s mechanism and, following a six(6)-step tutorial, you can already create your traceable screens dynamically and follow new flows through deeplinks.
Implementation:
- Add the DynamicView’s lib
Add to build.gradle:
Add to your module:
implementation 'com.github.rviannaoliveira:DynamicView:1.0.3'2. Make a XML declaration
In your Activity/Fragment, add RecycleView to your xml and that’s it and nothing more, since all components are the same item in your list.
3. Make the DynamicView interface declaration
Inside its presentation layer (ViewModel/Presenter), add the DynamicView interface to the builder. It is the DynamicViewAdapter abstract class, in which you will find the mechanism that interprets the types of ViewRenders for each ViewType. This DynamicView interface has everything you need to work with the API return, and you can make unit tests with everything you have retrieved from your domain layer.
4. Make the screen Adapter association
After obtaining your DynamicView reference, you need to associate it with the RecycleView Adapter in your Activity
5. Make the Object mapping
To be able to work with the Dynamic, this is where the components have to be build through the creation of your own ViewRenders and the mapping of their respective objects to work with Dynamic; however, it all should be done before creating your ViewRender class, which is responsible for “plugging” into the dynamic. We need to make the key and value JSON mapping.
Create a DynamicComponent class, with all key to be provided in the JSON returned mapped.
Then, you should create your object with the same JSON fields, that is, the fields expected in the value from your JSON.
After performing the JSON mapping, now you can create your ViewRenders based on the object mapped in row 7; please note that we are not receiving any specific object since it will be transformed into the mapped and popular object of our component.
Note: A simple example is shown here, of a Button, but any View is accepted in row 21, that is, it can be either a xml or a customized component. And, if you are going to use the customized component, you may pass the object once again for a method inside the component, therefore internally populating the attributes, making the Render cleaner.
Notes: If a component that is not mapped comes out, the library will handle it and ignore this component, showing an empty ViewRender.
6. Make the Dynamic population
Now that our ViewRenders have been built and mapped, we need to register our item list containing the Adapter, as per row 28. After that, the RecycleView should be notified using dynamic.setViewObjectDiff(it). Also, all ViewRenders have a callback that allows you to access the DynamicActionProperties, which gives in return three types of JSON properties:
- deeplink — returns a String with an internal or external deeplink (Insert the link);
- analytics — returns DynamicAnalyticsProperties with the category/action/label that may provide the component traceability;
- actionData — it can be anything, based on your needs.
Here it goes a video with an example of the outcome:
Creating Multiclass characters:
Remember that the example was given with a JSON from a random API, but it is worth noting that you need only a data source, which can be from RemoteConfig or even locally, to have flexibility while using DynamicView.
That’s all folks! It is worth mentioning that the idea of DynamicView is not to be an effortless solution for all functions and screens, but it does apply for more simple cases and even in some advanced situations. This article is more focused on the mechanism since all components created can and should have been created by you, so to ensure that you have the flexibility required for your application!
I welcome comments and suggestions. You can make them below or contact me through LinkedIn ou https://flow.page/rviannaoliveira.
