CODEWITHSUNDEEP
androidandroid-layoutandroid-imageview
user754730
user754730

Reputation: 1340

Layout looks different on 2.2 and 4.0

I have a layout which looks very nice on Android 4.0 and 4.1:

enter image description here

And it looks like this on Android 2.2

enter image description here

Here is my Layout:

<?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:orientation="vertical" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginRight="3dp" >

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    android:layout_marginTop="6dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/calendar" />

                <TextView
                    android:id="@+id/date_month"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|top"
                    android:layout_marginTop="12dp"
                    android:gravity="center_horizontal"
                    android:text="Sep"
                    android:textColor="@android:color/black"
                    android:textSize="14dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/date_day"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="5dp"
                    android:gravity="center_vertical|center_horizontal"
                    android:text="26"
                    android:textColor="@android:color/black"
                    android:textSize="40dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/date_year"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|bottom"
                    android:layout_marginBottom="9dp"
                    android:gravity="center_vertical|center_horizontal"
                    android:text="2012"
                    android:textColor="@android:color/black"
                    android:textSize="14dp"
                    android:textStyle="bold" />
            </FrameLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/title"
                android:layout_marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:ellipsize="end"
                android:maxLines="1"
                android:textSize="16dp"
                android:textStyle="bold" />

            <View
                android:layout_width="wrap_content"
                android:layout_height="30dp" />

            <TextView
                android:id="@+id/description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:textSize="14dp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

</LinearLayout>

As you can see the TextViews on the ImageView are different placed on the different versions.

What can I do to fix this?

Upvotes: 0

Views: 618

Answers (3)

AITAALI_ABDERRAHMANE
AITAALI_ABDERRAHMANE

Reputation: 2519

Try this it work for all android devices screens

if you do not use the image in your code, put it directly as background of your FrameLayout

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

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <FrameLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:background="@drawable/calendar"
             >

            <!--
            <ImageView
                android:id="@+id/image"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_marginLeft="3dp"
                android:layout_marginRight="3dp"
                android:layout_marginTop="6dp"
                android:scaleType="centerCrop"
                android:src="@drawable/calendrier" />
            -->

            <TextView
                android:id="@+id/date_month"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|top"
                android:layout_marginTop="6dp"
                android:gravity="center_horizontal"
                android:text="Dec"
                android:textColor="@android:color/black"
                android:textSize="14dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/date_day"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:layout_marginTop="1dip"
                android:gravity="top"
                android:text="1"
                android:textColor="@android:color/black"
                android:textSize="40dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/date_year"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|bottom"
                android:layout_marginBottom="8dp"
                android:gravity="center_vertical|center_horizontal"
                android:text="2012"
                android:textColor="@android:color/black"
                android:textSize="14dp"
                android:textStyle="bold" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="3dp"
        android:layout_marginTop="6dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginTop="5dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textSize="16dp"
            android:textStyle="bold" />

        <View
            android:layout_width="wrap_content"
            android:layout_height="30dp" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:textSize="14dp" />
    </LinearLayout>

</LinearLayout>

Upvotes: 2

10s
10s

Reputation: 1699

The reason is not in the version of the phone, whether it is 4.0 or 2.2. The problem is on different densities and widths of the screens. In android there are this kind of problems because of the different screen sizes and different manufacturers. And unfortunately dp measurement does not work as expected

To enable your application to support these kind of things you should read, if you haven't already, the android docs in the section for "Supporting multiple screens".

In your case you should create a dimen.xml file and move all your values that are in dp in there. A following example would make it clearer:

in dimen.xml:

...
<dimen name="big_size">90dp</dimen>
...

in the layout.xml:

...
layout_width="@dimen/big_size"
...

The default dimen.xml file should be inside values and then you should create subfolders , like values-mdpi/, of values regarding the different densities you want to support. And in there you should have different dimen.xml files.

In the values-mdpi/ folder the dimen.xml file would be:

...
<dimen name="big_size">60dp</dimen>
...

Notice that there is the same name but different value. Android would understand by the density of the screen and take the value that is more appropriate. For more information read the documentation I added before.

Upvotes: 4

bmavus
bmavus

Reputation: 892

I don't know that will work or not, but if I were you, I would not use imageview for this. I would use layout and set that image as its background.

Upvotes: 0

Related Questions