{"id":17713506,"url":"https://github.com/vvsdevs/androiddynamicjetpackcompose","last_synced_at":"2025-06-15T13:02:15.092Z","repository":{"id":258779715,"uuid":"875677000","full_name":"vvsdevs/AndroidDynamicJetpackCompose","owner":"vvsdevs","description":"🚀 Android Dynamic Jetpack Compose is a powerful library that enables dynamic layout rendering based on JSON configurations using Jetpack Compose. This library allows developers to design and update UI elements dynamically without needing to release a new app update, making it a flexible and efficient solution for Android applications.🚀","archived":false,"fork":false,"pushed_at":"2024-11-30T12:56:19.000Z","size":69849,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T22:41:39.623Z","etag":null,"topics":["android","android-library","compose","dynamic","jetpack-android","jetpack-compose","jetpackcompose","kotlin","kotlin-android","library"],"latest_commit_sha":null,"homepage":"https://vvsdevs.github.io/AndroidDynamicJetpackCompose/","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vvsdevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-20T15:54:41.000Z","updated_at":"2024-12-30T02:46:11.000Z","dependencies_parsed_at":"2024-10-25T06:51:30.770Z","dependency_job_id":"4aa959cd-5796-42a6-bc50-262e84497829","html_url":"https://github.com/vvsdevs/AndroidDynamicJetpackCompose","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"fa0ad2bbc9daaa93c5a191b08d398fba6c910cdb"},"previous_names":["vvsdevs/androiddynamicjetpackcompose"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvsdevs%2FAndroidDynamicJetpackCompose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvsdevs%2FAndroidDynamicJetpackCompose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvsdevs%2FAndroidDynamicJetpackCompose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvsdevs%2FAndroidDynamicJetpackCompose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vvsdevs","download_url":"https://codeload.github.com/vvsdevs/AndroidDynamicJetpackCompose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252547856,"owners_count":21766066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","compose","dynamic","jetpack-android","jetpack-compose","jetpackcompose","kotlin","kotlin-android","library"],"created_at":"2024-10-25T10:05:04.965Z","updated_at":"2025-05-05T17:58:07.565Z","avatar_url":"https://github.com/vvsdevs.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/dynamic.png)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)  ![](https://img.shields.io/badge/Jetpack%20Compose-1.0.1-brightgreen)  [![](https://jitpack.io/v/vvsdevs/AndroidDynamicJetpackCompose.svg)](https://jitpack.io/#vvsdevs/AndroidDynamicJetpackCompose)  [![API](https://img.shields.io/badge/API-19%2B-orange.svg?style=flat)](https://android-arsenal.com/api?level=19)   ![CircleCI](https://circleci.com/gh/CymChad/BaseRecyclerViewAdapterHelper/tree/master.svg?style=svg)\n\n# Android Remote Jetpack Compose: Server-Side Driven UI Using Compose\n\nAndroid Remote Jetpack Compose is a revolutionary library designed for server-side driven UI development in Android applications using Jetpack Compose. It allows developers to dynamically render layouts from JSON configurations, enabling seamless updates to app interfaces without releasing new versions. This flexibility is ideal for rapidly evolving projects, offering robust support for dynamic UI design and server-side integration.\n\n## Few of Basic Designs that we did using this library \n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/zepto.png\" alt=\"Home Design\" width=\"200\"/\u003e\n  \u003cimg src=\"https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/home.png\" alt=\"Home Design\" width=\"200\"/\u003e\n  \u003cimg src=\"https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/player.png\" alt=\"Player Design\" width=\"200\"/\u003e\n  \u003cimg src=\"https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/login.png\" alt=\"Login Design\" width=\"200\"/\u003e\n \u003cvideo width=\"320\" height=\"240\" controls\u003e\n    \u003csource src=\"https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/remote-compose/src/main/assets/ServerSideDrivenUI.webm\" type=\"video/webm\"\u003e\n    Your browser does not support the video tag.\n  \u003c/video\u003e\n\u003c/p\u003e\n\n## Why Choose Android Remote Jetpack Compose?\n\n- Server-Side Driven UI (SSDU): Effortlessly update your app's UI by managing configurations on the server, reducing app downtime and deployment delays.\n- Jetpack Compose-Based Dynamic Layouts: Harness the power of Jetpack Compose to create dynamic, reactive, and efficient UI components driven by JSON.\n- Flexibility for Modern App Development: Tailor your app's design instantly using a server-side approach, perfect for apps with frequent updates or personalized content.\n- Seamless Integration with Server APIs: Use Retrofit to fetch JSON configurations directly from your server, enabling real-time UI updates without app updates.\n\n## Key Features\n- Dynamic JSON-Driven UI: Modify and manage layouts from the server without updating the app.\n- Support for a Wide Range of Compose Components: From basic elements like Text and Button to advanced layouts like LazyColumn and LazyRow.\n- Material Design 3 Compliance: Build modern and stylish UIs with Material Design 3 integration.\n- Lightweight Architecture: Designed to minimize overhead and maximize flexibility, leveraging Hilt for dependency injection.\n- Customizable and Scalable: Adapt to changing design needs with ease.\n\n## Why Server-Side Driven UI?\nServer-Side Driven UI (SSDU) is the future of mobile development, allowing for centralized UI management:\n\n- Real-Time Updates: Make UI changes instantly by updating server configurations.\n- Reduced App Update Cycles: No need to publish new app versions for design tweaks.\n- Personalized Experiences: Dynamically adjust layouts and content for individual users based on server-driven logic.\n\n## Table of Contents\n- [Installation](#installation)\n- [Usage](#usage)\n    - [Setting Up Configuration](#setting-up-configuration)\n    - [Loading a Screen](#loading-a-screen)\n    - [Event Listeners](#event-listeners)\n- [Components](#components)\n- [Customization](#Manual)\n- [License](#license)\n\n## Installation\n\n1. Add the Jitpack repository to your root `build.gradle` file:\n    ```groovy\n    allprojects {\n        repositories {\n            ...\n            maven { url 'https://jitpack.io' }\n        }\n    }\n    ```\n\n2. Add the dependency to your module's `build.gradle` file:\n    ```groovy\n    dependencies {\n        implementation (\"com.github.vvsdevs:AndroidDynamicJetpackCompose:1.9.0\") \n       //Optional\n        implementation(\"com.google.dagger:hilt-android:2.51.1\")\n        kapt(\"com.google.dagger:hilt-compiler:2.51.1\")\n        implementation(\"androidx.navigation:navigation-compose:2.8.2\")\n        implementation(\"androidx.activity:activity-compose:1.9.2\") \n    }\n    ```\n\n## Usage\n\n### Setting Up Configuration\n\nCreate a configuration for your layout using the `RemoteComposeConfig` class:\n```kotlin\nval config = RemoteComposeConfig(\n    baseUrl = \"https://your-server-url.com/\",\n    uiComponentPath = \"compose.json\",\n    screenPath = \"compose_screen1.json\"\n)\n```\n\n```kotlin\n@AndroidEntryPoint\nclass MainActivity : ComponentActivity(), ComposeCallback {\n    @Inject\n    lateinit var mainPresenter: MainPresenter\n\n    private val config = RemoteComposeConfig(\n        baseUrl = \"https://example.com/\",\n        uiComponentPath = \"compose.json\",\n        screenPath = \"compose_screen1.json\"\n    )\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        mainPresenter.initialize(config)\n        mainPresenter.attachView(this)\n        mainPresenter.loadUiComponents()\n        setContent { MyApp() }\n    }\n}\n````\n\n\n### Loading a Screen\n\n1.\tInject the MainPresenter and initialize it:\n```kotlin\n@Inject\nlateinit var mainPresenter: MainPresenter\n\noverride fun onCreate(savedInstanceState: Bundle?) {\n    super.onCreate(savedInstanceState)\n    mainPresenter.initialize(config)\n    mainPresenter.attachView(this)\n    mainPresenter.loadUiComponents()\n    setContent { MyApp() }\n}\n\n```\n2.\tUse the DynamicLayout composable to render the screen dynamically:\n\n```kotlin\nprivate var uiComponent by mutableStateOf\u003cUIComponent?\u003e(null)\nprivate var errorMessage by mutableStateOf(\"\")\n\noverride fun showError(message: String) {\n  this.errorMessage = message\n  Log.e(\"MainActivity\", \"Error: $message\")\n  Toast.makeText(this, message, Toast.LENGTH_SHORT).show()\n}\n\noverride fun showComponents(components: UIComponent) {\n  uiComponent = components\n  Log.d(\"MainActivity\", \"Components loaded:  $components\")\n}\n\n//customization\n@Composable\nfun MyApp() {\n  DynamicLayout(uiComponent, navController, mainPresenter)\n}\n\n@Composable\nfun MyApp() {\n  val context = LocalContext.current\n  val navController = rememberNavController()\n  BackHandler(enabled = true) {\n    if (!navController.popBackStack()) {\n      (context as? ComponentActivity)?.finish()\n    }\n  }\n  Scaffold(\n    topBar = {\n      TopAppBar(\n        title = { Text(\"Top Bar\") },\n        actions = {\n          // Add any actions if needed\n        }\n      )\n    },\n    floatingActionButton = {\n      FloatingActionButton(onClick = { mainPresenter.loadUiComponents() }) {\n        Text(\"+\")\n      }\n    }\n  ) { paddingValues -\u003e\n    Box(modifier = Modifier.padding(paddingValues)) {\n      NavHost(navController, startDestination = \"mainScreen\") {\n        composable(\"mainScreen\") {\n          uiComponent?.let {\n            DynamicLayout(it, navController, mainPresenter)\n          }\n        }\n        composable(\"navigate/{screenId}\") { backStackEntry -\u003e\n          val screenId = backStackEntry.arguments?.getString(\"screenId\")\n          screenId?.let {\n            LaunchedEffect(Unit) {\n              mainPresenter.loadScreenById(it) { success -\u003e\n                if (!success) {\n                  Toast.makeText(\n                    context,\n                    \"Design for $screenId not found\",\n                    Toast.LENGTH_SHORT\n                  ).show()\n                }\n              }\n            }\n          }\n          uiComponent?.let {\n            DynamicLayout(it, navController, mainPresenter)\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Event Listeners\n\n3. Event listeners are defined in JSON and handled using the handleAction function in your Kotlin code.\n\n```kotlin\n\nfun handleAction(action: String, context: Context, mainPresenter: MainPresenter) {\n    when (action) {\n        \"navigateToScreen\" -\u003e { /* Handle screen navigation */ }\n        \"fetchData\" -\u003e { /* Fetch data from the server */ }\n        else -\u003e { /* Default action */ }\n    }\n}\n```\n\n\n    \n## Supported UI Components\n\n- **Text**: Displays text with customizable color, font size, and alignment.\n- **Image**: Loads images from URLs with scaling options.\n- **Button**: Configurable with actions, background color, and text color.\n- **TextField**: Editable input fields for user data entry.\n- **Card**: Displays content with elevation and rounded corners.\n- **Column/Row**: Organizes child components vertically or horizontally.\n- **ScrollView**: Scrollable layout for vertical content.\n- **Divider**: Adds a horizontal line between components.\n- **Switch/Checkbox**: Toggles for user interactions.\n- **LazyColumn**: Optimized for displaying a vertical list of components efficiently.\n- **LazyRow**: Optimized for displaying a horizontal list of components efficiently.\n- **Spacer**: Adds spacing between components for layout adjustments.\n- **Box**: A container component that holds child components with customizable alignment.\n- **Slider**: Allows users to select a value from a continuous range.\n- **ProgressBar**: Displays a visual representation of progress.\n- **FloatingActionButton**: A button with an icon for prominent actions.\n- **Container**: Groups multiple components and screens together.\n- **Screen**: Holds the content and layout for individual screens.\n\n---\n\n# Android Remote Jetpack Compose Manual\n\n## Table of Contents\n* [Introduction](#introduction)\n* [Components](#components)\n  * [ContainerComponent](#containercomponent)\n  * [ScreenComponent](#screencomponent)\n  * [TextComponent](#textcomponent)\n  * [ButtonComponent](#buttoncomponent)\n  * [ImageComponent](#imagecomponent)\n  * [CardComponent](#cardcomponent)\n  * [ColumnComponent](#columncomponent)\n  * [RowComponent](#rowcomponent)\n  * [LazyColumnComponent](#lazycolumncomponent)\n  * [LazyRowComponent](#lazyrowcomponent)\n  * [ScrollViewComponent](#scrollviewcomponent)\n  * [SpacerComponent](#spacercomponent)\n  * [BoxComponent](#boxcomponent)\n  * [TextFieldComponent](#textfieldcomponent)\n  * [DividerComponent](#dividercomponent)\n  * [IconComponent](#iconcomponent)\n  * [SwitchComponent](#switchcomponent)\n  * [CheckboxComponent](#checkboxcomponent)\n  * [SliderComponent](#slidercomponent)\n  * [ProgressBarComponent](#progressbarcomponent)\n  * [FloatingActionButtonComponent](#floatingactionbuttoncomponent)\n* [ModifierData](#modifierdata)\n* [Event Handling](#event-handling)\n* [Applying Modifiers](#applying-modifiers)\n\n---\n\n## Introduction\nThis manual provides detailed information on how to use and configure the components available in the Android Remote Jetpack Compose library. Each component is customizable with various properties and modifiers to fit your needs.\n\n## Components\n\n### ContainerComponent\nA container that holds multiple components.\n\n- **screens**: List of `ScreenComponent` objects.\n- **children**: List of `UIComponent` objects inside the container.\n- **modifier**: Optional `ModifierData` for styling.\n\n### ScreenComponent\nRepresents a screen that holds multiple components.\n\n- **id**: Unique identifier for the screen.\n- **children**: List of `UIComponent` objects inside the screen.\n- **modifier**: Optional `ModifierData` for styling.\n\n### TextComponent\nDisplays a piece of text with customization options.\n\n- **text**: The text to display.\n- **modifier**: Optional `ModifierData`.\n- **color**: Text color in hex.\n- **fontSize**: Font size.\n- **fontStyle**: Style (e.g., italic, normal).\n- **textAlign**: Text alignment (e.g., center, left, right).\n\n### ButtonComponent\nA customizable button.\n\n- **text**: The text on the button.\n- **action**: The action triggered when the button is clicked.\n- **modifier**: Optional `ModifierData`.\n- **backgroundColor**: Background color of the button.\n- **textColor**: Text color.\n- **elevation**: Elevation of the button.\n\n### ImageComponent\nDisplays an image from a URL.\n\n- **imageUrl**: URL of the image.\n- **modifier**: Optional `ModifierData`.\n- **contentDescription**: Description for accessibility.\n- **contentScale**: How the image is scaled (e.g., fitXY, centerCrop).\n\n### CardComponent\nA card that can contain other components.\n\n- **content**: The child component within the card.\n- **modifier**: Optional `ModifierData`.\n- **backgroundColor**: Background color of the card.\n- **elevation**: Elevation/shadow depth.\n- **borderColor**: Border color (optional).\n- **navigationTarget**: Target screen to navigate when clicked.\n\n### ColumnComponent\nOrganizes children vertically.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n- **verticalArrangement**: Spacing arrangement.\n- **horizontalAlignment**: Alignment of children.\n\n### RowComponent\nOrganizes children horizontally.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n- **horizontalArrangement**: Spacing arrangement.\n- **verticalAlignment**: Alignment of children.\n\n### LazyColumnComponent\nA scrollable column for large data sets.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n\n### LazyRowComponent\nA scrollable row for large data sets.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n\n### ScrollViewComponent\nA scrollable view that contains multiple components.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n\n### SpacerComponent\nAdds space between components.\n\n- **height**: Height of the spacer.\n- **modifier**: Optional `ModifierData`.\n\n### BoxComponent\nA flexible container that can hold components.\n\n- **children**: List of `UIComponent` objects.\n- **modifier**: Optional `ModifierData`.\n- **contentAlignment**: Alignment of content inside the box.\n\n### TextFieldComponent\nAn editable text field.\n\n- **hint**: Placeholder text.\n- **inputType**: Type of input (e.g., text, number).\n- **modifier**: Optional `ModifierData`.\n- **value**: Current text value.\n- **onValueChange**: Action triggered when text changes.\n\n### DividerComponent\nAdds a divider line.\n\n- **modifier**: Optional `ModifierData`.\n- **color**: Color of the divider.\n- **thickness**: Thickness of the line.\n\n### IconComponent\nDisplays an icon.\n\n- **iconName**: Name or identifier of the icon.\n- **modifier**: Optional `ModifierData`.\n\n### SwitchComponent\nA switch that toggles between two states.\n\n- **isChecked**: Initial state of the switch.\n- **onCheckedChangeAction**: Action when the state changes.\n- **modifier**: Optional `ModifierData`.\n\n### CheckboxComponent\nA checkbox for selection.\n\n- **isChecked**: Initial state of the checkbox.\n- **onCheckedChangeAction**: Action when the state changes.\n- **modifier**: Optional `ModifierData`.\n\n### SliderComponent\nA slider for selecting a value within a range.\n\n- **value**: Initial value of the slider.\n- **onValueChangeAction**: Action when the value changes.\n- **modifier**: Optional `ModifierData`.\n- **min**: Minimum value.\n- **max**: Maximum value.\n\n### ProgressBarComponent\nDisplays a progress bar.\n\n- **progress**: Current progress value.\n- **modifier**: Optional `ModifierData`.\n- **color**: Color of the progress bar.\n\n### FloatingActionButtonComponent\nA floating button for actions.\n\n- **icon**: Icon for the button.\n- **action**: Action when the button is clicked.\n- **modifier**: Optional `ModifierData`.\n- **backgroundColor**: Background color.\n- **elevation**: Elevation of the button.\n\n## ModifierData\nDefines the visual appearance and layout.\n\n- **padding**: Padding in dp.\n- **height**: Height of the component.\n- **width**: Width of the component.\n- **fillMaxHeight**: Boolean to fill maximum height.\n- **fillMaxWidth**: Boolean to fill maximum width.\n- **backgroundColor**: Background color (hex).\n- **cornerRadius**: Corner radius for rounded edges.\n- **elevation**: Elevation for shadow effect.\n\n## Event Handling\nComponents like buttons and switches can have actions associated with them. Actions can be predefined functions or navigational events.\n\n## Applying Modifiers\nModifiers customize the appearance of components. You can combine multiple modifiers to create complex layouts.\n\n---\n\nThis manual provides an overview of each component and its usage in the Android Remote Jetpack Compose library. Adjust components according to your UI needs for a dynamic and interactive user experience.\n\n\n\n## Manual\n\nFor advanced usage, take a look at this awesome [manual](https://github.com/vvsdevs/AndroidDynamicJetpackCompose/blob/master/MANUAL.md).\n\n### Contributing\nWe welcome contributions to Android Remote Jetpack Compose! If you want to contribute:\n\n\t1.\tFork the repository.\n\t2.\tCreate a new feature branch.\n\t3.\tMake your changes and submit a pull request.\n\nFeel free to open issues or pull requests on GitHub for any bug fixes or enhancements.\n\n## License\nThis project is licensed under the [Apache 2.0 License](https://opensource.org/licenses/Apache-2.0).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvvsdevs%2Fandroiddynamicjetpackcompose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvvsdevs%2Fandroiddynamicjetpackcompose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvvsdevs%2Fandroiddynamicjetpackcompose/lists"}