Advertisement

Responsive Advertisement

Swipe Functionality in Jetpack Compose

  • Step 1 :- Add Dependency 
    swipe = { module = "me.saket.swipe:swipe", version.ref = "swipe" }
    
    // version
    
    swipe = "1.3.0"

  • Step 2 :- Now add this file 

    @Composable
    fun SwipeFeature() {

    var title by remember { mutableStateOf("") }
    val archive = SwipeAction(
    icon = rememberVectorPainter(Icons.TwoTone.Face),
    background = Color.Green,
    onSwipe = {
    title = "archive"
    }
    )

    val snooze = SwipeAction(
    icon = rememberVectorPainter(Icons.TwoTone.Add),
    background = Color.Yellow,
    isUndo = true,
    onSwipe = {
    title = "Add"
    },
    )

    SwipeableActionsBox(
    startActions = listOf(archive),
    endActions = listOf(snooze)
    ) {
    Row(
    modifier = Modifier
    .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.2f))
    .padding(horizontal = 16.dp)
    .padding(vertical = 12.dp)
    ) {
    Box(
    modifier = Modifier
    .clip(RoundedCornerShape(50.dp))
    .background(MaterialTheme.colorScheme.primary.copy(0.6f))
    .size(50.dp)
    )
    Spacer(modifier = Modifier.width(14.dp))
    Column(modifier = Modifier.weight(7f)) {
    Text(
    text = title, style = TextStyle(
    fontSize = MaterialTheme.typography.headlineMedium.fontSize,
    fontWeight = FontWeight.Bold,
    )
    )
    Text(
    text = title, style = TextStyle(
    fontSize = MaterialTheme.typography.bodyMedium.fontSize,
    fontWeight = FontWeight.Medium
    )
    )
    }

    }
    }
    }

    @Preview(showBackground = true)
    @Composable
    fun PreviewSwipeFeature() {
    Column(modifier = Modifier.fillMaxSize()) {
    SwipeFeature()
    }
    }

  • Step 3 :- In MainActivity,

    Column (modifier = Modifier.fillMaxSize()){
    SwipeFeature()
    }
  • Step 4:- ScreenShot below :-




Post a Comment

0 Comments