-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
Android Question Convert pixel to dip in designer
- Thread starter Alex_197
- Start date
- Similar Threads Similar Threads
Sorry, but I do not understand your problem.
A new variant or what else ?
Where do these pixels come from ?
Do you have a concrete example on what you are trying to implement ?
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 ?
Upvote
0
For example - this layout. I opened this file in Photoshop and checked a red button width x height
Attachments
Upvote
0
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
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.)
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
Thank you for your help. Can you tell me more about this cropping library?
Upvote
0
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
Upvote
0
I need to create a new layout based on this image. We need to redesign our app (41 screens in total).
Upvote
0
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
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.
Perhaps that software can make list of objects with positions and dimensions.
Upvote
0
Yes, I know. Percentages are more flexible. It's not just a button size but spaces between elements.
Upvote
0
So far I have 4 screens
Attachments
Upvote
0
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
Last edited:
Upvote
0
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.
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
Similar Threads
- Question
Android Question
Convert x,y value On Panel_Touch to Centimeter (CM)
