Scale phone app layout to tablet sized screens in android

Question

I made an Android app. i want it to be usable on tablets as well, with the same layout files. however, instead of 'scaling' up the interface to match the size of the tablet, im getting it in the size of the phone interface, just on a big display, resulting in a-lot of mess.

i tried doing things like described here, but i cant because of many reasons (for example, im using libraries that did not exist back then).

How can i accomplish my task, besides doing different layout files for all sizes? please dont link me this, i read that a few times and could not understand how to make it work properly (besides some limitLarge property that made it scale in an ugly and blurry way).

thanks!

Edit: Example layout and the code following:

This is how it looks on a phone:

And this is how it looks on a tablet:

you can see the layout 'kept' its formation, but i want it to 'scale up' to take up the entire screen. i 'feel' the problem lies within the 'dp' size unit (since the big screen has more 'dp'?), but i cant fix it. I'm relatively new on this type of development, so please help me out :)

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:id="@+id/authLayout">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="FTW Name Placeholder"
            android:id="@+id/textTitle"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_gravity="center_horizontal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Medium Text"
            android:id="@+id/textViewInst"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Connect"
            android:id="@+id/btnConnect"
            android:layout_gravity="center_horizontal" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_gravity="center_horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="Username:"
                android:id="@+id/textView58" />

            <EditText
                android:layout_width="220dp"
                android:layout_height="wrap_content"
                android:id="@+id/editTextUsername"
                android:layout_marginLeft="10dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_gravity="center_horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="Password"
                android:id="@+id/textView59" />

            <EditText
                android:layout_width="220dp"
                android:layout_height="wrap_content"
                android:id="@+id/editTextPassword"
                android:layout_marginLeft="15dp" />
        </LinearLayout>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Auth"
            android:id="@+id/authBtn"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:id="@+id/textView1"
            android:scrollbars = "vertical"
            android:gravity="bottom"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:id="@+id/buttonSend"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

</RelativeLayout>

Answer 1

You rarely ever want to set hard widths like this

android:layout_width="220dp"

Everywhere you have something like that you need to replace it with match_parent that will ensure that the width is the same size as your parent layout width

same with your buttons where you have this

android:layout_width="wrap_content"

make them match parent and they will span the width of the screen.

There is no need to store dimens in separate folders

Answer 2

You don't need to target any specific api to develop a tablet app, just provide resources targeted for higher densities

You can store layouts with the same name but different density suffixes, for example

layout/mylayout.xml - any device layout-w700dp/mylayout.xml - devices with a width of at least 700dp.

Tablets start at around 700dp (This value was obtained from my experience, no actual data so don't quote me on it)

Read these documents to learn more

http://developer.android.com/guide/topics/resources/providing-resources.html http://developer.android.com/guide/practices/screens_support.html

PS Do yourself a favor and target 4.0 and up at the very least, older devices are a pain to work with and they have very little market share now.

Answer 3

For that can you set width and height in dimens.xml in res/values-sw600dp this for 7" tablet