SDP and SSP: Simplifying Content Scaling in Compose Multiplatform

In the world of mobile app development, ensuring consistent and visually appealing content across different device sizes can be a challenge. While native development offers tools like dp (density-independent pixels) and sp (scale-independent pixels) to help with content scaling, managing these values manually can still be cumbersome. Enter SDP and SSP — two innovative concepts designed to simplify content scaling in Compose Multiplatform.

How do SDP and SSP work?

SDP and SSP provide a more intuitive way to specify dimensions and text sizes in your Compose Multiplatform projects. Instead of manually calculating dp or sp values for different device sizes, you can use SDP and SSP directly in your code. These units automatically adjust based on the device’s screen size and density, ensuring consistent content scaling across various devices.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:sdp-ssp-compose-multiplatform:1.0.4")
}

Usage

// Using SDP for specifying dimensions
val buttonWidth = 100.sdp
val buttonHeight = 50.sdp
 
// Using SSP for specifying text size
val textSize = 16.ssp

Sample Code

@Composable
fun App() = AppTheme {
    Box(
        modifier = Modifier
            .statusBarsPadding()
            .fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier.fillMaxWidth(0.82f),
            shape = RoundedCornerShape(16.sdp),
            colors = CardDefaults.cardColors(Color(0xFFFBF3E8)),
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(0xFF585DDB))
                        .padding(vertical = 16.sdp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image(
                        modifier = Modifier
                            .size(80.sdp),
                        painter = painterResource(Res.drawable.ic_user),
                        contentDescription = null,
                        contentScale = ContentScale.FillBounds
                    )

                    Text(
                        text = "Emily Dounger",
                        fontSize = 16.ssp,
                        color = Color.White,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(top = 12.sdp)
                    )
                }

                Text(
                    text = "Hi there \uD83D\uDC4B , We are Boards to share initital Goals and ideas.",
                    fontSize = 14.ssp,
                    textAlign = TextAlign.Center,
                    color = Color.Black,
                    lineHeight = 18.ssp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(top = 30.sdp).padding(horizontal = 20.sdp)
                )

                Button(
                    onClick = {},
                    colors = ButtonDefaults.buttonColors(Color(0xFF007AFF)),
                    modifier = Modifier.padding(top = 24.sdp, bottom = 20.sdp)
                        .padding(horizontal = 20.sdp).fillMaxWidth().height(40.sdp)
                ) {
                    Text(text = "Say Hello", fontSize = 16.ssp)
                }
            }
        }
    }
}

Android

• layout built using dp & sp

• layout built using sdp & ssp

iOS

• layout built using dp & sp

• layout built using sdp & ssp

Desktop

• layout built using sdp & ssp

GitHub - Chaintech-Network/sdp-ssp-compose-multiplatform

Conslusion

SDP and SSP represent a significant advancement in simplifying content scaling in Compose Multiplatform development. By automating the process of adjusting dimensions and text sizes based on device size and density, SDP and SSP empower developers to create apps that look great on any device, without the need for manual calculation or adjustment. Incorporate SDP and SSP into your projects today and experience the benefits of seamless content scaling firsthand.

Happy coding ❤

Connect with us 👇

Mobile Innovation Network | LinkedIn

Chaintech Network