CODEWITHSUNDEEP
androidandroid-layout
VansFannel
VansFannel

Reputation: 45921

Create a multiple screen android application

I'm developing an Android 2.3.3 application that will work on every android phone or tablet device and it will only support portrait.

Reading Supporting Multiple Screens I see a table with a lot of screen sizes and densities.

How many layouts do I need? One for every screen size and density?

I think I only need four: one for small, normal, large and x-large.

Upvotes: 2

Views: 357

Answers (4)

Andreas Rudolph
Andreas Rudolph

Reputation: 1246

I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html

Basically, defining your layouts in dp units for one size is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets".

This tool will allow your layouts to be converted into fitting these density buckets from a default baseline.

Hope it helps.

Upvotes: 1

Avi Kumar
Avi Kumar

Reputation: 4433

One layout is enough for device up to large density , if you also want to implement layout for x-large screen size then you need to make another layout, just get the images as per ldpi , mpdi and hdpi , place them the relative folders , create layout using appropriate layout weights give full size to backgrounds like fill parent and exact size of buttons

like

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bar"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight=".55"
                android:gravity="left|center"
                android:orientation="vertical" >

                <Button
                    android:id="@+id/goBack"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:background="@drawable/back_btn" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight=".25"
                android:gravity="center"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Forget Paaword"
                android:textColor="#ffffff"
                    android:textSize="18dp"
                    android:textStyle="italic" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight=".55"
                android:gravity="right|center"
                android:orientation="vertical" >

                <Button
                    android:id="@+id/hombutton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:background="@drawable/home1" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:gravity="right|center"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight=".5"
            android:gravity="right|center"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:text="User Name"
                android:textColor="#ffffff" />

            <EditText
                android:id="@+id/usernametext"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5" android:imeOptions="actionDone">

                <requestFocus />
            </EditText>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight=".5"
            android:gravity="right|center"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:text="Email Id"
                android:textColor="#ffffff" />

            <EditText
                android:id="@+id/emailtextfp"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:inputType="textEmailSubject" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight=".5"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/loginbuttonfp"
                android:layout_width="75dp"
                android:layout_height="28dp"
                android:layout_margin="5dp"
                android:background="@drawable/btn" android:text="Ok" android:textColor="#ffffff"/>

            <Button
                android:id="@+id/cancelbutton"
                android:layout_width="75dp"
                android:layout_height="28dp"
                android:layout_margin="5dp"
                android:background="@drawable/btn" android:text="Cancel" android:textColor="#ffffff"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Upvotes: 1

Korhan Ozturk
Korhan Ozturk

Reputation: 11308

From the link you provided: 

By default, Android resizes your application layout to fit the current device screen. 
In most cases, this works fine.

Therefore the general rule is to use Density Independent Pixels (dips) for size definitions in your layout xmls leaving the rest to be handled by the operating system. Doing so you just have the only layout for all range of devices.

Making separate layouts is not really common practice. Only when you have images that can't be stretched is that really the recommended way. In that case, splitting the graphics based on the size and density of the screen can solve your problem anyway.

Upvotes: 1

Tuna Karakasoglu
Tuna Karakasoglu

Reputation: 1267

you basically need four. But if you you want you application to behave different according to different screen sizes AND different orientations, you should use:

/layout-port         > for medium layout portrait
/layout-land         > for medium layout landscape
/layout-xlarge-port  > for xlarge layout portrait
/layout-xlarge-land  > for xlarge layout landscape

etc.

Upvotes: 1

Related Questions