Overlay text without Gradient

Would be great to be able to choose if I want the dark gradient behind the overlay text in Title and Tiles, sometimes the contrast is already great, especially if we are using a gradient or color fill.

Thanks!

3 Likes

Good point.

Hello Gliders and @ionamol,

I hope I am not going to make too much a fool out of myself.

I would like to create the following image (created on Canva) as the home of one of the tabs (the starting screen of the app for instance):

Requirements / wishes:

  1. These items are to be clickable: by tapping on them, the user is led to the item’s screen (i.e. these are not headlines)
  2. Edit The item names (“Item name 1”, “Item name 2”, etc.) will change based on user input. This list is a list of items.
  3. Ideally, I could change the background behind the item name: image, color.

My thoughts:

  • The list and compact layouts do not work: they do not offer that kind of styling options (bigger text, centered)
  • Calendar, map and checklist layouts seem far-fetched.
  • Display layout: the action text component does not offer the desired styling options.
  • Cards layout: I cannot get it to work.
  • Tile layout: I thought this would be the most promising as this layout is the most versatile. However when I set the text to sit on top of the picture (which might be a 1x1 color pixel to get a colored background), a grey overlay automatically appears between the image and the text. This overlay distorts any color that maybe be in the image, colored pixel or why not transparent pixel.

I am therefore wondering if I can achieve the image above. If you have any simple ideas, please do not hesitate to share and I will try to implement them.

Could you just create each of those item-headers as images and do “link to screen“?

@Robert_Petitto I don’t understand the grammar of your sentence and don’t know Glide well enough to make out what you meant.

The item names (“Item name 1”, “Item name 2”, etc.) will change based on user input. In fact, I probably wasn’t clear enough, but this list is a list of items.

Didn’t realize this list was dynamic based on user input. No great way to do that then. Tiles is your best bet, maybe use Cloudinary to create the images for the tile (user input of text = parameter over background image of your choosing)?

+1 for cloudinary, that’s the best bet to create a dynamic image. @nathanaelb and anyone who’s interested can read (and watch!) about it here.

1 Like

The one where I talk about text overlays is here:

2 Likes

No problem, I wasn’t clear. I don’t think it matters who inputs the data, but I do think it matters that the items are part of a dynamic list :slight_smile:

I was afraid someone would mention Cloudinary.

+1 to the feature request “Overlay text without gradient” :pray:t2: