Blog Infos
Author
Published
Topics
, ,
Published

In this blog post, we will explore the ScalingLazyColumn composable. It makes adding scaling and alpha animations in a scrollable container really easy.

If you are interested in exploring other components in Compose for Wear OS you can check out other blogs that I have written.

If you have used LazyColumn in Jetpack Compose, you will find this composable similar to it. In fact, internally ScalingLazyColumn uses LazyColumn. Let’s understand the differences between these two composables and when to use which one while making apps in Wear OS.

Let’s add the required dependencies

def wearVersion = "1.0.0-alpha08"
implementation "androidx.wear.compose:compose-material:$wearVersion"
view raw build.gradle hosted with ❤ by GitHub

Let’s have a look at the method signature of ScalingLazyColumn

@Composable
public fun ScalingLazyColumn(
modifier: Modifier = Modifier,
scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
Arrangement.spacedBy(
space = 4.dp,
alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom
),
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
contentPadding: PaddingValues = PaddingValues(horizontal = 8.dp),
state: ScalingLazyListState = rememberScalingLazyListState(),
content: ScalingLazyListScope.() -> Unit
)

If you have used LazyColumn before, most of these parameters would look familiar to you. reverseLayout will lay the items of the list from bottom to top and reverse the direction of scrolling if given the true value. verticalArrangement lays the items of the list with a top or bottom alignment based on the reverseLayout value and gives a default spacing to all the items of the list. horizontalAlignment as the name suggests lays the the items of the list horizontally. Similar to other composables you can provide modifiercontentPaddingstate and content to it.

scalingParams is the parameter responsible for adding the scaling and alpha animations for the list items that are at the top or bottom edge of the screen. The gif later in the blog will help you to visualise this animation. The method ScalingLazyColumnDefaults.scalingParams() takes a bunch of parameters that have default values. This is how the method signature of the above method looks like

fun scalingParams(
edgeScale: Float = 0.5f,
edgeAlpha: Float = 0.5f,
minElementHeight: Float = 0.2f,
maxElementHeight: Float = 0.8f,
minTransitionArea: Float = 0.2f,
maxTransitionArea: Float = 0.6f,
scaleInterpolator: Easing = CubicBezierEasing(0.25f, 0.00f, 0.75f, 1.00f),
viewportVerticalOffsetResolver: (Constraints) -> Int = { (it.maxHeight / 5f).toInt() }
)

Job Offers

Job Offers


    Android Developer

    Yoti Ltd
    Anywhere
    • Full Time
    apply now

    Android Entwicklerin Echtzeitkommunikation

    sipgate GmbH
    Germany
    • Full Time
    apply now

    Android Engineer (d/f/m)

    Mobimeo GmbH
    Berlin or Hamburg
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

I won’t go into detail about what each of these parameters is, I would suggest to just play around with these values to get the desired scaling and alpha animations for your list. All these float values are between 0f and 1f which represents the percentage of the normal values so if edgeScale has a value of 0.5f, its size will be 50% of its normal size when animated along the edge.

Let’s have a look at this video to see the difference between LazyColumn and ScalingLazyColumn

On the right, you will notice that the ScalingLazyColumn adds a subtle animation on the edges when you scroll the content inside it. While making an app in Wear OS if you want to have such animations then you should use the ScalingLazyColumn otherwise you can use LazyColumn and avoid the cost of calculating the scaling and alpha animations required for the list items.

This is the code required to implement ScalingLazyColumn like the one shown in the video

ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(
top = 10.dp,
start = 10.dp,
end = 10.dp,
bottom = 40.dp
),
horizontalAlignment = Alignment.CenterHorizontally,
state = scalingLazyListState
) {
items(10) { index ->
Chip(
modifier = Modifier
.width(140.dp)
.padding(top = 10.dp),
icon = {
Icon(
painter = painterResource(id = android.R.drawable.btn_star_big_on),
contentDescription = "Star",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
},
label = {
Text(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.onPrimary,
text = "Item ${index + 1}"
)
},
onClick = {}
)
}
}
view raw MainActivity.kt hosted with ❤ by GitHub

The composable used inside ScalingLazyColumn is Chip, it is another composable that is part of the Compose for Wear OS library. You can use it to add a material design chip in your wearable apps.

If you have feedback, feel free to tweet/message me on Twitter.

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
Hi, today I come to you with a quick tip on how to update…
READ MORE
blog
Automation is a key point of Software Testing once it make possible to reproduce…
READ MORE
blog
Drag and Drop reordering in Recyclerview can be achieved with ItemTouchHelper (checkout implementation reference).…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu