KotlinJsonUI Compose Support - Tai-Kimura/SwiftJsonUI GitHub Wiki

KotlinJsonUI Jetpack Compose Support

KotlinJsonUI provides comprehensive support for converting JSON layouts to both Jetpack Compose code and native Android XML layouts. This document outlines the supported component types and their attributes for Compose. For XML support, see KotlinJsonUI XML Support.

Supported Component Types

Basic Components

JSON Type	Compose Component	Description
`Label`	`Text`	Text display component
`TextView`	`TextField` (multiline)	Multi-line text input
`TextField`	`TextField`	Single-line text input
`Button`	`Button`	Interactive button
`Image`	`Image`	Static image display
`NetworkImage`	`AsyncImage` (Coil)	Network image loading
`CircleImage`	`Image` with clip	Circular image display

Input Components

JSON Type	Compose Component	Description
`Switch`	`Switch`	Toggle switch
`Toggle`	`Switch`	Toggle (mapped to Switch)
`Slider`	`Slider`	Value slider
`Check`/`CheckBox`	`Checkbox`	Checkbox input
`Radio`	`RadioButton`	Radio button
`SelectBox`/`Spinner`	`DropdownMenu`	Dropdown selection
`Segment`	`SegmentedButton`	Segmented control

Container Components

JSON Type	Compose Component	Description
`View`	`Box`/`Column`/`Row`	Container (based on orientation)
`SafeAreaView`	`Box`	Maps to regular View in Compose
`Scroll`/`ScrollView`	`ScrollableColumn`/`ScrollableRow`	Scrollable container
`Table`/`Collection`	`LazyColumn`/`LazyGrid`	List/Grid view
`TabView`	`TabRow`	Tab navigation
`ConstraintLayout`	`ConstraintLayout`	Constraint-based layout

Special Components

JSON Type	Compose Component	Description
`Web`/`WebView`	`AndroidView` with WebView	Web content display
`Progress`/`ProgressBar`	`LinearProgressIndicator`/`CircularProgressIndicator`	Progress indicator
`Indicator`	`CircularProgressIndicator`	Loading indicator
`GradientView`	`Box` with gradient	Gradient background
`Blur`/`BlurView`	`Box` with blur modifier	Blur effect
`CircleView`	`Box` with circle shape	Circle shape view
`IconLabel`	`Row` with Icon and Text	Icon with label
`Triangle`	Custom drawing	Triangle shape

Supported Attributes by Component

Text/Label

Attribute	Compose Property	Description
`text`	`text`	Display text
`fontSize`	`fontSize`	Text size in sp
`fontColor`	`color`	Text color
`font`/`fontWeight`	`fontWeight`	Font weight (bold, normal, etc.)
`underline`	`textDecoration`	Underline decoration
`strikethrough`	`textDecoration`	Strikethrough decoration
`textShadow`	`shadow`	Text shadow effect
`lineHeightMultiple`	`lineHeight`	Line height multiplier
`textAlign`	`textAlign`	Text alignment
`maxLines`	`maxLines`	Maximum number of lines
`partialAttributes`	Custom component	Rich text support
`linkable`	Custom component	Clickable links

Button

Attribute	Compose Property	Description
`text`	Button content	Button label
`onclick`	`onClick`	Click handler
`enabled`	`enabled`	Enable/disable state
`background`	`containerColor`	Background color
`disabledBackground`	`disabledContainerColor`	Disabled background color
`fontColor`	`contentColor`	Text color
`disabledFontColor`	`disabledContentColor`	Disabled text color
`hilightColor`	InteractionSource	Pressed state color
`fontSize`	Text `fontSize`	Button text size
`cornerRadius`	`shape`	Corner radius
`padding`/`paddings`	`contentPadding`	Internal padding

Image

Attribute	Compose Property	Description
`src`	`painter`	Image resource
`url`/`source`	`model` (AsyncImage)	Network image URL
`contentMode`	`contentScale`	Image scaling mode
`contentDescription`	`contentDescription`	Accessibility description
`size`	`size` modifier	Image size
`cornerRadius`	`clip`	Corner radius
`borderWidth`	`border`	Border width
`borderColor`	`border`	Border color
`placeholder`	`placeholder`	Placeholder image
`errorImage`	`error`	Error image

TextField/TextView

Attribute	Compose Property	Description
`text`	`value`	Input value
`placeholder`/`hint`	`placeholder`	Placeholder text
`onTextChange`	`onValueChange`	Text change handler
`secure`	`visualTransformation`	Password input
`maxLength`	Custom validation	Maximum length
`fontSize`	`textStyle.fontSize`	Text size
`fontColor`	`textStyle.color`	Text color
`background`	`colors.backgroundColor`	Background color
`cornerRadius`	`shape`	Corner radius
`borderWidth`	`border`	Border width
`borderColor`	`colors.focusedIndicatorColor`	Border color
`keyboardType`	`keyboardOptions`	Keyboard type
`editable`	`enabled`	Enable/disable editing

Switch/Toggle

Attribute	Compose Property	Description
`data`/`isOn`	`checked`	Switch state
`onclick`	`onCheckedChange`	Change handler
`tintColor`	`checkedThumbColor`	Checked color
`backgroundColor`	`uncheckedTrackColor`	Unchecked color
`enabled`	`enabled`	Enable/disable state

Container (View/Box/Column/Row)

Attribute	Compose Property	Description
`orientation`	Component type	vertical→Column, horizontal→Row
`background`	`background`	Background color
`cornerRadius`	`clip`	Corner radius
`shadow`	`shadow`	Shadow effect
`borderWidth`	`border`	Border width
`borderColor`	`border`	Border color
`padding`/`paddings`	`padding`	Internal padding
`margins`	`padding` (outer)	External margins
`align`	`contentAlignment`	Content alignment
`visibility`	Conditional rendering	Show/hide logic
`alpha`/`opacity`	`alpha`	Transparency
`child`	Content	Child components

Layout Attributes (Common)

Attribute	Compose Modifier	Description
`width`	`.width()` / `.fillMaxWidth()`	Component width
`height`	`.height()` / `.fillMaxHeight()`	Component height
`weight`	`.weight()`	Flex weight in Row/Column
`minWidth`	`.widthIn(min)`	Minimum width
`maxWidth`	`.widthIn(max)`	Maximum width
`minHeight`	`.heightIn(min)`	Minimum height
`maxHeight`	`.heightIn(max)`	Maximum height
`aspectWidth`/`aspectHeight`	`.aspectRatio()`	Aspect ratio
`padding`	`.padding()`	Padding (single value or array)
`margins`	`.padding()` (outer)	Margins
`paddingTop`/`paddingBottom`/`paddingLeft`/`paddingRight`	`.padding()`	Individual padding
`topMargin`/`bottomMargin`/`leftMargin`/`rightMargin`	`.padding()`	Individual margins

ScrollView

Attribute	Compose Property	Description
`horizontalScroll`	Scroll direction	Horizontal scrolling
`orientation`	Scroll direction	Scroll direction
`child`	Content	Scrollable content

Collection/Table (LazyColumn/LazyGrid)

Attribute	Compose Property	Description
`bind`/`items`	`items()`	Data source
`columns`	Grid columns	Number of columns (Grid)
`scrollDirection`	Layout direction	Scroll direction
`contentPadding`	`contentPadding`	Content padding
`spacing`	`Arrangement.spacedBy()`	Item spacing
`cell`	Item content	Cell template

Special Attributes

Attribute	Description
`id`	Component identifier
`tag`	Component tag
`visibility`	Show/hide state (visible/gone/invisible)
`touchDisabledState`	Touch handling control
`canTap`	Enable tap on non-button views
`events`	Event handlers dictionary
`bindingScript`	Custom binding logic
`include`	Include external JSON layout
`data`	Data model definition

Data Binding

KotlinJsonUI supports data binding using the @{variable} syntax:

@{variableName} - Binds to a ViewModel property
Text interpolation: "Hello @{userName}"
Conditional expressions: @{isVisible ? 'Show' : 'Hide'}

Event Handling

Events are mapped to ViewModel methods:

onclick: Maps to viewModel.methodName()
onTextChange: Maps to viewModel.methodName(it)
onCheckedChange: Maps to viewModel.methodName(it)
onValueChange: Maps to viewModel.methodName(it)

Visibility Handling

Visibility states are handled through conditional rendering:

visible: Component is rendered
gone: Component is not rendered (skipped)
invisible: Component is rendered but with alpha = 0f

Dynamic visibility uses data binding:

"visibility": "@{showContent ? 'visible' : 'gone'}"

Notes

Platform Differences: Some attributes may have different implementations in Compose compared to UIKit/SwiftUI
SafeAreaView: Maps to regular View as Compose handles safe areas differently
Margins: In Compose, margins are implemented as outer padding on the parent
Weight: Only works within Row/Column contexts
Custom Components: Complex components may require custom implementation
Include System: Supports including external JSON layouts for component composition

Example JSON to Compose Conversion

JSON Input:

{
  "type": "View",
  "orientation": "vertical",
  "padding": 16,
  "child": [
    {
      "type": "Label",
      "text": "Hello @{userName}",
      "fontSize": 24,
      "fontColor": "#333333"
    },
    {
      "type": "Button",
      "text": "Click Me",
      "onclick": "handleClick",
      "background": "#007AFF",
      "cornerRadius": 8
    }
  ]
}

Compose Output:

Column(
    modifier = Modifier
        .padding(16.dp)
) {
    Text(
        text = "Hello ${viewModel.userName}",
        fontSize = 24.sp,
        color = Color(android.graphics.Color.parseColor("#333333"))
    )
    Button(
        onClick = { viewModel.handleClick() },
        shape = RoundedCornerShape(8.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(android.graphics.Color.parseColor("#007AFF"))
        )
    ) {
        Text("Click Me")
    }
}