Dynamic UI

Any event manager application has the responsibility to show the analytics about the event to the organiser and in Open Event Android Orga App (Github Repo), we wanted to achieve a way to display the analytics of total and sold tickets with the data present to us. To analyse, we have a list of tickets, which are divided into 3 categories: Free Paid Donation Our goal was to show information about total tickets and the amount of sold tickets per category. This blog will focus on the dynamic UI creation for the ticket analysis component of the Event Details Dashboard using Android Layout Data Binding. By using Data Binding, we not only reduced the amount of Java Boilerplate code we would have to write, but also accomplished UI reuse in just XML which wouldn’t have been possible without it. You’ll see in a moment what I mean. Properties So first, we’d need to define some properties which will be bound in the UI. These properties are declared in the Event model and their type is ObservableLong provided by the Android DataBinding package. The reason why we are using these instead of primitives is because these fields being Observable, will update the UI as soon as they are updated, without requiring the programmer to set the View Property at all. There are six fields, 3 for total tickets of each type and 3 for sold tickets public final ObservableLong freeTickets = new ObservableLong(); public final ObservableLong paidTickets = new ObservableLong(); public final ObservableLong donationTickets = new ObservableLong(); public final ObservableLong soldFreeTickets = new ObservableLong(); public final ObservableLong soldPaidTickets = new ObservableLong(); public final ObservableLong soldDonationTickets = new ObservableLong(); Some more advantages we get from using these are the batch view update and the use of computed properties in UI. Imagine having a TextView display the amount of free tickets and a progress bar showing the percentage of free tickets sold. Traditionally, you’d have to set the text and compute the percentage and set the progress bar as the data changes, whereas you can just use the fields in layout as is in both TextView and ProgressBar with the computations required and they’ll work in harmony. We have leveraged this feature to show the analytics component of tickets with a Ticket Type Circular Progress Bar Sold Tickets Total Tickets All using the XML layout and databinding Ticket Component For each ticket component, we have 4 variables, namely Ticket Type Name Total Amount Completed Amount (Sold Tickets) Color First 3 are fairly self explanatory, the color attribute we used in our component needs a little bit of description. We decided to give each ticket category its own color for circular progress bar for aesthetics. So, we need each component to have its own color attribute too. But this is not a normal android color ID or a hex. We needed 2 variants of the same color to show in the circular progress to discern the total and completed part. As we are using…