Polished UI experiences in Compose
Many apps present some kind of multi-select habits, the place you possibly can generally drag to pick out an entire vary of parts. For instance, Google Images helps you to simply choose an entire vary of photographs to share, add to an album, or delete. On this weblog publish, we’ll implement related habits with this finish purpose:
The steps we are going to take to get to this finish end result:
- Implement a fundamental grid
- Add the choice state to the grid parts
- Add gesture dealing with so we are able to choose / deselect parts with drag
- Ending touches to make the weather appear like photographs
Simply wanna see the code? Right here’s the full snippet!
We implement this grid as a LazyVerticalGrid, in order that the app works nicely on all display sizes. Bigger screens will present extra columns, smaller screens will present much less columns.
We’re already referring to the weather as photographs, despite the fact that we’re simply exhibiting a easy coloured Floor at this time limit. With simply these couple of traces of code, we have already got a pleasant grid that we are able to scroll by means of:
Nevertheless, a easy grid doesn’t carry us very far on our multi-select journey. We have to monitor the at present chosen gadgets, and whether or not we’re at present in choice mode, and make our parts replicate that state.
First, let’s extract our grid gadgets into their very own composable, that displays their choice state. This composable will:
- Be empty if the consumer is not in choice mode
- Present an empty radio button when the consumer is in choice mode and the factor is not chosen
- Present a checkmark when the consumer is in choice mode and the factor is chosen
This composable is stateless, because it doesn’t maintain any of its personal state. It merely displays the state you cross into it.
To make the gadgets reply to their chosen states, the grid ought to preserve monitor of those states. Additionally, the consumer ought to be capable to change the chosen worth by interacting with the gadgets within the grid. For now, we are going to merely toggle an merchandise’s chosen state when the consumer faucets it:
We monitor the chosen gadgets in a set. When the consumer clicks one of many ImageItem situations, the id of that merchandise is added or faraway from the set.
Whether or not we’re in choice mode is outlined by checking if there are any at present chosen parts. At any time when the set of chosen ids adjustments, this variable will routinely be recalculated.
With this addition, we are able to now add and take away parts from the choice by clicking them:
Now that we’re monitoring state, we are able to implement the right gestures that ought to add and take away parts from the choice. Our necessities are as follows:
- Enter choice mode by long-pressing a component
- Drag after long-press so as to add all or take away all parts between origin and goal factor
- When in choice mode, add or take away parts by clicking them
- Lengthy-press on an already chosen factor doesn’t do something
The second requirement is the trickiest. As we must adapt the set of chosen ids throughout drag, we have to add the gesture dealing with to the grid, not the weather themselves. We have to do our personal hit detection to determine which factor within the grid the pointer is at present pointing at. That is potential with a mix of LazyGridState and the drag change place.
To begin, let’s hoist the LazyGridState out of the lazy grid and cross it on in direction of our customized gesture handler. This enables us to learn grid info and use it elsewhere. Extra particularly, we are able to use it to determine which merchandise within the grid the consumer is at present pointing at.
We are able to make the most of the pointerInput modifier and the detectDragGesturesAfterLongPress methodology to set-up our drag dealing with:
As you possibly can see on this code snippet, we’re monitoring the initialKey and the currentKey internally within the gesture handler. We’ll must set the preliminary key on drag begin, and replace the present key every time the consumer strikes to a special factor with their pointer.
Let’s first implement onDragStart:
Strolling by means of this step-by-step, this methodology:
- Finds the important thing of the merchandise beneath the pointer, if any. This represents the factor that the consumer is long-pressing and can begin the drag gesture from.
- If it finds an merchandise (the consumer is pointing at a component within the grid), it checks if this merchandise remains to be unselected (thereby fulfilling requirement 4).
- Units each the preliminary and the present key to this key worth, and proactively provides it to the record of chosen parts.
We’ve to implement the helper methodology gridItemKeyAtPosition ourselves:
For every seen merchandise within the grid, this methodology checks if the hitPoint falls inside its bounds.
Now we solely must replace the onDrag lambda, that will probably be known as often whereas the consumer strikes their pointer over the display:
A drag is just dealt with when the preliminary secret is set. Based mostly on the preliminary key and the present key, this lambda will replace the set of chosen gadgets. It makes certain that each one parts between the preliminary key and the present key are chosen.
With this setup, we are able to now drag to pick out a number of parts:
Lastly, we have to change the clickable habits of the person parts, so we are able to add/take away them from the choice whereas we’re in choice mode. That is additionally the fitting time to begin interested by the accessibility of this gesture handler. The customized drag gesture we created with the pointerInput modifier doesn’t have accessibility assist, so providers like Talkback is not going to embody that long-press and drag habits. As a substitute, we are able to supply an various choice mechanism for customers of accessibility providers, letting them enter choice mode by long-pressing a component. We do that by setting the onLongClick semantic property.
The semantics modifier permits you to override or add properties and motion handlers utilized by accessibility providers to work together with the display with out counting on contact. More often than not, the Compose system handles this for you routinely, however on this case we have to explicitly add the long-press habits.
As well as, through the use of the toggleable modifier for the merchandise (and solely including it when the consumer is in choice mode) we be sure that Talkback can present info to the consumer in regards to the present chosen state of the merchandise.
As you possibly can see within the display recording above, we at present can’t drag additional than the highest and backside edges of the display. This limits the performance of the choice mechanism. We’d just like the grid to scroll after we method the sides of the display with our pointer. Moreover, we should always scroll sooner the nearer we consumer strikes the pointer to the sting of the display.
The specified finish end result:
First, we are going to change our drag handler to have the ability to set the scroll pace based mostly on the gap from the highest or backside of the container:
As you possibly can see, we replace the scroll pace based mostly on the edge and distance, and ensure to reset the scroll pace when the drag ends or is canceled.
Now altering this scroll pace worth from the gesture handler doesn’t do something but. We have to replace the PhotoGrid composable to begin scrolling the grid when the worth adjustments:
At any time when the worth of the scroll pace variable adjustments, the LaunchedEffect is retriggered and the scrolling will restart.
You may surprise why we didn’t straight change the scroll stage from throughout the onDrag handler. The reason being that the onDrag lambda is solely known as when the consumer truly strikes the pointer! So if the consumer holds their finger very nonetheless on the display, the scrolling would cease. You may need seen this scrolling bug in apps earlier than, the place you could “scrub” the underside of your display to let it scroll.
With this final addition, the habits of our grid is kind of stable. Nevertheless, it doesn’t look very like the instance we began the weblog publish with. Let’s make it possible for the grid gadgets replicate precise photographs:
As you possibly can see, we expanded the record of photographs to have a URL along with the id. Utilizing that URL, we are able to load a picture within the grid merchandise. When switching between choice modes, the padding and nook form of that picture adjustments, and we use an animation to make that change seem easily.
Examine the total code on this GitHub snippet. With lower than 200 traces of code, we created a robust UI that features wealthy interactions.
Made your personal cool interplay utilizing Compose? Let me know on https://androiddev.social/@lojanda
Due to Rebecca Franks, Florina Muntenescu, and Levi Albuquerque for reviewing this publish.
Code snippets license:
Copyright 2023 Google LLC.
SPDX-License-Identifier: Apache-2.0