XML layout with different Android APIs

Question

I have been testing my app against different APIs on Android.

I have tested it against API 17 - 22.

For API 17 & 18, I don't understand but the XML layout seems to display differently in the preview pane than what is on the emulator.

I'm using Genymotion Emulator API 18 (768 X 1280) and API 17 (768 X 1280).

This is what the picture looks like on the preview pane:

It is a perfectly rounded imageview, the XML of which is below:

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/group_container">

        <com.example.simon.customshapes.CircularImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/circle"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="8dp"
            android:id="@+id/groupicon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="G"
            android:id="@+id/group_letter"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            android:textSize="24sp"/>

    </RelativeLayout>

    <TextView
        android:layout_toRightOf="@+id/group_container"
        android:layout_toEndOf="@+id/group_container"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:id="@+id/name"
        tools:text="Golf"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:id="@+id/group_desc"
        tools:text="Sports"
        android:layout_below="@+id/desc"
        android:layout_alignLeft="@+id/name"
        android:layout_alignStart="@+id/name" />

</RelativeLayout>

This is the XML for the drawable loaded into the circularImageView:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/primary"/>
    <size android:width="80dp" android:height="80dp"/>
</shape>

The code for the CircularImageView can be found on google:

package com.example.simon.customshapes;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by Simon on 2015/07/25.
 */
public class CircularImageView extends ImageView {

    public CircularImageView(Context context) {
        super(context);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        //getting the padding adjustments
        int w = getWidth(), h = getHeight();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();

        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth() / factor), (int) (bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

}

This is what it looks like on the actual emulator:

You can see the circle is squashed.

When I run this app on emulator API 19 - 22 (1080 X 1920), the emulator displays the circularImageView as it is displayed in the preview pane.

At first I thought maybe it was screen size problem as API 19 - 22 are on 1080 X 1920 and API 17 - 18 are on 768 X 1280 but then I changed the size of the emulator of API 17 & 18 to 1080 X 1920 and it still display the same squashed circle.

Is there a reason why API 17 - 18 does not display my circle correctly?

Answer 1

I finally managed to solved this by replacing the margin settings with paddings for the different items in my xml like so:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/group_container">

    <com.example.simon.customshapes.CircularImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@drawable/group_circle"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        android:id="@+id/groupicon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="G"
        android:id="@+id/group_letter"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:textSize="24sp"/>

</RelativeLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/group_container"
    android:layout_toEndOf="@+id/group_container"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"
        android:id="@+id/group_name"
        tools:text="Golf"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12sp"
        android:id="@+id/group_desc"
        tools:text="Sports" />

</LinearLayout>

I'm not sure why the lower API's do not respect the margin settings but padding my xml correctly achieve the correct effect in both the higher API's and the lower ones.