Home » Android » android – Combine layout_weight and maxWidth for views

android – Combine layout_weight and maxWidth for views

Posted by: admin May 14, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Answer:

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

Answer:

<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>