Unit Size

The unit is one of the Jetpack Compose modules of this library, which can support all screen sizes in sdp, ssp or custom create with @Dimen. Also we can use rememberWindowSize() to know in which device we are (Compact, Medium, Expanded).

Setup

plugins {
    ...
    id("com.google.devtools.ksp") version "1.7.10-1.0.6"
}

android {
    ...
    kotlin {
        sourceSets.debug {
            kotlin.srcDir("build/generated/ksp/debug/kotlin")
        }
        sourceSets.release {
            kotlin.srcDir("build/generated/ksp/release/kotlin")
        }
    }
}

dependencies {
    implementation 'com.github.ghasemdev.affogato:affogato-unit:AFFOGATO_VERSION'
    ksp 'com.github.ghasemdev.affogato:affogato-unit-processor:AFFOGATO_VERSION'
}

Usage

To use the default units, just use the extension values `.sdp` or `.ssp`.

EXAMPLE:

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.sdp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Image(
        painter = painterResource(id = R.drawable.affogato),
        modifier = Modifier.size(80.sdp),
        contentDescription = null
    )
    Spacer(modifier = Modifier.height(32.sdp))

    Text(
        text = stringResource(id = R.string.lorem),
        textAlign = TextAlign.Justify,
        fontSize = 16.ssp
    )
    Spacer(modifier = Modifier.height(32.sdp))

    Button(
        modifier = Modifier
            .fillMaxWidth()
            .height(48.sdp),
        onClick = { }
    ) {
          Text(text = stringResource(id = R.string.app_name).uppercase(), fontSize = 16.ssp)
      }
}

output

Also you can create custom dimension with `@Dimen` tag.

As a first step, you must first create a variable using the following format:

@Dimen(type = "dp|sp", values = ["screen_width(Int):value(Int)", ...])
val variable_name = defualt_value.(dp|sp)

Then build the project so that the codes are generated. The next step is, you need to add the ProvideDimens function to the Theme.kt, now you only need to use the dimen variable.

...
ProvideDimens {
    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

EXAMPLE:

@Dimen(type = "dp", values = ["320:70", "480:80", "600:180", "720:180"])
val icon = 80.dp

@Dimen(type = "dp", values = ["320:14", "480:16", "600:18", "720:20"])
val padding = 16.dp

@Dimen(type = "dp", values = ["320:26", "480:32", "600:34", "720:36"])
val space = 32.dp

@Dimen(type = "dp", values = ["320:50", "480:50", "600:70", "720:80"])
val heightButton = 48.dp

@Dimen(type = "sp", values = ["320:14", "480:20", "600:30", "720:32"])
val fontSize = 16.sp

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(dimen.padding),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Image(
        painter = painterResource(id = R.drawable.affogato),
        modifier = Modifier.size(dimen.icon),
        contentDescription = null
    )
    Spacer(modifier = Modifier.height(dimen.space))

    Text(
        text = stringResource(id = R.string.lorem),
        textAlign = TextAlign.Justify,
        fontSize = dimen.fontSize
    )
    Spacer(modifier = Modifier.height(dimen.space))

    Button(
        modifier = Modifier
            .fillMaxWidth()
            .height(dimen.heightButton),
        onClick = { }
    ) {
          Text(text = stringResource(id = R.string.app_name).uppercase(), fontSize = dimen.fontSize)
      }
}

output

Use `rememberWindowSize()` to know in which device we are (Compact, Medium, Expanded).

EXAMPLE:

val window = rememberWindowSize()
val text by remember(window) {
    mutableStateOf(
        when (window.width) {
            WindowType.Compact -> "Compact"
            WindowType.Medium -> "Medium"
            WindowType.Expanded -> "Expanded"
        }
    )
}