KotlinJsonUI XML Support - Tai-Kimura/SwiftJsonUI GitHub Wiki

KotlinJsonUI XML Support

KotlinJsonUI now supports generating native Android XML layouts from JSON definitions, providing a bridge between JSON-based UI development and traditional Android XML layouts.

Overview

The XML generation feature allows you to:

Convert JSON UI definitions to Android XML layouts
Generate drawable resources for backgrounds and styles
Create string resources for localization
Map components to native Android views and Material Design components
Support data binding with @{} syntax

Component Mappings

Layout Containers

JSON Type	Android XML Component	Notes
`View`	`LinearLayout` or `ConstraintLayout`	LinearLayout if `orientation` specified, otherwise ConstraintLayout
`ScrollView`	`ScrollView`	Vertical scrolling
`SafeAreaView`	`com.kotlinjsonui.views.KjuiSafeAreaView`	Safe area handling

Basic Components

JSON Type	Android XML Component	Notes
`Label`	`com.kotlinjsonui.views.KjuiTextView`	Custom view for font support
`Text`	`com.kotlinjsonui.views.KjuiTextView`	Custom view for font support
`Button`	`com.kotlinjsonui.views.KjuiButton`	Custom button with font support
`ImageButton`	`ImageButton`	Native image button
`TextField`	`com.kotlinjsonui.views.KjuiEditText`	Custom EditText with font support
`SecureField`	`com.kotlinjsonui.views.KjuiEditText`	Password input field
`TextView`	`com.kotlinjsonui.views.KjuiEditText`	Multiline text input

Image Components

JSON Type	Android XML Component	Notes
`Image`	`ImageView`	Native image view
`NetworkImage`	`com.kotlinjsonui.views.KjuiNetworkImageView`	Network image loading
`CircleImage`	`com.kotlinjsonui.views.KjuiCircleImageView`	Circular image view

Selection Components

JSON Type	Android XML Component	Notes
`Switch`	`Switch`	Toggle switch
`Checkbox`	`CheckBox`	Checkbox
`Radio`	`RadioButton`	Radio button
`RadioGroup`	`RadioGroup`	Radio button container
`Segment`	`com.google.android.material.tabs.TabLayout`	Segmented control
`Picker`	`Spinner`	Dropdown selector
`SelectBox`	`com.kotlinjsonui.views.KjuiSelectBox`	Custom select box
`DatePicker`	`DatePicker`	Date picker
`TimePicker`	`TimePicker`	Time picker

Progress Components

JSON Type	Android XML Component	Notes
`ProgressBar`	`ProgressBar`	Progress indicator
`Slider`	`SeekBar`	Value slider
`Rating`	`RatingBar`	Star rating

List Components

JSON Type	Android XML Component	Notes
`List`	`androidx.recyclerview.widget.RecyclerView`	List view
`Table`	`androidx.recyclerview.widget.RecyclerView`	Table view
`Collection`	`androidx.recyclerview.widget.RecyclerView`	Collection view
`Grid`	`GridLayout`	Grid layout

Material Design Components

JSON Type	Android XML Component	Notes
`Card`	`com.google.android.material.card.MaterialCardView`	Material card
`Chip`	`com.google.android.material.chip.Chip`	Material chip
`ChipGroup`	`com.google.android.material.chip.ChipGroup`	Chip container
`FloatingActionButton`	`com.google.android.material.floatingactionbutton.FloatingActionButton`	FAB
`BottomNavigation`	`com.google.android.material.bottomnavigation.BottomNavigationView`	Bottom navigation
`NavigationView`	`com.google.android.material.navigation.NavigationView`	Navigation drawer
`AppBar`	`com.google.android.material.appbar.AppBarLayout`	App bar
`Toolbar`	`androidx.appcompat.widget.Toolbar`	Toolbar
`TabLayout`	`com.google.android.material.tabs.TabLayout`	Tab layout
`TabView`	`com.google.android.material.tabs.TabLayout`	Tab view

Special Components

JSON Type	Android XML Component	Notes
`GradientView`	`com.kotlinjsonui.views.KjuiGradientView`	Gradient backgrounds
`BlurView`	`com.kotlinjsonui.views.KjuiBlurView`	Blur effects
`Web`	`WebView`	Web content

Utility Components

JSON Type	Android XML Component	Notes
`Divider`	`View`	Divider line
`Spacer`	`Space`	Empty space
`Include`	`include`	Include layout

Attribute Mappings

Dimension Attributes

JSON Attribute	Android XML Attribute	Value Conversion
`width`	`android:layout_width`	`matchParent` → `match_parent`, `wrapContent` → `wrap_content`, numbers → `dp`
`height`	`android:layout_height`	Same as width
`padding`	`android:padding`	Array → individual padding values
`margin`	`android:layout_margin`	Array → individual margin values
`minWidth`	`android:minWidth`	Numbers → `dp`
`minHeight`	`android:minHeight`	Numbers → `dp`
`maxWidth`	`android:maxWidth`	Numbers → `dp`
`maxHeight`	`android:maxHeight`	Numbers → `dp`

Text Attributes

JSON Attribute	Android XML Attribute	Notes
`text`	`android:text`	Supports data binding `@{}`
`hint`	`android:hint`	Placeholder text
`fontSize`, `textSize`	`android:textSize`	Numbers → `sp`
`fontColor`, `textColor`	`android:textColor`	Color values
`font`	`app:kjui_font_name`	For Kjui views (with .ttf extension)
`fontFamily`	`app:kjui_font_name` or `android:fontFamily`	Depends on component
`fontWeight`	`android:textStyle`	`bold`, `italic`, `normal`
`textAlign`	`android:textAlignment`	`left`→`textStart`, `right`→`textEnd`, `center`
`maxLines`	`android:maxLines`	Maximum text lines
`ellipsize`	`android:ellipsize`	Text truncation

Style Attributes

JSON Attribute	Android XML Attribute	Notes
`background`	`android:background`	Colors or drawable resources
`backgroundColor`	`android:background`	Alias for background
`cornerRadius`	Generated drawable	Creates rounded corner drawable
`borderWidth`	Generated drawable	Creates border drawable
`borderColor`	Generated drawable	Border color in drawable
`alpha`	`android:alpha`	Transparency (0.0-1.0)
`visibility`	`android:visibility`	`visible`, `invisible`, `gone`
`enabled`	`android:enabled`	Enable/disable view
`clickable`	`android:clickable`	Make view clickable

Layout Attributes

JSON Attribute	Android XML Attribute	Notes
`gravity`	`android:gravity`	Content alignment
`layout_gravity`	`android:layout_gravity`	View alignment in parent
`weight`	`android:layout_weight`	LinearLayout weight
`orientation`	`android:orientation`	`horizontal` or `vertical`
`alignParentTop`	`android:layout_alignParentTop`	RelativeLayout
`alignParentBottom`	`android:layout_alignParentBottom`	RelativeLayout
`alignParentLeft`	`android:layout_alignParentLeft`	RelativeLayout
`alignParentRight`	`android:layout_alignParentRight`	RelativeLayout
`centerInParent`	`android:layout_centerInParent`	RelativeLayout
`centerHorizontal`	`android:layout_centerHorizontal`	RelativeLayout
`centerVertical`	`android:layout_centerVertical`	RelativeLayout

Input Attributes

JSON Attribute	Android XML Attribute	Notes
`inputType`	`android:inputType`	Text input type
`imeOptions`	`android:imeOptions`	Keyboard action button
`maxLength`	`android:maxLength`	Maximum input length
`editable`	`android:editable`	Text editability
`singleLine`	`android:singleLine`	Single line input
`password`	`android:inputType="textPassword"`	Password input

Image Attributes

JSON Attribute	Android XML Attribute	Notes
`src`	`android:src`	Image resource
`scaleType`	`android:scaleType`	Image scaling
`adjustViewBounds`	`android:adjustViewBounds`	Preserve aspect ratio
`tint`	`android:tint`	Image tinting

ConstraintLayout Attributes

JSON Attribute	Android XML Attribute
`constraintStartToStartOf`	`app:layout_constraintStart_toStartOf`
`constraintEndToEndOf`	`app:layout_constraintEnd_toEndOf`
`constraintTopToTopOf`	`app:layout_constraintTop_toTopOf`
`constraintBottomToBottomOf`	`app:layout_constraintBottom_toBottomOf`
`constraintStartToEndOf`	`app:layout_constraintStart_toEndOf`
`constraintEndToStartOf`	`app:layout_constraintEnd_toStartOf`
`constraintTopToBottomOf`	`app:layout_constraintTop_toBottomOf`
`constraintBottomToTopOf`	`app:layout_constraintBottom_toTopOf`

Data Binding Support

The XML generator supports Android data binding with the @{} syntax:

{
  "type": "Label",
  "text": "@{user.name}",
  "visibility": "@{user.isActive ? View.VISIBLE : View.GONE}"
}

Generates:

<com.kotlinjsonui.views.KjuiTextView
    android:text="@{user.name}"
    android:visibility="@{user.isActive ? View.VISIBLE : View.GONE}" />

Unsupported Bindings

Some bindings are currently skipped due to type incompatibilities:

RecyclerView items binding (requires adapter implementation)
StatusColor bindings (Compose UI Color type)
Progress/Slider value bindings (double type not supported)

Custom Views (Kjui Views)

KotlinJsonUI provides custom views with enhanced features:

KjuiTextView, KjuiButton, KjuiEditText

Support for custom fonts via app:kjui_font_name
Automatic font file handling (.ttf extension added if missing)

KjuiNetworkImageView

Automatic network image loading
Placeholder and error image support

KjuiCircleImageView

Circular image rendering
Network image support

KjuiSafeAreaView

Safe area insets handling
Edge-to-edge support

KjuiGradientView

Gradient background support
Multiple gradient types

KjuiBlurView

Blur effect implementation
Customizable blur radius

Resource Generation

Drawable Resources

The XML generator automatically creates drawable resources for:

Rounded corners (cornerRadius)
Borders (borderWidth, borderColor)
Gradients (for GradientView)
State selectors (pressed, selected states)

String Resources

Automatic string resource extraction
Support for localization
Resource references with @string/ prefix

Color Resources

Color value validation
Transparent color handling (clear → #00000000)
Resource references with @color/ prefix

Usage Example

Input JSON:

{
  "type": "Card",
  "padding": [16, 16],
  "margin": [8, 8],
  "cornerRadius": 8,
  "elevation": 4,
  "child": [
    {
      "type": "View",
      "orientation": "vertical",
      "child": [
        {
          "type": "Label",
          "text": "@{product.name}",
          "fontSize": 18,
          "fontWeight": "bold",
          "margin": [0, 0, 8, 0]
        },
        {
          "type": "Label",
          "text": "@{product.description}",
          "fontSize": 14,
          "textColor": "#666666"
        }
      ]
    }
  ]
}

Generated XML:

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:padding="16dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <com.kotlinjsonui.views.KjuiTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{product.name}"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginBottom="8dp" />
        
        <com.kotlinjsonui.views.KjuiTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{product.description}"
            android:textSize="14sp"
            android:textColor="#666666" />
            
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>