How to make layouts grow and shrink?

Question

I'm playing around with making a random recipe collection app. Now I came across a problem: at the moment I have designed it with my mobile's resolution in mind. But what if the app is used on a device with larger resolution eg. a tablet.

What I want to achieve is that I want the buttons to grow shrink depending on the resolution. For example: when holding my phone vertically, there are 2 columns of buttons. When holding it horizontally, there still are 2 columns, but the view gets wider. Then there should be 4 columns to fill as much of the white space as possible.

Two pictures to illustrate my thoughts:

vertical

horizontal with 2 more columns

My code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcc33"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >

<LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="1000" >

    <EditText
        android:id="@+id/search_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_weight="1000"
        android:ems="5"
        android:hint="@string/search_hint" />

    <Button
        android:id="@+id/search_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/search_button" />

</LinearLayout>

<ScrollView android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center" >

    <RelativeLayout
        android:layout_width="225dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/search_box"
        android:layout_gravity="center"
        android:layout_marginTop="15dp" >

        <Button
            android:id="@+id/btn_lihatoidud"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/lihatoidud"
            android:layout_alignParentTop="true"
            android:text="Lihatoidud"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_kypsetised"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_lihatoidud"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/kypsetised"
            android:text="Küpsetised"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_seenetoidud"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_kypsetised"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/seenetoidud"
            android:text="Seenetoidud"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_juustutoidud"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_seenetoidud"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/juustutoidud"
            android:text="Juustutoidud"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_lisandid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_juustutoidud"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/lisandid"
            android:text="Lisandid"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_supid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/supid"
            android:text="Supid"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_voileivad"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/btn_supid"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/voileivad"
            android:text="Võileivad"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_pudrud"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/btn_voileivad"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/pudrud"
            android:text="Pudrud"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_joogid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/btn_pudrud"
            android:layout_marginTop="15dp"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/joogid"
            android:text="Joogid"
            android:textSize="18sp" />

    </RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Answer 1

I would actually reccomend you use the GridView pattern.

https://developer.android.com/guide/topics/ui/layout/gridview.html

Benfits include

• Easily customize able if you need multiple rows/columns
• Faster performance because you re-use a lot the same views. Scales much better than scrollview approach

Here example with two column for Phones

Here example with four column for tablets

All changing only the number of columns the grid should show. The best way to do this by what "JRaymond" recommended, by having multiple values resposnes depending on if its a tablet/phone. Example

• ->values ->attrs_arin_view.xml
• ->values-land->attrs_arin_view.xml
• ->values-sw600dp -> attrs_arin_view.xml

inside values ->attrs_arin_view.xml

   <resources>
        <integer name="number_of_column">2</integer>
    </resources>

and then change in the values-land to have number_of_column to 4.

Then in your in your xml you mention the integer once

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:horizontalSpacing="8dp"
        android:numColumns="@integer/number_of_column"
        android:padding="8dp"
        tools:listitem="@layout/grid_cell_note"
         >
    </GridView>
</LinearLayout>

Answer 2

Android has a few mechanisms for dealing with this kind of thing. For most people simply having a different layout for different classes of device will be sufficient. i.e:

res/
  layout/
    my_layout.xml
  layout-land/        # landscape
    my_layout.xml
  layout-sw600dp      # bigger devices
    my_layout.xml
  layout-sw600dp-land # Big and landscape

Android will automatically pick the right layout on the device your app gets loaded on. See the Developer Guide for details there. Alternatively, you might need to define your own custom view that resizes your grid based on the available size. An example of this is a CellLayout, a class written for the grid of apps in Launcher

Answer 3

You need to create xml files for different screen sizes

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

design your XML files to use references instead of hardcoded strings. You can then assign a reference to layouts, buttons and so on which has a different value depending on screen sizes. (use android:padding="@dimen/pagepadding" instead of android:padding="16dp" and define the dp in values/dimens.xml like this: <dimen name="pagepadding">16dp</dimen>)

To do that you have to create new folders in your Project like values-sw600dp for devices with 600dp smallest width (like Nexus 7 I believe) or values-sw720dp-land for devices with the smallest width of 720dp (10 inch tablets I believe) in landscape.

Do some reading on the developer page and on the internet for that. It's not too difficult