Android Question Best way to "mix" views and lines/circles, etc.

KMatle

Expert
Licensed User
In some apps you see lines which "connect" e.g. labels, in a chat app there's a small triangle/pointer which is hooked to the bubble with the text. Others use other geometric forms so there's a mix of views and e.g. lines or so.

What is the best way to achieve such UIs?
 

klaus

Expert
Licensed User
If you speak only of Labels, meaning only display text without editing, I would do everything with graphics.
DrawLine, DrawText, DrawPath, DrawCircle etc.
 

KMatle

Expert
Licensed User
Here some examples. Of course I could get some bitmaps for the bubbles and place a label inside it or I can draw everything but I'm interested in the best practice.

2.JPG
1.png

I would do everything with graphics.
DrawLine, DrawText, DrawPath, DrawCircle etc.
As you see it's a mix (at least I assume that or it's really just a bitmap with a label in it) between grafics and (maybe) labels or just graphics. Take a look at the bubble. I've marked that "arrow" (don't know the word for it). A label with round coners is easy, but how is this done? A label for the text and some drawing arround it to create the bubble?

But how do we do it when it comes to views which need to be dragged for example? Or do you just draw/refresh everything then? Are the arrows just drawn and everything is refreshed when something changes?

Example:
3.png
 

klaus

Expert
Licensed User
It may depend on what kind of 'views' or diagrams you want to create.
The first example could be made with Ninepatch background.
I would make the Events Timeline with graphics.
The Flowchart would be a project on its own, with classes for different objects with connection points, connection lines etc. similar to a drawing program, but still with graphics.
But, that's just my opinion.
 

MarkusR

Well-Known Member
Licensed User
i think each element in flowchart is a object(class/customcontrol) within a rectangle area and it paint itself if needed. like a usercontrol in vb6.
each need a position,size,typ,sort order
a state visible,enabled,focus,selected
& ability to move & text change via input
if you think about painting only i would put all (objects) into a list so
you can use for each to draw all into a panel or testing click inside.

i made an example of drawing a speak bubble into a panel.
Screenshot_2018-04-22-23-14-47.png
 

Attachments

Last edited:
Top