Safaricom internal session on Server driven Ui. This is an example of Server driven UI with jetpack Compose

Related tags

Jetpack Compose ComposeServerDrivenUI
Overview

Jetpack Compose Server Driven UI

Server Driven UI

This is a demo application for a session at Safaricom to demostrate Server driven UI using Jetpack Compose.

How it works,

The UI changes depending on the api response, which makes dynamic.

Used libraries

  1. Koin -Dependency Injection
  2. Retrofit
  3. Okhttp
  4. RxJava

Example of example server response

 {
   "view_type": "column",
   "content": [
       {
           "vertical_padding":12,
           "horizontal_padding":16,
           "view_type": "bigCard",
           "data": {
               "title": "B-Card",
               "description":"this a sample description for the card "
           }
       },
       {
           "vertical_padding":2,
           "horizontal_padding":4,
           "view_type": "row",
           "content":[
                           {
                               "vertical_padding":2,
                               "horizontal_padding":4,
                               "view_type": "buttonCard",
                               "data": {
                                   "title": "M-pay"
                               }
                           } ,
                            {
                               "vertical_padding":2,
                               "horizontal_padding":4,
                               "view_type": "buttonCard",
                               "data": {
                                   "title": "Setting"
                               }
                           },
                            {
                               "vertical_padding":2,
                               "horizontal_padding":4,
                               "view_type": "buttonCard",
                               "data": {
                                   "title": "Loan"
                               }
                           }          
           ],
           "data": {
               "title": "Pay Now"
           }
       },
       {
           "vertical_padding":2,
           "horizontal_padding":4,
           "view_type": "buttonCard",
           "data": {
               "title": "Yoh!"
           }
       },
       
       {
           "vertical_padding":2,
           "horizontal_padding":4,
           "view_type": "buttonCard",
           "data": {
               "title": "Loan"
           }
       }
   ]
}
You might also like...
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

Odhiambo Brandy 10 Nov 23, 2022
Short example displaying an editable list

MVVM Profiles list App displaying a list of profiles with the ability to add, remove and edit each one Project characteristics 100% Kotlin MVVM Flow A

Gonzalo Guzzardi 0 Jan 15, 2022
Owner
Korir Amos
Senior Android Engineer
Korir Amos
GitHub
Forget about bunch of XML files for maintaining UIs. Jetpack Compose is Android’s modern toolkit for building native UI. Here is a small example to get started.

Jetpack Compose Sample Description This repository is to get started with new Jetpack Compose Toolkit for Android. By using Jetpack Compose you no nee

Simform Solutions 39 Nov 10, 2022
Jetpack Compose Desktop Galaxy Example

Compose-StarWars Compose-StarWar 3D Space particle System build using Canvas API Jetpack Compose Desktop ?? How to Run From gradle tab from right-hand

Chetan Gupta 14 Sep 21, 2022
Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle events. ViewModel, UI and Screenshot tests included :)

AndroidMVIExample Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle e

Patryk Kosieradzki 55 Nov 18, 2022
An example concepts of MVVM and Kotlin. Display, Filter & Sort the given restaurants from assets with Jetpack Compose and AAC

Restaurants - Jetpack Compose An example concepts of MVVM and Kotlin. Display, F

Burak Akgün 84 Oct 30, 2022
Example from effect Rain Matrix with Jetpack Compose

MatrixRainCompose Example from effect Rain Matrix with JetpackCompose For more i

Victor Hernandez 6 Dec 18, 2022
ExoPlayerComposeSample - Example for how we can use the ExoPlayer with Jetpack Compose

ExoPlayer Example with Jetpack Compose This repository demonstrates how we can u

Yusuf Cakmak 15 Dec 23, 2022
Taxi - an example of how to create an introductory screen using Jetpack Compose

Taxi - an example of how to create an introductory screen using Jetpack Compose

Dmitry Savin 1 Feb 25, 2022
LinkU-Android - Jetpack Compose example.

LinkU-Android - Jetpack Compose example.

ThxBro:P 4 Dec 8, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023