Android Question Convert pixel to dip in designer

Alex_197

Well-Known Member
Licensed User
Longtime User
Our designer has created a layout for new screen. This file is in JPG. My question is - how to convert pixel to dip in designer? Let's say a button has 657 x 112 pixels. How to convert pixels to dip in designer?
 

klaus

Expert
Licensed User
Longtime User
Sorry, but I do not understand your problem.
Our designer has created a layout for new screen.
What kind of layout ?
A new variant or what else ?
This file is in JPG.
What is a JPG file ?
My question is - how to convert pixel to dip in designer?
In the Designer, all values for position and dimension are dip values.
Let's say a button has 657 x 112 pixels
Where are these dimensions defined ?
How to convert pixels to dip in designer?
What kind of pixels ?
Where do these pixels come from ?

Do you have a concrete example on what you are trying to implement ?
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
Sorry, but I do not understand your problem.

What kind of layout ?
A new variant or what else ?

What is a JPG file ?

In the Designer, all values for position and dimension are dip values.

Where are these dimensions defined ?

What kind of pixels ?
Where do these pixels come from ?

Do you have a concrete example on what you are trying to implement ?
For example - this layout. I opened this file in Photoshop and checked a red button width x height
 

Attachments

  • 4.png
    4.png
    175.2 KB · Views: 173
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
Now it is even more confusing !?
What is the relationship between Photoshop and the Designer ?
You need to be more precise on what you want to do !
In designer I need to specify button size in dips. I need this button to look exactly as on this jpeg (width and height). How can I do it.
 
Upvote 0

William Lancee

Well-Known Member
Licensed User
Longtime User
You have an image of what your designer wants (a .jpg file). Now you would like to make a B4X designer layout that matches the image.

It is not a simple process to convert an image to a series of views. You would need to detect shapes in the image through edge detection.
It is not just converting image pixels to view dimensions.

But... @klaus has a cropping library, where you could select each view (one at a time and save it as an image).
These images could then be used to identify the dimensions of each view. Some transformation from number of image pixels to B4X view would have to be done.
This you could do by finding the scale factor by trial and error probably. The same scale factor would work for all views.

Still a lot of work, depending on how many views there are (of course views with the same dimension would only need to be once.)
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
You have an image of what your designer wants (a .jpg file). Now you would like to make a B4X designer layout that matches the image.

It is not a simple process to convert an image to a series of views. You would need to detect shapes in the image through edge detection.
It is not just converting image pixels to view dimensions.

But... @klaus has a cropping library, where you could select each view (one at a time and save it as an image).
These images could then be used to identify the dimensions of each view. Some transformation from number of image pixels to B4X view would have to be done.
This you could do by finding the scale factor by trial and error probably. The same scale factor would work for all views.

Still a lot of work, depending on how many views there are (of course views with the same dimension would only need to be once.)
Thank you for your help. Can you tell me more about this cropping library?
 
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
In designer I need to specify button size in dips. I need this button to look exactly as on this jpeg (width and height). How can I do it.
What is your end goal? To have the image supplied as a background and overlay controls on top of it -- or -- make a new layout in B4A that mimics the image?
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
What is your end goal? To have the image supplied as a background an overlay controls on top of it -- or -- make a new layout in B4A that mimics the image?
I need to create a new layout based on this image. We need to redesign our app (41 screens in total).
 
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
I need to create a new layout based on this image. We need to redesign our app (41 screens in total).
The easiest method would be to use percentages. Measure your entire area in the JPG and then figure out what percent of that each UI element occupies, and what percentage of that total they are from the edges (margin) and between each element (spacing).

You can then use that to position them either via the designer, or if you require 100% accuracy use the designer script to work with actual %X/%y values.

Attempting to translate pixels to dips as you are doing is generally a blind alley since Android devices have different screen DPI resolutions as well as dimensions whereas PC's are almost universally 72 dots-per-inch.
 
Upvote 0

William Lancee

Well-Known Member
Licensed User
Longtime User
That is a massive task. Could you post an example of a screen image? Did the designer (the person) use software to design his creation?
Perhaps that software can make list of objects with positions and dimensions.
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
The easiest method would be to use percentages. Measure your entire area in the JPG and then figure out what percent of that each UI element occupies, and what percentage of that total they are from the edges (margin) and between each element (spacing).

You can then use that to position them either via the designer, or if you require 100% accuracy use the designer script to work with actual %X/%y values.

Attempting to translate pixels to dips as you are doing is generally a blind alley since Android devices have different screen DPI resolutions as well as dimensions whereas PC's are almost universally 72 dots-per-inch.
Yes, I know. Percentages are more flexible. It's not just a button size but spaces between elements.
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
That is a massive task. Could you post an example of a screen image? Did the designer (the person) use software to design his creation?
Perhaps that software can make list of objects with positions and dimensions.
So far I have 4 screens
 

Attachments

  • 1.png
    1.png
    143.3 KB · Views: 168
  • 3.png
    3.png
    115.9 KB · Views: 142
  • 4.png
    4.png
    175.2 KB · Views: 144
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
Yes, I know. Percentages are more flexible. It's not just a button size but spaces between elements.
All of which may be expressed as a percentage of the whole. You know the size of the JPG you've been given and can measure the elements on it and the spacing. You will be specifying the size of the Android layout, so you know the total area you'll be using, that seems reasonably simple to me to achieve.

To illustrate my point, see attachment.
 

Attachments

  • example.png
    example.png
    66.8 KB · Views: 122
Last edited:
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
I would try an alternative suggestion.

Create a new layout variant in designer which has the same dimensions as the image.
You can then create the views in the same sizes and locations as shown in the jpg image.

Remember to remove the original variant.

I presume that the designer has provided you with dimensions for every control as well as fonts and font sizes.
They also need to indicate how the components will operate on different screen sizes (scale, scroll, clip for example)


Generally I ask the designer to provide me with a design made in Figma or maybe XD which I can then extract the individual components to recreate in a layout.
 
Upvote 0
Top