Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 259
kinghomer Avatar asked Nov 03 '22 13:11

kinghomer


1 Answers

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

like image 112
kinghomer Avatar answered Nov 14 '22 23:11

kinghomer