how to auto resize, compatible, adjust screen size for all android devices

Question

I am creating a simple quiz test app "Target SDK API 16 (4.1 Jelly Beans)" Screen 3.7 (480x800 hdpi).

This app looks great on 3.7 (480x800), but when I run this on another screening device like 2.7 (240x320), 7.0 (1024x600), 10.1 (1280x800) its screen resolution gets messed up or looks bad.

For better understanding see screenshot:

2.7 (240x320)

http://postimg.cc/image/m3sob88mp/

3.7 (480x800)

http://postimg.cc/image/wf513w0c1/

7.0 (1024x600)

http://postimg.cc/image/fc298djn5/

10.1 (1280x800)

http://postimg.cc/image/isk5gon7p/

I want this to be compatible / look perfect with all screen sizes just like it looks in 3.7 (480x800)

How to auto resize, make compatible, adjust screen size for all android devices so it looks perfect in every screen resolution?

Or will I have to create a different app or different screen sizes?

What I tried to make screen compatible is: added these lines to "AndroidManifest.xml"

<supports-screens>

        android:resizeable="true"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"

    </supports-screens>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.usd.quiztest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />

    <supports-screens>
        android:resizeable="true"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"
    </supports-screens>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name="com.usd.quiztest.Logo"
            android:label="@string/app_name"            
            android:theme="@android:style/Theme.Black.NoTitleBar" >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />               
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <activity
            android:name="com.usd.quiztest.First"
            android:label="@string/app_name" >
        </activity>                
        <activity
            android:name="com.usd.quiztest.Q1"
            android:label="@string/app_name" >
        </activity>        
         <activity
            android:name="com.usd.quiztest.Q2"
            android:label="@string/app_name" >
        </activity>
         <activity
            android:name="com.usd.quiztest.Q3"
            android:label="@string/app_name" >
        </activity>
         <activity
            android:name="com.usd.quiztest.Q4"
            android:label="@string/app_name" >
        </activity>
         <activity
            android:name="com.usd.quiztest.Q5"
            android:label="@string/app_name" >
        </activity>
         <activity
            android:name="com.usd.quiztest.FinalPage"
            android:label="@string/app_name" >
        </activity>
         <activity
            android:name="com.usd.quiztest.Score"
            android:label="@string/app_name" >
        </activity>

    </application>

</manifest>

first_screen.xml (this is the screen that is shown in the screenshot)

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:contentDescription="ql"
        android:gravity="center"
        android:src="@drawable/ql" />

    <Button
        android:id="@+id/start_button"
        android:layout_width="254dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="Start Quiz Test"
        android:textColor="#000000" />

</RelativeLayout>

Answer 1

There are some things which are crucial, if you want to support different screen sizes:

• Use different drawables for every screen density bucket (drawables-hdpi, drawables-xhdpi, etc)
• Use dp instead of px as unit for size.
• Avoid using absolute sizes, use margins and let Android scale it accordingly.

You can read more about supporting multiple screen sizes here.

Edit:

To use different button / font sizes and margins, you should use the dimens.xml.

res/values-hdpi/dimens.xml
res/values-xhdpi/dimens.xml

Example dimens.xml:

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>