Layout on Phones vs Tablets on android

Question

I have designed a layout with a imageview of 150dp x 150dp. It looks bad on tablet compared to phone. Please see the image below.

How do I make the layout look similar to phone on tablet as well. Using the same layout file, i.e without using different layout for different screen sizes.

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

    <RelativeLayout
        android:id="@+id/layout_title"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/title_with_shadow"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="16sp"
            android:text="@string/preview"
            android:textColor="@color/title_text_color"
            android:textStyle="bold" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/imgPreviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/layout_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/category_item"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imgPreview"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true"
            android:scaleType="fitXY"
            android:src="@drawable/noimage" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/tabcontrolLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imgPreviewLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:gravity="center_horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_margin="5dp"
            android:layout_marginLeft="10dp"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="@string/pieces"
                android:textColor="#040404"
                android:textSize="15sp"
                android:textStyle="bold" />

            <Spinner
                android:id="@+id/spinerCount"
                android:layout_width="70dp"
                android:layout_height="35dp"
                android:gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="@string/rotation"
                android:textSize="15sp"
                android:textStyle="bold" />

            <ToggleButton
                android:id="@+id/btn_rotate_puzzel"
                android:layout_width="wrap_content"
                android:layout_height="35dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:layout_marginRight="10dp"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="@string/background"
                android:textSize="15sp"
                android:textStyle="bold" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/color_selection" />
        </LinearLayout>

        <ImageButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_below="@+id/layout_Rotation"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:padding="8dp"/>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/magic_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/title_with_shadow"
            android:id="@+id/magic_btn"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:textSize="15sp"
                android:layout_marginLeft="10dp"
                android:text="@string/cheatcode"
                android:textColor="@color/title_text_color"
                android:textStyle="bold" />
        </RelativeLayout>

        <include
            layout="@layout/panel"
            android:background="@drawable/background_with_shadow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>


</RelativeLayout>

Answer 1

If you want your app displays in different device sizes, you must create these folders in addition to layout folder:

layout-land

layout-large

layout-latge-land

layout-small

layout-small-land

layout-xlarge

layout-xlarge-land

that is related to small,large and very large screens and horizontal and vertical modes, you must complete your development and after finish, copy all designed layouts in Layout folder to these folders...and run the program...and if a view has some movement or bad place,you can change it's property and correct it.... you must add this code to manifest.xml:

 <compatible-screens>
        <screen
            android:screenDensity="ldpi"
            android:screenSize="small" />
        <screen
            android:screenDensity="mdpi"
            android:screenSize="normal" />
        <screen
            android:screenDensity="xhdpi"
            android:screenSize="large" />
        <screen
            android:screenDensity="xhdpi"
            android:screenSize="xlarge" />
    </compatible-screens>

Answer 2

How do I make the layout look similar to phone on tablet as well. Using the same layout file, i.e without using different layout for different screen sizes.

You can't, you'll have to create different layouts.

It's not as simple as categorising devices as either phones or tablets or even just by their physical screen dimensions - you can have two devices with exactly the same physical screen dimensions but with different screen resolutions WRT actual dots per inch and the layout would look different.

The use of density-independent pixels (dip or dp) can only go so far when it comes to making minor adjustments on screen sizes / densities - it works when there is only a small difference but not when there is a bigger difference.

In short, the reason Android has so many options WRT density (e.g., ldpi, mdpi, hdpi etc) and size (small, normal, large etc) is that, in many cases, you can't just create a single layout and expect it to transform across every device.