-
Notifications
You must be signed in to change notification settings - Fork 6
UI Layer
Hadi Mehrpouya edited this page Jan 28, 2025
·
5 revisions
The purpose of UI layer is to:
- Convert App data -> UI specific data (processing the data)
- Update UI element to UI specific data (presenting the data)
- Deal with UI events (e.g. clicks, scrolls) and update UI accordingly
- Go to step 1
UI layer is made of 2 things:
- UI elements
- State holders Combining these two together give us UI. UI elements are basically the visual representation of UI states. We can make UI layer using different APIs (Application Programming Interfaces) such as (Views or Jetpack Compose)
UI layer is in charge of the following tasks:
- Consume app data and transform it into data the UI can easily render. In OOP we call this serialisation. Serialisation can happen both ways, turning database data into UI readable data and vice-versa.
- Consume UI-renderable data and transform it into UI elements for presentation to the user. This is when you for example loop through list of user's contacts from a database adn then loop through it and per record, you add an item to your UI list.
- Consume user input events from those assembled UI elements and reflect their effects in the UI data as needed. Think of this as newsfeed in your Instagram or social media app, when user double clicks on news list items, you translate it as a reaction to content: "like". You will then update UI to show heart icon and the content data base records the user's like for that specific feed.
- Repeat steps 1 through 3 for as long as necessary.
As long as the process above is happening, Android's reactive architecture would automatically call data changes functions to translate user inputs and interactions back into the database.
You can make UI elements using Vews or Jetpack Compose functions using Kotlin language.
They hold data, make it available to UI and deal with logic of your data. You design this model by always considering SoC