@@ -24,8 +24,8 @@ layout: default
2424
2525| Model | Philosophy | Ideal Use Case | Growth Pattern |
2626| -------| ------------| ----------------| ----------------|
27- | ** Fixed (FX)** | Logarithmic scaling (refined) | Buttons , paddings, margins, icons | Smooth, controlled growth |
28- | ** Dynamic (DY)** | Proportional scaling (aggressive) | Containers, grids, fluid fonts | Linear, percentage-based |
27+ | ** Fixed (FX)** ⭐ ** RECOMMENDED ** | Logarithmic scaling (refined & balanced ) | ** Most UI elements ** : buttons , paddings, margins, icons, fonts, containers, cards | Smooth, controlled growth |
28+ | ** Dynamic (DY)** | Proportional scaling (aggressive) | ** Specific cases ** : large containers, full-width grids, viewport-dependent elements | Linear, percentage-based |
2929
3030---
3131
@@ -87,51 +87,54 @@ dependencies {
8787
8888### 🧩 Jetpack Compose
8989
90- #### Fixed Scaling (FX) - Refined UI Elements
90+ #### Fixed Scaling (FX) - RECOMMENDED for Most UI Elements
9191
9292``` kotlin
9393@Composable
9494fun FixedScalingExample () {
9595 Column (
96- modifier = Modifier .padding(16 .fxdp) // Fixed padding - consistent feel
96+ modifier = Modifier .padding(16 .fxdp) // Fixed padding (RECOMMENDED)
9797 ) {
9898 Text (
9999 text = " Title" ,
100- fontSize = 24 .fxsp // Fixed font size - comfortable reading
100+ fontSize = 24 .fxsp // Fixed font size (RECOMMENDED)
101101 )
102102
103103 Button (
104104 onClick = { },
105105 modifier = Modifier
106- .width(120 .fxdp) // Fixed width - consistent button size
107- .height(48 .fxdp) // Fixed height - standard touch target
106+ .width(120 .fxdp) // Fixed width (RECOMMENDED)
107+ .height(48 .fxdp) // Fixed height (RECOMMENDED)
108108 ) {
109109 Text (" Action" )
110110 }
111111 }
112112}
113113```
114114
115- #### Dynamic Scaling (DY) - Proportional Layouts
115+ #### Dynamic Scaling (DY) - For Specific Large Container Cases
116116
117117``` kotlin
118118@Composable
119119fun DynamicScalingExample () {
120+ // Note: This example shows Dynamic scaling in action
121+ // Use this approach only when you need aggressive proportional scaling
122+ // For most cases, Fixed (FX) is RECOMMENDED
120123 LazyColumn (
121124 modifier = Modifier
122125 .fillMaxWidth()
123- .padding(24 .dydp) // Dynamic padding - proportional to screen
126+ .padding(24 .dydp) // Dynamic padding - scales proportionally
124127 ) {
125128 items(10 ) { index ->
126129 Card (
127130 modifier = Modifier
128131 .fillMaxWidth()
129- .height(100 .dydp) // Dynamic height - proportional
130- .padding(8 .fxdp) // Fixed padding - consistent spacing
132+ .height(100 .dydp) // Dynamic height - proportional to screen
133+ .padding(8 .fxdp) // Fixed padding for consistency
131134 ) {
132135 Text (
133136 text = " Item $index " ,
134- fontSize = 16 .dysp // Dynamic font - proportional to screen
137+ fontSize = 16 .dysp // Dynamic font - proportional scaling
135138 )
136139 }
137140 }
@@ -296,7 +299,7 @@ fun LayoutUtilitiesExample() {
296299``` kotlin
297300@Composable
298301fun ConditionalScalingExample () {
299- val buttonSize = 80 .dynamicDp () // or fixedDP
302+ val buttonSize = 80 .fixedDp () // Fixed (RECOMMENDED)
300303 // Priority 1: Watch with specific width
301304 .screen(UiModeType .WATCH , DpQualifier .SMALL_WIDTH , 200 , 40 .dp)
302305 // Priority 2: Car mode
@@ -317,9 +320,9 @@ fun ConditionalScalingExample() {
317320
318321## 📊 Mathematical Models
319322
320- ### 🎯 Fixed (FX) Model
323+ ### 🎯 Fixed (FX) Model ⭐ ** RECOMMENDED **
321324
322- ** Philosophy** : Logarithmic adjustment for refined scaling
325+ ** Philosophy** : Logarithmic adjustment for refined and balanced scaling
323326
324327** Formula** :
325328```
@@ -330,17 +333,20 @@ Final Value = Base DP × (1 + Adjustment Factor × (Base Increment + AR Adjustme
330333- Smooth, controlled growth
331334- Slows down on very large screens
332335- Maintains visual consistency
333- - Ideal for UI elements
336+ - Perfect balance for most UI scenarios
334337
335- ** Use Cases** :
338+ ** Use Cases** (RECOMMENDED) :
336339- Button heights and widths
337340- Padding and margins
338341- Icon sizes
339342- Font sizes for readability
343+ - Container dimensions
344+ - Card sizes
345+ - Most UI elements
340346
341347### 🚀 Dynamic (DY) Model
342348
343- ** Philosophy** : Percentage-based proportional adjustment
349+ ** Philosophy** : Percentage-based proportional adjustment (use sparingly)
344350
345351** Formula** :
346352```
@@ -351,13 +357,13 @@ Final Value = (Base DP / Reference Width) × Current Screen Dimension
351357- Linear, proportional growth
352358- Maintains percentage of screen space
353359- Aggressive scaling on large screens
354- - Ideal for layout containers
360+ - Use only when specifically needed
355361
356- ** Use Cases** :
357- - Container widths and heights
358- - Grid item sizes
359- - Spacer dimensions
360- - Viewport-dependent elements
362+ ** Use Cases** (specific scenarios only) :
363+ - Very large container widths
364+ - Full-width grid layouts
365+ - Spacer dimensions for full-screen layouts
366+ - Viewport-dependent elements that need to scale aggressively
361367
362368---
363369
@@ -401,8 +407,8 @@ Final Value = (Base DP / Reference Width) × Current Screen Dimension
401407
402408### 💡 Best Practices
403409
404- 1 . ** Use Fixed for UI Elements ** : Buttons, paddings, fonts, icons
405- 2 . ** Use Dynamic for Layout ** : Container widths, spacers, grid items
410+ 1 . ** Use Fixed (FX) for Most Cases ** ⭐ ** RECOMMENDED ** : Buttons, paddings, fonts, icons, containers, cards
411+ 2 . ** Use Dynamic (DY) Sparingly ** : Only for specific large containers, full-width grids, viewport-dependent elements
4064123 . ** Cache Dimensions** : Store frequently used dimensions in properties
4074134 . ** Avoid Excessive Nesting** : Keep dimension chains simple
408414
0 commit comments