LinearLayout with left, center and right widgets.

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

LinearLayout with left, center and right widgets.

Postby Jardi » Tue Jan 12, 2010 11:02 pm

Hello,

I'm about to ask a question very straightforward, but I just don't get it.

I want to make a LinearLayout that look almost like this :

[[Button] <space> [Text] <space> [Button]]

The two button are on the far left and far right of the layout, the textView is centered. I don't want any of these widgets to be resized to fill the space, I want gaps. But I still don"t want to mess with padding and absolute layout, because I want my layout to adapt to each screen size and orientation.

I messed two evenings with gravitys, weights and stuffs like that, moving from frustration to anger and so far, I only got this :

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <LinearLayout android:id="@+id/LayoutLigne"
  2.  
  3.                 android:layout_height="wrap_content"
  4.  
  5.                 android:orientation="horizontal"
  6.  
  7.                 android:layout_width="fill_parent">
  8.  
  9.                 <ImageButton android:id="@+id/LignePrec"
  10.  
  11.                         android:layout_width="wrap_content"
  12.  
  13.                         android:layout_height="wrap_content"
  14.  
  15.                         android:layout_gravity="left|center_vertical">
  16.  
  17.                 </ImageButton>
  18.  
  19.                 <TextView android:text="Foo"
  20.  
  21.                         android:id="@+id/arretNom"
  22.  
  23.                         android:layout_height="wrap_content"
  24.  
  25.                         android:layout_width="wrap_content"
  26.  
  27.                         android:layout_gravity="center"
  28.  
  29.                         android:gravity="center_vertical|center_horizontal"
  30.  
  31.                 </TextView>
  32.  
  33.                 <ImageButton android:id="@+id/LigneSuiv"
  34.  
  35.                         android:layout_width="wrap_content"
  36.  
  37.                         android:layout_height="wrap_content"
  38.  
  39.                         android:layout_gravity="right|center_vertical">
  40.  
  41.                 </ImageButton>
  42.  
  43. </LinearLayout>
  44.  
  45.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


Where all my objetcs are stucks togethers on the right side of the layout.


What should I do ?

Thanks
Jardi
Once Poster
Once Poster
 
Posts: 1
Joined: Tue Jan 12, 2010 10:47 pm

Top

Postby wirelessdesigns » Wed Jan 13, 2010 1:43 am

Hi Jardi, Welcome to Android.

I made some modifications to the layout you posted that should help:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.    android:id="@+id/LayoutLigne"
  3.    android:layout_height="wrap_content"
  4.    android:layout_width="fill_parent"
  5.    android:orientation="horizontal">
  6.           <ImageButton android:id="@+id/LignePrec"
  7.               android:layout_width="wrap_content"
  8.               android:layout_height="wrap_content"
  9.               android:layout_weight="0.5"
  10.          />
  11.           <TextView android:text="Foo"
  12.               android:id="@+id/arretNom"
  13.               android:layout_height="wrap_content"
  14.               android:layout_width="wrap_content"
  15.               android:layout_weight="1"
  16.               android:gravity="center"
  17.          />
  18.           <ImageButton android:id="@+id/LigneSuiv"
  19.               android:layout_width="wrap_content"
  20.               android:layout_height="wrap_content"
  21.               android:layout_weight="0.5"
  22.          />
  23. </LinearLayout>
  24.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


Some of these changes are syntactical ("<>" were missing in some places, I cleaned up the widget tags to single elements using the <Widget .../> syntax, etc.). I also added an xmlns tag to the LinearLayout because it's the root layout in my example. But the meat of what's going on here is the "layout_weight" property. LinearLayout doesn't respond well to gravity settings for the purposes you're attempting because it tries to lay things out one next to another.

The above layout uses layout_weight to fill the LinearLayout container proportionally. With the properties used (0.5, 1, 0.5), the buttons take up 25% each and the TextView is the remaining 50% in the middle. You can now use "gravity" on the TextView to center the text within the view. If you play around with these weights, you can adjust the button size vs. TextView size.

Editorial Sidenote: LinearLayout is probably not the best solution for this idea. You could accomplish the same thing with a RelativeLayout using alignment properties similar to the way you wanted to use layout_gravity. You could:
Use layout_alignParentLeft on one button
Use layout_alignParentRight on the second button
Change layout_width to "fill_parent" (in concert with gravity="center") on the TextView

Using RelativeLayout like this might help your layout respond to events like screen rotation a little better. The LinearLayout solution changes the button size slightly when you rotate because everything is weighted based on the screen's pixel width.

Hope that helps!
wirelessdesigns
Developer
Developer
 
Posts: 25
Joined: Fri Dec 18, 2009 3:27 pm
Location: Littleton, CO

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 4 guests