XML layout with different Android APIs

Issue

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?

Solution

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.

Answered By - Simon