1

I have a UI Design from my designer, and it exists of a background map with several buttons on it, positioned non-linear all over the map. Currently I position them in a RelativeLayout that is as large as the map, and use margin-left and margin-top etc in dip.

This works ok, but I also need to account for users with very small screens, that cause the map to scale down. My relative layout scales with it, but the margin values ofcourse not.

So I am wondering, how should I do this? I would prefer to layout these buttons using percentages like 

left="30%"
top="50%"

Is there anything in Android that makes such a thing possible? Otherwise I have to come up with a custom layout class for that.

Visual Representation: (Ofcourse they don't actually are on 6 lines, and partially overlap in x or y position). It's actually a real (abstract) map of a building with location markers that you can press as buttons.

 -------------------------
 |    x              x   |
 |           x           |
 |                       |
 |      x                |
 |                 x     |
 |           x          x|
 -------------------------
Peterdk
  • 15,625
  • 20
  • 101
  • 140
  • Can you post a screenshot or some visual representation of what you want? (And yes, you may have to resort to a writing a custom ViewGroup class) – Karakuri Jun 10 '13 at 17:23
  • @Karakuri I did add a ascii art example. – Peterdk Jun 10 '13 at 18:59
  • what did you end up with using for this? I need to implement something similar. any hint would be helpful. thanks – WriteEatSleepRepeat Nov 12 '13 at 21:55
  • Since we used a fixed image as map, I just used relative positioning with margin-xxx set to correct DP values inside a fixed size (matching image) relative-layout. – Peterdk Nov 12 '13 at 22:27
  • Now it's possible with percentage Guideline, take a look at my answer https://stackoverflow.com/questions/16200716/android-layout-margins-with-percentage/47134315#47134315 – Eugene Brusov Nov 07 '17 at 06:36

2 Answers2

1

Here is a complicated way that does not require a custom ViewGroup. Suppose you want a button at left 30%, top 40%

FrameLayout 
   View with background, match parent
   LinearLayout orientation=horizontal, match parent 
     View layout_width=0dp, layout_weight=30, height=match_parent
     LinearLayout orientation=vertical, width=0dp, weight=70, hieght=match
       View layout_height=0dp, layout_weight=40, width=match_parent
       FrameLayout layout_height=0dp, layout_weight=60
         Button
yoah
  • 7,180
  • 2
  • 30
  • 30
0

I use Dimension resource files put in the relevant layout- buckets so I can change margins/paddings/sizes depending on device size.

(http://developer.android.com/guide/topics/resources/more-resources.html#Dimension)

(Storing dimensions in xml file in Android)

Community
  • 1
  • 1
Ken Wolf
  • 23,133
  • 6
  • 63
  • 84
  • Hmm, that won't do it I am afraid. I know the technique, but I really have to have something more dynamique. – Peterdk Jun 10 '13 at 17:20
  • @Peterdk There's no XML support for percentages AFAIK. You could do it in code. Does that do it? – Ken Wolf Jun 10 '13 at 17:20
  • Alternatively you could use LinearLayouts exclusively and layout_weights but I feel this will be restrictive to your designs. See here (http://stackoverflow.com/a/4961467/833647) – Ken Wolf Jun 10 '13 at 17:24
  • Well, wat I think I'll do then is to build a custom layout class that recalculates the margin's for each object based on a detected scale or so. - Yes layout_weights would also be an option, however they all differ in `x` and `y` position, so I don't think you can pull that off with `LinearLayout`'s – Peterdk Jun 10 '13 at 17:40