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>

Paten

You need to use different drawables for all devices. Like hdpi, mdpi, xhdpi, etc.. This will Choose the images as per device preference.. – Bertina

For your reference: developer.android.com/guide/practices/screens_support.html – Stream

Show us your layout.xml, I suspect some errors in there. – Allwein

Check out my ans here #19875658 – Wiggins

ok i will put images in different-different drawable but what about button size and font size, if i change them according to a screen it mess up with another screen. how to auto resize according to different screen sizes. – Paten

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>

Allwein

ok i will put images in different-different drawable but what about button size and font size, if i change them according to a screen it mess up with another screen. how to auto resize according to different screen sizes. – Paten

will i have to increase images size too depending on different-different drawable. or i can use same image size in different - different drawable. – Paten

You should increase it. I suggest you to read developer.android.com/guide/practices/screens_support.html – Allwein

thanx for above help, but can we create different layouts just like we use different drawable. for example: layout-idpi, layout-hdpi, layout-mdpi, layout-xhdpi – Paten

@Paten yes you can, like layout-sw720dp folder. – Uxorial

Answer 2

use linear layout as your main layout and divide it into part three four or five ,using weightSum, upto you how you want divide it and then use other sub linear layouts and assign weightSum to each sub linear Layout from the total main layout. manage UI widgets in the sub layouts. here is the example below

Saskatoon

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. – Ddene

Answer 3

You should use constraint layout. You can create constraints between objects...And should use "match_constraints","match_parent","wrap_content" for size..And also use margins.. You can learn How to Build a Responsive UI with ConstraintLayout

Donnydonnybrook