how to set max Width for a Layout

Question

After a lot of googling I'm unable to find a solution to this problem. I have this layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/adlayout"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical">
<TableLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:stretchColumns="1"
   android:layout_weight="1"
  >

  <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent"   android:layout_height="wrap_content">
       <TextView android:padding="6dip" android:text="@string/barcode_format"  android:id="@+id/textView1" android:layout_width="wrap_content"   android:layout_height="wrap_content"></TextView>
       <EditText android:padding="6dip" android:layout_width="fill_parent" android:id="@+id/edit_barcode_format" android:layout_height="wrap_content"></EditText>
  </TableRow>
  <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="wrap_content">
      <TextView android:padding="6dip" android:text="@string/barcode_type" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
      <EditText android:padding="6dip" android:layout_width="fill_parent" android:id="@+id/edit_barcode_type" android:layout_height="wrap_content"></EditText>
  </TableRow>        
 </TableLayout>


</LinearLayout>

The table layout defines a form. On a phone looks ok but on a tablet, the edittext views looks too large. I want to set a max Width for the layout, and paint the form centered.

Stopcock

Answer 1

The appropriate way to handle your situation is to create a separate layout file to optimize your form view for tablets while using the existing file for phones. You do this by creating separate res/layout directories with qualifiers for screen size and/or resolution attached to them.

You can read more about the available resource qualifiers here. There are a number of choices here and I will leave it to you to pick the best for your application, but here is a simple example:

Let's assume your current layout file is form.xml.

Place your existing layout file in res/layout/form.xml. This will make it the default layout.

Create another file and place it in res/layout-large/form.xml. This layout file will be used on devices with a physical screen size > ~5" (all standard tablets). To handle your issue, I have modified your default layout to display the form centered horizontally and only take up 60% of the screen width:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:weightSum="1" >

    <TableLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.6"
        android:stretchColumns="1" >

        <TableRow android:id="@+id/tableRow1">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="6dip"
                android:text="Barcode Format" >
            </TextView>

            <EditText
                android:id="@+id/edit_barcode_format"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="6dip" >
            </EditText>
        </TableRow>

        <TableRow android:id="@+id/tableRow1">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="6dip"
                android:text="Barcode Type" >
            </TextView>

            <EditText
                android:id="@+id/edit_barcode_type"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="6dip" >
            </EditText>
        </TableRow>
    </TableLayout>

</LinearLayout>

The change utilizes the layout_weight and weightSum properties of LinearLayout, which tell the table to only fill 60% (layout_weight=0.6) of its parent. This is more efficient than try to set a maximum width, especially when devices have variable resolutions and aspect ratios.

FYI, I also tried to remove as many of the unnecessary attributes that you had in your XML that were doing nothing but creating clutter (such as multiple xmlns:android declarations). One of those changes was removing extra layout_ parameters from the TableLayout children, because TableLayout ignores all these parameters anyway and forces its children to use certain constraints. From the Docs:

The children of a TableLayout cannot specify the layout_width attribute. Width is always MATCH_PARENT. However, the layout_height attribute can be defined by a child; default value is WRAP_CONTENT. If the child is a TableRow, then the height is always WRAP_CONTENT.

You can read more about TableLayout in the SDK docs.

HTH

Belsen

Answer 2

Keeping different layout files as @Devunwired suggested is correct, however, it adds complexity to your project (you'd have to maintain multiple files in case the designer redesigns the view layout).

If all you need is to alter the width of a button, I would suggest the following. Keep one xml file in the layout folder and give it a value of

<LinearLayout
    style="@style/width_match_parent_max_200"
    android:layout_height="wrap_content">

values-w600dp/styles.xml contains

<resources>
    <style name="width_match_parent_max_200">
        <item name="android:layout_width">200dp</item>
    </style>
</resources>

values/styles.xml contains

<resources>
    <style name="width_match_parent_max_200">
        <item name="android:layout_width">match_parent</item>
    </style>
</resources>

Edit: Note the folder is values-w600dp and not values-600dp

Carisa

Keep in mind that the LinearyLayout will NOT have android:layout_width="wrap_content" I made this mistake and thought it was needed, but it is not needed at all – Tabitha

Nice solution, although it's values-w600dp. – Phreno

This does not seem to have any effect for some reason. The view always uses match_parent instead of the specific value on a bigger screen. – Showmanship

Answer 3

Use a ConstraintLayout. Inside it you can use these properties for min/max width/height:

• app:layout_constraintWidth_min
• app:layout_constraintWidth_max
• app:layout_constraintHeight_min
• app:layout_constraintHeight_max

Don't forget to set the width/height of your View to match constraints (0dp).

Philharmonic

thanks a lot it helped me lot after work ok 6 hour i found only this solution ... Thanks again – Falk

WOW! That's awesome! It's also incredible it was so hard to find this information. – Tremann

Answer 4

You have to create a new ViewGroup that extends from LinearLayout and limits it by the width you want. See this answer.

Marika

Thanks but I was looking for an XML solution. – Stopcock

Answer 5

This BoundedViews library helps you to set constraints on maxWidth/maxHeight

Oar

Answer 6

see the link or just set a value to

      android:layout_width="fill_parent"
      android:layout_height="fill_parent"

http://developer.android.com/guide/practices/screens_support.html

Chamblee