0

I'm new to Android development but I've been doing graphic design and ui for years. I've created a mockup in FluidUI and I'm trying to figure out how to lay it out.

I've started by using RelativeLayout with some nested LinearLayouts inside but I'm not sure what's the best for this design I mocked up.

Here's a look at the design.

Android App Mockup

The top is the users name once they login with a dropdown.

The next section is a group of buttons that simply launch other activities.

Under that is a list. I'm not sure if I should use a Listview or just lay it out because all the items are static. The only thing that changes are the numbers. Each item in that list needs to go to another activity.

Then on the bottom is a bar that should display on all activities.

I'm using Mono for Android and Visual Studio 2010 if that matters at all. I've tried some nesting but I haven't gotten very far. Can I do this all with one relative layout? Should I use multiple linear layouts?

Thanks for any help. :-)

Michael Celey
  • 12,645
  • 6
  • 57
  • 62
Bob
  • 55
  • 6

1 Answers1

0

using RelativeLayout with some nested LinearLayouts inside

definitely works fine. It does have some performance impact when comes down to computing layout width, weight etc, but this won't be taken into consideration unless noticeable slowness. Take a look at some Android Layout Tricks though: #1, #2 and #3. You can use a RelativeLayout as the root ViewGroup, then align each component accordingly.

use a Listview or just lay it out

In your case, laying it out might be better because it has only five rows. You won't sacrifice too much reusing code for simplicity.

The layout could be something similar to this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Top -->
<TextView
        android:id="@+id/name"
        android:layout_alignParentTop="true"/>
<Spinner
        android:id="@+id/dropdown"
        android:layout_toRightOf="@+id/name"/>
<!-- Four buttons -->
<Button
        android:id="@+id/button1" 
        android:layout_below="@+id/name"/>
<Button
        android:id="@+id/button2"
        android:layout_alignBaseline="@+id/button1"
        android:layout_toRightOf="@+id/button1"/>
<Button
        android:id="@+id/button3" 
        android:layout_below="@+id/button1"/>
<Button
        android:id="@+id/button4" 
        android:layout_toRightOf="@+id/button3"
        android:layout_alignBaseline="@+id/button3"/>
<!-- The "List" -->
<TextView
        android:id="@+id/activity" 
        android:layout_below="@+id/button3"/>
<TextView
        android:id="@+id/counter" 
        android:layout_alignBaseline="@+id/activity"
        android:layout_alignParentRight="true"/>
</RelativeLayout>
Aaron He
  • 5,509
  • 3
  • 34
  • 44
  • Thanks! Working with your layout plan and trying to get everything to look right. I have the four buttons in position but there seems to be a fixed amount of 'padding' between them. Is there some way to change this? Also, how would I make those lines between 'list' items? 1px ImageView stretched to fill width (with padding)? – Bob Feb 14 '13 at 21:14
  • By defualt some margins are kept between buttons. If you put some color or drawables in `android:background`, margins will disappear. The divider lines could be done like this: http://stackoverflow.com/questions/5049852/android-drawing-separator-divider-line-in-layout – Aaron He Feb 14 '13 at 22:11
  • I have the following in RelativeLayout android:background="@color/dashbackground" I still have the same borders. – Bob Feb 15 '13 at 15:27
  • Ok.. I added the background to the button and it removes the margins. – Bob Feb 15 '13 at 17:06
  • Thanks for the help getting going! Been working through it and ended up using Eclipse to get it looking the way I want. Here's a screenshot: [link]https://s3.amazonaws.com/SwiftreachTesting/v4Eclipse.fw.png – Bob Feb 18 '13 at 19:16