XML : Android: XML layout and custom view with different APIs

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>    

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?