https://kotlinlang.org logo
Join Slack
Powered by
How do you generally handle text that is clickable...
# compose
z
How do you generally handle text that is clickable? For example, a 
Card
often has padding which makes the clickable area appropiate; whereas slapping a 
Modifier.clickable
directly on a 
Text
composable always feels wrong (to me at least) because it (a) is too small, and (b) looks odd because of its smallness, even if a boundless ripple is used.
c
I'd usually push back on it. If you're developing a mobile application, having a tiny click area is bad practice and training the user to pretend like your app is a website also feels fundamentally wrong. You often see backgroundless buttons (think Login, Sign up buttons on most apps) where the primary action has a background and the secondary action doesn't, but it still occupies the same amount of space as the primary button.
I'm not a UX designer, but I've got some of the fattest fingers around; I would miss tapping the text and simply think that it's not a button. Then I'll be confused, angry and likely uninstall and 1 star review your app. /s (mostly)
z
Oh yes! I agree actually, I just didnt think to include such details when asking the question 😄 My text is very large, roughly 56.dp in height and at least 56.dp in width - but I dont have any room to add paddings to either sides, so the clickable just wraps the text in an bad looking way.
c
56dp should be perfectly clickable, but still without seeing the UI, it's not easy to give anything other than uninformed opinion. And that opinion is use something that looks more clickable 😄. Perfect excuse for an AB test I guess too.
a
I've never liked the aesthetic of cards, even back in the paper/material era. Anyway, wouldn't TextButton fit your use-case? It's built with accessibility in mind, including proper padding.
z
Im a big card fan ❤️ Probably because it makes design a bit easier, just put anything in a box and it sort of looks better. Anyhoo, the layout in which this clickable text resides already has horizontal padding applied to it (which is outside of my control unfortunately); so anything outside of a Text throws off the lovely grid Ive got going on.
a
What I don't like about cards is that you end up wasting more space than a "flat" layout (which is extremely important in small screens). Content inside a card is padded of course, but then you also have padding outside the card for shadow and what not
It would help if you could post some screenshots of what you have, and what you'd like
z
I agree, but as a non-designer I find it very hard to "nail" the design in a flat layout, whereas with some cards I quickly get a sense of where everything fits and how elements relate (or dont) to one another. Its not exactly this design, but its similar enough: the "00:49" text is clickable when the timer is idle. Its large enough to be clickable, but obviously it would look horrible if the "raw" touch target was the only thing highlighted when you tapped it. (also: card heavy interface for added glory)
c
I'd have no idea that the timer was clickable 😞
➕ 1
if you faded in a pill background around it, maybe I would blob thinking upside down but again, not a UI/UX guy 😞
a
If you don't want to use a background/border, what I like to do is "pulse" the text a bit to signify that it's actionable. It looks nice too (biased), so I guess it works.
z
It has a dim color while idle! Apparently it gets the point across, previously it came with a "tap to start" hint, and after removing it - the % of clicks that came through were identical 😄 Also, the functionality of this is very tertiary, it starts automatically when you workout. Anyhow, for the clickable text - Ive sort of managed to hack it together by providing an additional horizontal padding (
16.dp
) and then offsetting the text by 
-16.dp
. After reading your comment about a pulse effect though, Ill look into that too - very interesting!
🚫 1
a
already has horizontal padding applied to it
You can specify a negative offset to counter that. I'd really recommend TextButton.
Dang it, my message was a bit late
z
think smart
Why TextButton over just a regular Text, given that it will always be large enough?
a
Accessibility. There might be more, but at the very least *Buttons apply 
Modifier.semantics { role = Role.Button }
automatically. This is vital info for screen readers.
z
Ah, of course! Thank you both for your insights 🙂
j
I recently had a problem with clickable text as well. Putting it in a button made the UI look a little less crisp so what I did is I added a vertical dot menu to the card and put the text option in that. Not something that works for all cases but I am quite happy with it.
👍🏽 1
c
Compose will apparently make everything clickable at least 48 x 48 dp. so i stopped worrying once i learned that.
3 Views
Open in Slack
PreviousNext
Powered by