I'm stuck and I think wisdom (aka experience) is the only solution.
I need to be able to have boxes on a screen with data inside each box. The number of boxes on the screen needs to be able to change and the boxes need to scale accordingly (as well as the text data inside of them) to allow for the additional boxes.
Example: I might start with only 8 boxes which are evenly spaced and displaying data at a reasonable font scale.
As I add more boxes I need the rest of the boxes to scale down and allow everything on one screen.
I am currently attempting to use a TableLayout, but I'm not certain how to make everything scale correctly. Also, I'm generating everything programmatically by extending the TableLayout. Can someone point me in the right direction. Is there a better layout method that I'm not seeing? I'm sure I'm not the first person to need this, so are there examples available that I'm just not finding by searching?
The eventual solution was to build my own scaling function which took screen pixel dimensions and calculated the appropriate margin offsets to use on a relative layout. It requires a complete redraw each time the scaling factor changes, which is annoyingly resource intensive.
Related
I am trying to replicate the below layout (Boxes with Text and a line going outwards on a dedicated section) on Android
As evident, these boxes can be implemented as individual views (or drawable) to have the shape as
.
It is apparent that these boxes need to have some flexibility for the "wires" going out of them, most importantly deciding the "turning" point of the line. I have thought of a few approaches to achieve this:
Achieve the entire layout just by using image drawable and positioning the text boxes at exact places
Implement this with a dedicated view to have full flexibility of positioning the text boxes at any position and be compatible with all screen sizes.
I am inclined towards trying #2, but can't get my head around where to start. At first, I am not able to decide on whether I should be using a ViewGroup as the base class and add a TextView and a plain view as a child or should I be using a single View to implement this? The second thing I am concerned about, is whether I am overthinking it and there is an easy way to achieve the same thing (Just to save time, nothing else)?
Any help/guiding material is deeply appreciated. Thanks in advance.
I think that approach #2 will be better longer term. Because of the nature of the image, you will have to maintain the aspect ratio; otherwise, the person is stretched. Because you are maintaining the aspect ratio (at least the person-part), the placement of each text box and end point can be expressed as a percentage distance from an edge or the center lines.
Assuming the image you show is the entire image, the belly end point can be set at, say, 45% of of distance from the left edge and, also let's say, 42% of the distance from the top. The text boxes can be placed likewise. Once the text boxes and end point are place, the lines simply connect them. Now the image can stretch to any size to support multiple screen sizes and, as long as the aspect ratio is respected, and look good.
Take a look at ConstraintLayout and its percentage guidelines and barriers. There is also some radial placement which may help. You may still have to support the layout with a little code, but ConstraintLayout should be able to get you 95% of the way to a solution.
Edit: I meant to mention biases as well which may be the most helpful to you. Here is an example of using biases for a checkerboard solution that may be useful.
I still have trouble understanding the possibilities of Scaling my UI in a responsive way in my Air Mobile App. On the web I'm familiar with it and the use of media-queries.
I dont want to scale my whole UI up and down or even stretch it (e.g: I use the camera in one DisplayObjectContainer, so this would be really bad for the performance to scale this.)
I currently go down the road defining all the container sizes by percent, but that is getting pretty ugly pretty fast as it leaves me with 68.95px values. I think this will get me in trouble one day as blocks appear not crisp anymore. If I round the values, I might have 1px gaps between Elements.
Currently I have this Setup. The idea is, to give every main Component a (maybe invisible) empty background-child. These can then deformed by width & height by any desire. The inner Elements of any Element (button, logo, etc) are not affected by the deformation of the bg and can then be arranged accordingly (as I now have position and size of this container - like in css).
But this does not feel like it is the right way.
Is there a magic lib/class I dont use currently and that allowes me to build in hard pixel for a defined setup and behaves appropriate when it comes to different stageWidths, DPI, etc?
What are your approaches for this problem?
I have a design that I need to follow in my app. In it there are several buttons, images and textviews placed all over the screen (some are aligned to the left, some to the right, some are centered etc). What I need to do is make all those elements appear EXACTLY as they are in the design image. The problem is, if I try to do this using dp, it can be wider or narrower than the design image specifies, and it depends on the properties of the screen. (I've had an app where I did it all in dp, and on my high-res phone it works perfectly, but on my friend's older phone it cuts away the edges of the activity)
My question is, what elements do I use for this? I've heard of using weight in Linear Layouts, but how to make items different width and height and position them all across the screen how I see fit? How to make sure it looks exactly the same on all screen sizes?
Thanks in advance! :)
Edit:
The point is, I need the buttons to be just as they are on the screen (this will be a listview element, I'm trying to make an xml for it). The distance, proportion, everything, it needs to scale to the width of the screen and be this size and distribution. And, I'm not just looking for a solution to THIS particular problem, I want to learn how to do it in general...
You don't. For very large and very small screens, you use separate layouts that scale the sizes, completely drop parts of the UI, or lays it out in a different manner. It's absolutely silly to think you can fit all the stuff on a 10 inch tablet and a 3.5 inch phone. If your designer expects that, tell him he's an idiot and he needs to get back to work.
For a more general answer on the best way of laying things out- it depends on the effect you're trying to get. You should never use pixel counts, and dp should only be used for small things- a bit of padding between 2 fields. Most things should be done via layout, either by using a linear layout and getting things in rows/columns, or a RelativeLayout and describing how to layout views relative to their siblings. But even with these tools you will not be able to fit on all screens and look good.
I was working with Android UI in Eclipse and found it to be bit hectic. Designing layout using layout managers is bit time consuming. So i was wondering whether it is possible to specify the position of the UI elements based on (x,y) system i.e top and left property which is widely used in Visual Studio IDE for VB,C# etc ?
Positioning element based on top and left property would provide much flexibility.
How would that be flexible? Yes, doing layout correctly takes time, but if you do it right, it will scale properly to any screen size. If you're using X/Y coordinates, you will be hardcoding to a specific screen size, which is an especially bad idea on Android (as there are a multitude of screen sizes available).
If you need x, y positioning, you can use a FrameLayout with foregroundGravity set to top|left, and use layout_marginLeft for the x value, and layout_marginTop for the y value.
You can use AbsoluteLayout and suppress deprecation warnings in your code, but think of how will it look on different screen sizes?
I would advise to use RelativeLayout in your case.
As far as I know, there is no built-in layout that is based on (x, y) coordinates. You might be able to find 3rd party libraries that can do this for you. However, I'm skeptical that they will provide satisfactory results. Remember that Android is deployed on a wide variety of devices which include a range of different screen sizes and resolutions. This means that you can make the UI look pretty on one device using specific coordinates but it won't look very good on other devices.
Personally, I edit my UI layouts directly in the XML files. I find that this provides me better control than using the Eclipse UI editor. You still have to learn how the layout managers themselves work.
Android tries to ensure that your layout components are arranged nicely so that they:
don't overlap with each other
don't go off the screen space
look similar on different screen sizes
etc
It gives you nice XML Attributes to help you arrange your layout. I would recommend you use RelativeLayout for this application, because it allows you to put your layout components in positions RELATIVE to each other.
Some XML attributes you can specify are given here: Android Reference, RelativeLayout.LayoutParams
I am attempting to make an 8x8 matrix of coloured squares on a black background in a layout that is limited to portrait only. I need the squares to all be equal in size, and the overall matrix to be 60% of the screen's width and of equal height. I also need to control the colour of each square dynamically as a result of my code, call it a pattern setting code if you will. Here is an example of what I need the final product to look like:
Screen example
I have been researching different ways of doing this and was hoping for some advice on the best approach. Here are some ideas I had:
1) Use GridLayout (not GridView) and set the background of each cell to the required colour. This shouldn't be difficult to control with java, but how do I enforce the correct dimensions? Would I need to fill each grid cell with something of a certain size, or can I use layout_weight attributes to control the dimensions?
2) Use a combination of RelativeLayout and LinearLayout with ImageView and display locally saved images of coloured squares. Can I use layout_weight to control the size of these images, and if these images were too small would they be stretched to fill their required dimensions? (I'm thinking of larger tablet screens.)
What I really need from someone is some sample code to implement a very simple version of what I need (for example one square in the centre of the screen that I can colour-control dynamically). Obviously I can then expand it to my specific requirements. If more details or code are required I will happily post them.
Perhaps you could just create a custom View object, and render the appropriate bitmap in the onDraw method? Seems like overkill to use layout objects, unless you're planning to do more than just render squares of colour?
Edit: Alternatively, I once used the info in the following posting to programmatically build a layout grid. It's not exactly what you need (it generates as many horizontal 'cells' as are necessary), but should make for insightful reading on manipulating layout dimensions:
Line-breaking widget layout for Android