CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayout
MaikoMobile
MaikoMobile

Reputation: 409

how to set max Width for a Layout

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.

Upvotes: 29

Views: 60515

Answers (6)

Cristan
Cristan

Reputation: 14145

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

Upvotes: 29

kouretinho
kouretinho

Reputation: 2260

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

Upvotes: 51

Bao Le
Bao Le

Reputation: 17507

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

Upvotes: 0

devunwired
devunwired

Reputation: 63303

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

Upvotes: 16

dmon
dmon

Reputation: 30168

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

Upvotes: 2

Bill Gary
Bill Gary

Reputation: 3005

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

Upvotes: -22

Related Questions