Jetpack Compose - Clip modifier

How to use clip modifier in android jetpack compose. Rectangle shape, Rounded corner shape, Circle shape, and Cut corner shape.

The following code snippet shows how to set a clip modifier with different shapes.


package
com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeExampleTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainContent()
}
}
}
}
}


@Composable
fun MainContent() {
Box(
contentAlignment = Alignment.Center
) {
// * Clip modifier
Box(
modifier = Modifier
.size(150.dp)
//.clip(RoundedCornerShape(0.dp))
.clip(RoundedCornerShape(12.dp))
//.clip(RoundedCornerShape(topEnd = 20.dp, bottomStart = 20.dp))
//.clip(androidx.compose.foundation.shape.CircleShape)

// * set height & width for rectangle shape : eg .size(150.dp,100.dp)
//.clip(RoundedCornerShape(12.dp))
//.clip(CutCornerShape(12.dp))
.background(Color.Black),
)
}
}

..

Comments