tags:

views:

95

answers:

2

I'm finding the need to lay out a fairly complex UI manually, by giving the dimensions and position of most all of the sub views. My plan is to code the XML initially for a 480x320 display, get it all working right to demo for the client on a given device, then modify it for production by programmatically adjusting the size and position of the views to adapt it to whatever screen size it's running on.

First...I know this is not the recommended approach. I have spent forever trying to get the automated layouts to work right (along with animations). Honestly I don't think they were made for the way the client wants this, and I just don't have any more time to mess around with it. (nor to learn to make a flexible custom layout)

Given that, where should I do the measuring/positioning? I can do onMeasure() to set the sizes (ignoring the incoming parameters and basing them instead on my knowledge of the screen resolution which is measure when the Activity starts), but where do I set the position of each the view? In onLayout()? Assume all views will be subclasses anyway (as opposed to using components out of the box)

Ideally, I'd like to have one place where I measure the screen res, then grab each view and set its x, y, width and height. Is that possible? If so how?

Edit: now offering a bounty. Note that I also did a sketch of one simple problem I'm trying to solve -- http://karmalita.com/stuff/layout.png -- which if you can do it the "correct" way (say, using a relative layout), the bounty is yours.

A: 

As Falmarri pointed out, don't create it just for 480x320 but make it sizable from the start.
Can you give some details about the UI? A sketch maybe? Using a combination of layouts it should be possible, even if it's complex.

BlackDragonBE
I assume it's possible, if I screw around with it long enough. I just don't have that time, and I know how to just explicitly place everything where it needs to be. I'd love to spend another couple weeks trying to learn the ins and outs of layout, but I can't afford it right now. I might post a sketch.
rob
Ok, here is a sketch -- http://karmalita.com/stuff/layout.png -- although there are some additional complexities (which includes an animation). However, just getting what is shown in the sketch would be a great start. ...it seems like it should be trivially easy but I've had no luck. The important thing is that the blue box needs to fill all vertical space minus that filled by the bars top and bottom.
rob
I quickly made a xml layout you can use. Just delete the buttons put whatever you want in the views. http://www13.zippyshare.com/v/73910797/file.html
BlackDragonBE
Looking forward to that bounty by the way :)
BlackDragonBE
Thanks, I see you did it using margins. No such luck on the bounty though, I had already giving it to hackbod before you answered.....sorry!
rob
+1  A: 

From your diagram, the basic structure could be something like the following. Not generally you wouldn't specify absolute values like "50dp" for layout widths and heights, instead relying on the views to report their desired size. For example, if your top bar is a 9-patch border with text inside, you could just make this a TextView where you specify the text and set the 9-patch with android:background="@drawable/...", and let the text view compute its appropriate width and height based on the text size and padding of the 9-patch. (And than use match_parent to ignore that size and allow it to stretch to fill its parent, or wrap_content to use its desired size.)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  <View
      android:layout_width="match_parent"
      android:layout_height="50dp" />
  <View
      android:layout_width="match_parent"
      android:layout_height="0px"
      android:layout_weight="1" />
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <View
          android:layout_width="??dp"
          android:layout_height="55dp" />
      ...
  </LinearLayout>
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <View
          android:layout_width="??dp"
          android:layout_height="60dp" />
      ...
  </LinearLayout>
</LinearLayout>
hackbod
Ahh ok, I guess the combination of 0px and weight=1 is what made that view fill the available space. Interesting. Thanks and please don't spend all your points in one place. :) FWIW, given all the animation and such that I need to do to (the client wants it to look every bit as slick as the iphone app that was done by someone else), I probably will need to go with manual positioning anyway. (using getLayoutParams(), then setting some combination of width, height, x and y, on the children views from the activity's constructor)
rob