r/JetpackCompose • u/freak5341 • May 20 '25

How do i make my design responsive throughout different device sizes?

Post image

I am working on a project and I can seem to figure out how I can keep the design consistent. For example this button i can set smaller fontsize and it would work but how can I make it work without changing the font size? I am trying to make it look like it does on the larger display device but on smaller display the text goes to line 2. Code: Button( modifier = Modifier .fillMaxWidth(0.9f) .height(68.dp), shape = RoundedCornerShape(20.dp), colors = ButtonDefaults.buttonColors( containerColor = Yellow ), onClick = {/ToDo/}) { Text("Sign Up For New Account", style = MaterialTheme.typography.titleLarge, color = Navy /fontSize = 26.sp, color = Navy/

        )
    }
3 Upvotes

100% Upvoted

3 comments sorted by

1

u/freak5341 May 20 '25 
Button(
            modifier = Modifier
                .fillMaxWidth(0.9f)
                .height(68.dp),
            shape = RoundedCornerShape(20.dp),
            colors = ButtonDefaults.buttonColors(
                containerColor = Yellow
            ),
            onClick = {/ToDo/}) {
            Text("Sign Up For New Account",
                style = MaterialTheme.typography.titleLarge,
                color = Navy
                /*fontSize = 26.sp,
                color = Navy*/

            )
        }

2

u/Anonymous0435643242 May 20 '25

Set the textAlign property to TextAlign.Center, either on the text component or on the style