Develop Reference

Suggestions on approaches on achieving a specific layout on Android

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.

Getting the Dimensions of a Home Screen Widget's Element

I am working on a widget, where I need to have a chart displayed in addition to some text fields. I have figured out how to generate a visualization of the graph and then convert it to a bitmap, which gets placed in the ImageView. The problem is the following:
In a normal Android app, I would get the width and height of the ImageView and pass these as parameters for the bitmap generation. This way, the image will be fitting perfectly within its container. Since I am using a home screen widget, this is not possible, as far as I am aware, though. As a result of this, I am trying to derive the size of the ImageView by trying to figure out what size would the text fields have, but I also have to calculate those and so far have had no luck with getting it right. What I end up with is always having excess space above and beneath the image, or on its sides and the size of this is really varying according to the screen the widget is presented on. You can see some examples in the two links below.
Example A This is the default widget size. For this screen, only a small gap can be seen on the sides of the graph.
Example B Resizing the widget and recalculating the size leads to having bigger gaps on the two sides, though. For other screens the issue can be even more jarring.
My question is:
How could I get/calculate the necessary resolution for my bitmap?

loading an image, is the width/height pixel count maintained

I have read all about supporting different screens and I understand the concept of Density Pixels (DP). However one thing I am not sure about. Lets say I have an image file which is 200 by 200 pixels and I loaded it using xml with wrap_content attributes at the top left of the screen (0,0). Now let's say I want to place a textview programmatically beside it.
If I put the text view at coordinates (250,0). Does that mean that the text view will never overlap the image and will always be to the right no matter what the device density/screen size is.
I understand the distance ( gap) will be different but I am hoping my theory of not overlapping will hold.
I tried it on 2 device and no issues but I am not sure if this is coincendence
Thanks

If you are using px unit it will always remain the same. But if you are using dp unit instead of pixel you cannot definitely be sure.
By the way you should use toRightOf property instead of this approach if you only want this.

How to make proportional layouts in android?

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.

Dialog content not centered horizontally on Droid X

I'm creating a Dialog, setting a content view with two Buttons, and displaying it. Oddly enough, even though I properly centered it vertically and horizontally, on the Droid X extra blank space appears at the top and on the right side.
I discovered the top is reserved for the Dialog title; even when that title is blank, the space is kept empty. The workaround there is easy enough--I set a title.
The right side, however, baffles me. When I test the same app on other devices it works beautifully; the Droid X, however, keeps the right side of the screen empty. When the root layout of my Dialog's layout has a width of match_parent or fill_parent, it does not extend to that empty area. However, if I manually set a fixed large width, it does extend as far as it needs to--no more empty space on the right side. That's hardly an ideal solution though.
Does anyone know how to get around this Droid X layout quirk so Dialogs do not have that empty space on the right side?

After some experimenting, I found that if I change the margin and/or padding sizes, suddenly the Dialog becomes centered! For example: margins of 4dp creates an offset. But making the top, bottom, left, and right margins all larger and different makes the problem go away.
This sort of behavior generally means one of two things: There's a bug in how the layout is drawn, or I have a gross misunderstanding of how these things work. Both seem equally likely.
So my answer is: play with the margin (and padding) numbers. It's possible that you can find something that both works and is aesthetically pleasing.
Sorry, I know this answer sucks. So it goes.