Useful Modifiers In Jetpack Compose Part — II

Photo by Harry Grout on Unsplash

Link For Non-Members

If you haven’t read the first article on it , READ IT FROM HERE .

1). offset Modifier

Through offset modifier , we can change the x and y position of any composable functions.

@Composable
fun OffsetModifier(
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .padding(50.dp)
            .background(Color.LightGray)
            .fillMaxWidth()
            .height(100.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Text(
            text = stringResource(R.string.offset_content),
            modifier = Modifier.offset(x = 0.dp, y = -(15.dp)),
            style = TextStyle(
                color = Color.Black,
                fontSize = 20.sp
            )
        )
    }
}

As you can see above in the offset modifier , we passed x to 0.dp and y to -15.dp. So that it change the position to upside. if we pass 15.dp then it will move to downside.

Same for x — if + , it will move to the right side , otherwise left side.

2). combinedClickable Modifier

If you want to perform multiple-clicks varieties , then you can use combinedClickable modifier.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CombinedClickableModifier(
    modifier: Modifier
) {
    Box(modifier = modifier.combinedClickable(
        onLongClick = {
            // perform long click operations
        },
        onDoubleClick = {
            // perform double click operations
        },
        onClick = {
            // click operations
        }
    ))
}

3). basicMarquee Modifier

If you want to animate text from right to left then use basicMarquee modifier .

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MarqueeText(
    modifier: Modifier
) {
    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(
            text = stringResource(R.string.this_is_an_example_of_basic_marquee_text_in_jetpack_compose),
            fontSize = 20.sp,
            modifier = Modifier.basicMarquee()
        )
    }
}

4). testTag Modifier

testTag modifier is useful when you want to write UI test cases for a particular composable functions.

Text(
    text = stringResource(R.string.this_is_an_example_of_basic_marquee_text_in_jetpack_compose),
    fontSize = 20.sp,
    modifier = Modifier
        .basicMarquee()
        .testTag(stringResource(R.string.basicmarqueetest))
)

Suppose In the above code you want to test the Text composable function then you will simply use the testTag id to test that composable function.

compose-blogs-repository/app/src/main/java/com/nameisjayant/articlesrepository/ui/modifiers/modifier…

That’s all for today my friends , hope you enjoyed and learnt something new from this article.