How to find the right value?

I was wondering how I can make the two labels (favorite and -2%), like the picture below, on all kinds of cell phone sizes!

When I try to watch it on a cell phone smaller than mine, it looks like this.

My Blocks

I wonder if I’m getting something wrong, or if there is a better way to do this.

Note: I’ve tried the FloatingView and RelativeView extensions, but both don’t work.

Why that number is in red mark? Try to solve it , it may work the remaining blocks

You have to use DynamicComponents extension and ComponentTools extension (it’s better than component built-in kodular).

  1. Move your labels (DynamicComponents - MoveBlock) to your cardview.
  2. After the movement, your labels should appear at the top of your cardview.
  3. Set your labels Y postition (ComponentTools - SetY block) to any % of your CardView height. To do it getHeight of your CardView and multiply it by the % you want the height of your labels.

It will work correctly on any width, height and resolution of different screens.

It is only like this in red, because I put it like this so that I can take a printout of the two components.

This helped me a lot, but now I can no longer get the “clickable” favorite button.

And I was taking a look, the heart stayed perfect when I used the “MoveBlock”, they stayed on the top left. I saw that I had SetX which are for the horizontals, now I have to figure out a value that catches on all mobiles.

You don’t need to find any value :joy:. Just get the width of your image. GetX (ComponentTools block) is the X position of the left side of your image. GetRightPosition is the X position of the right side of your image.

So you just need to set X of your label according to the right position of your image minus value you would like to be in % of the width of the image. (Image width is GetRightPosition - GetY).

If you will operate on width and percentage of width, everything will be placed the same as in your actual screen.

Probably you set your CardView to FullClickable. As moved label is the child object of CardView you won’t be able to click it as it is set FullClickable to true.

I tried and failed, could you do it for me please?

CreateDesign.aia (88,3,KB)

CreateDesign(modified).aia (109.6 KB)

Changes:

  1. Added async image loader (image utility component). Your app doesn’t freeze at startup.

  1. Deleted “Picture”: “{image}” property from schema. It caused lag at startup.
  2. Changed position of label (discount) in Schema .json file. It’s a first component created in cardview.
  3. Added property “Clickable”: true to Label (discount).
  4. Added AsyncProc extension. To manipulate position of your objects you have to make a little delay after creation of them. AsyncProc extension makes possible to wait before procedure starts on different thread (doesn’t freeze your app).

async_blocks

  1. Added logic to set Label (discount) at position you want (it will work for any length of the text of your label, besides the one exceding the width of the image). There’s a multiplier at the end of blocks you can use to position object as you want.

3 Likes

Thanks a lot, friend. It was exactly what I wanted.

One question, why did you have to make this change?

1 Like

If you want to overlay components (image under the label), it’s safe to have the label created at first (it’s higher in “hierarchy”), before the image, so if you move label on image it’s visible (component tools movemets).

In that case, dynamic components make the overlay works correctly (by moving component to cardview), so accept it as an useless change :smiley:.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.