I tried to create a circle shape shadow. Here's how I do it:

@Composable
@Preview
private fun ShadowBoxPreview2() {
    Box(modifier = Modifier
        .size(100.dp)
        .shadow(elevation = 32.dp, shape = CircleShape, spotColor = MaterialTheme.colorScheme.shadowColor),
        Alignment.Center) {
        Text("This is a test text", modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp))
    }
}

The problem was that the view I got on device was not a circle. It's a polygon instead.

Can anyone explain the issue? What I did wrong and how to achieve a circle elevation around a text or image?

I tried to create a circle shape shadow. Here's how I do it:

@Composable
@Preview
private fun ShadowBoxPreview2() {
    Box(modifier = Modifier
        .size(100.dp)
        .shadow(elevation = 32.dp, shape = CircleShape, spotColor = MaterialTheme.colorScheme.shadowColor),
        Alignment.Center) {
        Text("This is a test text", modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp))
    }
}

The problem was that the view I got on device was not a circle. It's a polygon instead.

Can anyone explain the issue? What I did wrong and how to achieve a circle elevation around a text or image?

• android-jetpack-compose

2 Answers 2

You're making the size 100.dp, but then applying fillMaxWidth() to the Text, which could be producing some layout problems. add

contentAlignment = Alignment.Center

Box(
        modifier = Modifier
            .size(200.dp)
            .padding(32.dp)
            .shadow(
                elevation = 8.dp,
                shape = CircleShape,---optional
                clip = false
            )
            .background(color = Color.White, shape = CircleShape),
        contentAlignment = Alignment.Center---------Add this line

well, I ended up with using Surface for Circle shape, and Box.shadow for other shapes to customize shadow color (Surface cannot change shadow color I guess). Here are my classes, which may help anyone needed:

import androidxpose.foundation.background
import androidxpose.foundation.layout.Box
import androidxpose.foundation.layout.BoxScope
import androidxpose.foundation.layout.fillMaxSize
import androidxpose.foundation.layout.padding
import androidxpose.foundation.layout.size
import androidxpose.foundation.shape.CircleShape
import androidxpose.foundation.shape.RoundedCornerShape
import androidxpose.material3.MaterialTheme
import androidxpose.material3.Surface
import androidxpose.material3.Text
import androidxpose.runtime.Composable
import androidxpose.ui.Alignment
import androidxpose.ui.Modifier
import androidxpose.ui.draw.clip
import androidxpose.ui.draw.shadow
import androidxpose.ui.graphics.Color
import androidxpose.ui.graphics.Shape
import androidxpose.ui.tooling.preview.Preview
import androidxpose.ui.unit.Dp
import androidxpose.ui.unit.dp


@Composable
fun ShadowBox(
    modifier: Modifier = Modifier.fillMaxSize(),
    shape: Shape = RoundedCornerShape(16.dp),
    shadowColor: Color = MaterialTheme.colorScheme.shadowColor,
    contentPadding: Dp = 4.dp,
    contentAlignment: Alignment = Alignment.TopStart,
    elevation: Dp = 16.dp,
    content: @Composable() (BoxScope.() -> Unit),
) {
    Box(
        modifier = modifier
            .shadow(
                shape = shape,
                elevation = elevation,
                clip = true,
                spotColor = shadowColor,
            )
            .padding(contentPadding),
        contentAlignment = contentAlignment,
    ) {
        content()
    }
}

@Composable
fun ShadowSurface(
    modifier: Modifier = Modifier.fillMaxSize(),
    shape: Shape = CircleShape,
    contentColor: Color = Color.White,
    elevation: Dp = 16.dp,
    content: @Composable () -> Unit,
) {
    Surface(
        modifier = modifier,
        color = contentColor,
        shadowElevation = elevation,
        shape = shape,
    ) {
        content()
    }
}

@Composable
@Preview
private fun ShadowBoxPreview() {
    ShadowBox(modifier = Modifier) {
        Text("Helloworld!", modifier = Modifier.padding(8.dp))
    }
}

@Composable
@Preview
private fun ShadowSurfacePreview() {
    ShadowSurface(modifier = Modifier.size(200.dp)) {
        Box(modifier = Modifier
            .fillMaxSize()
            .clip(CircleShape)
            .background(Color.Blue))
    }
}