Suggestions on approaches on achieving a specific layout on Android

Issue

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:

1. Achieve the entire layout just by using image drawable and positioning the text boxes at exact places
2. 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.

Solution

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.

Answered By - Cheticamp