Search code examples
androidapiandroid-layoutpositionandroid-relativelayout

Relative Layout: Different behavior on Api < 11


I don't know why, but layout is shown well on device with Api 11+, isn't for older.

This is xml:

    <LinearLayout
        android:id="@+id/workers_linearlayout"
        android:layout_width="50dp"
        android:layout_height="70dp"
        android:layout_weight="1" >

        <RelativeLayout
            android:id="@+id/workers_relative_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/workers_small" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleX="0.5"
                android:scaleY="0.5"
                android:src="@drawable/ic_cerchio_rosso"
                android:translationX="25dp"
                android:translationY="-20dp" />

            <TextView
                android:id="@+id/workers_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="9"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:translationX="25dp"
                android:translationY="-20dp" />
        </RelativeLayout>
    </LinearLayout>

This is result on API 11+:

Api11+

This on API 10-:

API 10-

I tried to fix it playing with layouts and I can obtain a quite good result, but never like the first one.

Can someone help me?

EDIT:

Photo on devices:

enter image description here

EDIT2

Triangle warning are:

  • String "9" should use string resource
  • ImageView1 and 3: missing content description attribute
  • RelativeLayout or it's parent possibly useless
  • Nested weights are bad for performance

By the way, nothing of these fixed solving my problem i think


Solution

  • Ok. I fixed it. Playing with the layout and following NikkyD's suggestion about "center in parent" feature, I followed this policy:

    It's not possible to use scale and translation properties because older Apis (maybe) don't recognize them. So, I deleted translation and scaling options and scaled image by setting a fixed height and width for IV3 (30dpx30dp). Now dimension is right, but if I call "align parent Top" with "align parent Right" for IV3 and TextView, their position is good, but TextView is not positioned at the center of IV3. Exactly like this:

    Wrong number position

    For fixing it, I added a new relative layout inside "workersRelativeLayout" and I put inside it IV3 and TextView and set, for each one, "center in the parent" to TRUE. Then, I set for a new relative layout "align parent Top" and "align parent Right". This is the final result:

    Right number position

    This is new xml layout:

                <LinearLayout
                    android:id="@+id/workers_linearlayout"
                    android:layout_width="50dp"
                    android:layout_height="70dp"
                    android:layout_weight="1" >
    
                    <RelativeLayout
                        android:id="@+id/workers_relative_layout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center" >
    
                        <ImageView
                            android:id="@+id/imageView1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:src="@drawable/workers_small" />
    
                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_alignParentTop="true" >
    
                            <ImageView
                                android:id="@+id/imageView3"
                                android:layout_width="30dp"
                                android:layout_height="30dp"
                                android:layout_centerInParent="true"
                                android:src="@drawable/ic_cerchio_rosso" />
    
    
                            <TextView
                                android:id="@+id/workers_number"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerInParent="true"
                                android:text="9"
                                android:textAppearance="?android:attr/textAppearanceMedium" />
    
                        </RelativeLayout>
                    </RelativeLayout>
                </LinearLayout>
    

    Hope this helps someone :)

    EDIT

    Pay attention to parent width size. If you set weight's parent to 1, naturally size is dynamic according to display size. The image is positioned always at the center parent and relative Layout of IV3 and TextView will be always top|right. So if parent width size grows, the distance between image centered and new relative layout grows too, and can happen something like this:

    enter image description here