Combine layout_weight and maxWidth for views

Question

I'm trying to make my layouts more landscape friendly, and a common pattern I have is to add a LinearLayout with some buttons (e.g. OK | Cancel) and just set a value for layout_weight so that the space is evenly distributed. The problem is that when you use a phone or (especially) a tablet in landscape mode, you end up with humongous buttons that look ridiculous. I tried setting maxWidth on the buttons and on the linear layout but to no avail. What would be the easiest way to achieve this? Namely, setting a maximum horizontal size for the view so that it does not grow to the whole width. I tried a bunch of different things, but none worked.

Here's a sample layout:

    <LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:paddingLeft="10dp"
      android:paddingRight="10dp"
      android:paddingTop="6dp"
      android:paddingBottom="6dp">
      <Button 
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:enabled="false"
        android:textStyle="bold"
        android:text="@string/button1" />
      <Button 
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/button2" />
    </LinearLayout>

Note: I know I can create a new layout file for landscape and do magic there. I want to keep the specialized layout files to a minimum, and I would hope this does not require them.

score 1 · Answer 1 · edited May 23 '17 at 12:17

1

After messing around quite a bit with relative layouts, I stumbled upon this answer, which is what I ended up using.

edited May 23 '17 at 12:17

Community

1
1

answered Jun 08 '11 at 23:02

dmon

30,048
8
87
96

I'll assume you meant the "extend LinearLayout and override the onMeasure function" answers on that page. The page has a more recent answer, "Add a Outer Layout" http://stackoverflow.com/questions/5875877/setting-a-maximum-width-on-a-viewgroup#23072507 which is much simpler (but I didn't test it). – Jerry101 Jun 18 '14 at 21:15

score 0 · Accepted Answer · answered Jun 08 '11 at 20:58

I don't have Eclipse here to test it, but I would use a RelativeLayout instead, something like:

<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  >
  <View
    android:id="@+id/centerView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    />
  <Button 
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/centerView"
    android:enabled="false"
    android:textStyle="bold"
    android:text="@string/button1" 
    />
  <Button 
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/centerView"
    android:text="@string/button2" 
    />
</RelativeLayout>

As I said, I can't test it right now, but you can work around this idea.

On a side note, unless your layout is very simple, I usually create separate layouts for landscape. It's a little more work, but you can optimize the views much better that way. Specially, if you plan to support larger screens.

BTW, does this qualify as [cheating](http://stackoverflow.com/questions/6254303/android-programatically-select-gallary-image/6255224#6255224)? ;) — Aleadam, Jun 08 '11 at 21:06
Heh, no this is good. I'm trying it out and worked pretty well, except for the fact that the RelativeLayout ate the EditText that I have above it. But, it looks promising! — dmon, Jun 08 '11 at 21:18
@dmon you'll have to add `android:layout_below="@id/textView1"` (or whatever the id is) to each of the Views. RelativeLayout is a very powerful layout. Take a look at all possible the attrs [here](http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html). — Aleadam, Jun 08 '11 at 21:23
Oy, I finally got it working but these `RelativeLayout`s are a pain. I still prefer how `LinearLayout`s can distribute the empty space so easily. — dmon, Jun 08 '11 at 22:15

score -1 · Answer 3 · edited May 20 '15 at 22:40

<RelativeLayout
   android:id="@+id/rlMain"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginLeft="12dp"
   android:layout_marginRight="12dp">

    <View
      android:id="@+id/vCenter"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_centerHorizontal="true"
      android:layout_marginRight="5dp"
      android:layout_marginLeft="5dp"/>

    <Button
     android:id="@+id/btnOne"
     android:layout_width="wrap_content"
     android:layout_height="40dp"
     android:layout_toLeftOf="@id/vCenter"
     <!--Change this for different widths-->
     android:minWidth="200dp"/>

    <Button
     android:id="@+id/btnTwo"
     android:layout_width="wrap_content"
     android:layout_height="40dp"
     android:layout_toRightOf="@id/vCenter"
     <!--Change this for different widths-->
     android:minWidth="200dp"/>
</RelativeLayout>

add a little explanation to your answer is better for future readers? — HaveNoDisplayName, May 20 '15 at 15:18

Combine layout_weight and maxWidth for views

3 Answers3

Linked