how to set max Width for a Layout
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
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
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
).
You have to create a new ViewGroup that extends from LinearLayout and limits it by the width you want. See this answer.