MANUEL PERERA: Hello, everyone.
I am Manuel Perera, lead Android developer at Bumble.
In previous "MAD Skills" episodes,
we have seen that Jetpack Compose introduces a lot
of powerful and easy to use out-of-the-box layouts.
In today's episode, I will show you
a tip on how to take one of those layouts
to implement a fun and complex-looking real life
example, and the benefits of doing it with Compose.
[MUSIC PLAYING]
Sometimes we have the cool challenge
of building a beautiful UI with a unique approach,
but this is not always easy to do, especially
when working with Views.
One example like that is the Hives
screen in the Bumble app, which has the following most
important features--
an infinite list of items, different item types,
overlap of items vertically and horizontally,
and the unique hexagon shape for each list item.
We first implemented this screen with Views.
So to solve the problem of the infinite list
and different item types, it was clear we needed a RecyclerView
and ViewHolders.
For achieving the overlap of items,
we tried a few layout managers, but unfortunately,
this requirement caused problems with items
not being recycled correctly.
To solve the overlap and recycling,
we had to implement the Custom Layout Manager.
This was quite a complex and tedious implementations,
since we had to understand exactly how Layout Manager's
recycling policy work to avoid bugs.
Finally, for achieving the hexagon,
we had to create a custom view and apply a custom canvas.
However, this solution doesn't allow us to reuse the shape,
since it uses this custom view as a Frame Layout, which
can limit future extensibility.
In total, we had to create a lot of different classes and files
and a huge amount of code, which was difficult to understand
and maintain.
However, once we started adopting Compose,
we rewrote this screen and find out
how easy it is to achieve the same result using
Jetpack Compose.
So let me show you how we did this.
First, we create our Hexagon composable.
The first modifiers set the width to 55% of our screen size
and a fixed height of 200 DP.
Then the clip modifiers clips the content
to a provided shape.
Here, it clips it to a custom hexagon shape
that we have built. And lastly, the background modifiers
sets our primary yellow color.
Now we can [INAUDIBLE] our composable to a lazy column.
By using this simple Compose layout,
we already have a list of items that will
be recycled when scrolling.
How cool is that?
Next, we want to make our items overlap.
Lazy layouts can receive vertical and horizontal
arrangements which can be used to adjust
the spacing between items.
The spacing can also be negative.
So let's see what happens when we apply that to our layout.
That's exactly what we wanted.
In just a few lines of code, the lazy column
is already properly overlapping items and correctly handling
the recycle logic.
And check how easy it is to add another item
type to our lazy column.
With just one line of code, we can separate
two sections in our list.
By migrating to Compose, we decreased the complexity
of our UI and no longer need custom views and custom layout
managers.
We also decreased the lines of code
by 50% less than with Views, which
improved the readability and maintainability of our feature.
So if you have an existing complex UI written in Views,
consider using Compose as we did at Bumble,
as you might find that it's much easier and fun to implement.
I hope that this tip was useful.
I shared with you a glimpse of how powerful and easy
to use Compose Layouts are.
And of course, make sure you subscribe to the channel
to get more updates.
[MUSIC PLAYING]