CODEWITHSUNDEEP
androidandroid-layout
Tomer
Tomer

Reputation: 17940

Android: How to make a layout that fits multiple screen sizes?

I have this layout:

enter image description here

as You can see it has numbers in each one of the circles. I have created it using RelativeLayout and then playing with the margins of each TextView, and it looks good on my Nexus 4.

But obviously when i use a different device with different resolution, everything looks messed up since the margins are set for a specific screen size/density.

Looking around the web i saw that i can't use percentage so how can i make this layout fit all screen sizes?

Here is how i did it:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/circleContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="zoomCircle" >

    <ImageView
        android:id="@+id/circleImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp"
        android:contentDescription="@string/packages_desc"
        android:src="@drawable/circle" />

    <TextView
        android:id="@+id/numOfEnv"
        style="@style/whiteCircleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/circleImg"
        android:layout_marginRight="@dimen/rightMargin"
        android:layout_marginTop="@dimen/topMargin"
        android:text="100" />

    <TextView
        android:id="@+id/numSmall"
        style="@style/whiteCircleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/circleImg"
        android:layout_alignRight="@id/circleImg"
        android:layout_marginBottom="@dimen/bottomMargin"
        android:layout_marginRight="@dimen/rightMargin"
        android:text="20" />

    <TextView
        android:id="@+id/numMedium"
        style="@style/whiteCircleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/circleImg"
        android:layout_alignLeft="@id/circleImg"
        android:layout_marginBottom="@dimen/bottomMargin"
        android:layout_marginLeft="@dimen/leftMargin"
        android:text="30" />

    <TextView
        android:id="@+id/numBig"
        style="@style/whiteCircleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/circleImg"
        android:layout_marginLeft="@dimen/leftMargin"
        android:layout_marginTop="@dimen/topMargin"
        android:text="740" />



</RelativeLayout>

Upvotes: 2

Views: 508

Answers (2)

Steven.Nguyen
Steven.Nguyen

Reputation: 1054

I think you have to create each object and add into layout programatically, and using ratio for each object. For example: ratio of your screen is 9/16.

height = size.y; width = ratio * height;

Every object will set layout param or margin param, they should follow this width and height.

Upvotes: 1

Mike Ortiz
Mike Ortiz

Reputation: 4041

You're on the right track using dimensions. Make a different values folder for each screen size you'd like to support, ie values-sw320dp, values-sw600dp, etc. Each with its own dimens.xml file. Then, put different values for leftMargin, topMargin, etc in each dimens file. Look at the section "Using new size qualifiers" here for more info.

Upvotes: 0

Related Questions