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
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 ❤