Android drawable oval with image drawn differently on design view and device

Question

I have an XML drawable that draws a red circle and centres a microphone image in the middle of it. I then have it on top of a relatively layout background. However, the design view layout looks exactly like I want it to, the device layout does not. Where is the discrepancy?

Drawable XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:width="125dp"
        android:height="125dp"
        android:gravity="center"
        >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="oval"
            >
            <solid android:color="#FD91B5" />

            <!--
            <stroke
                android:width="10dp"
                android:color="#" />
                -->
        </shape>
    </item>

    <item
        android:gravity="center"
        android:width="26dp"
        android:height="44dp"
        android:drawable="@drawable/kiosk_microphone"
        />

</layer-list>

View XML (Look for the ImageButton)

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/kiosk_bg_default_view">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:text="Close"
        android:id="@+id/kiosk_close_button"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentTop="true" />

    <ImageButton
        style="@style/Base.Widget.AppCompat.ActionButton"
        app:layout_widthPercent="34%"
        app:layout_heightPercent="34%"
        android:scaleType="fitCenter"
        android:src="@drawable/kiosk_record_circle"
        android:id="@+id/kiosk_record_button"
        app:layout_marginTopPercent="33%"
        app:layout_marginLeftPercent="23%"

        />

    <LinearLayout
        app:layout_marginTopPercent="10%"
        app:layout_marginLeftPercent="5%"
        android:orientation="vertical"
android:background="@android:color/darker_gray"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="20%"
        >


        <me.grantland.widget.AutofitTextView
            android:text="3:45 PM"
            android:textSize="45sp"
            android:textColor="#B9CFDF"
            android:id="@+id/time_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:maxLines="1"
            android:layout_weight="1"
            />
        <me.grantland.widget.AutofitTextView
            android:text="Monday, December 15th, 2016"
            android:textSize="10sp"
            android:textColor="#B9CFDF"
            android:id="@+id/date_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:maxLines="1"
            android:layout_weight="3"
            />
    </LinearLayout>

    <LinearLayout
        app:layout_widthPercent="25%"
        app:layout_heightPercent="20%"
        app:layout_marginTopPercent="10%"
        app:layout_marginLeftPercent="60%"

        android:orientation="vertical"
        android:background="@android:color/darker_gray"
        >

        <me.grantland.widget.AutofitTextView
            android:text="25 deg"
            android:textSize="45sp"
            android:textColor="@android:color/white"
            android:id="@+id/weather_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:maxLines="1"
            android:gravity="center"
            />
        <me.grantland.widget.AutofitTextView
            android:text="Island Park, NY"
            android:textSize="10sp"
            android:textColor="@android:color/white"
            android:id="@+id/location_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center"
            android:maxLines="1"
            />
    </LinearLayout>
</android.support.percent.PercentRelativeLayout>

I want this

But I get this

Answer 1

Doing something like :

android:width="125dp"
android:height="125dp"

And:

android:width="26dp"
android:height="44dp"

And on the button:

android:layout_height="60dp"

Is destined to backfire on you, because it will not look the same on different devices. Especially if you try to combine a few different items together each of whom has some random values like this. This is due to a significant discrepancy in screen sizes and screen densities among Android devices. You can make it work on one screen properly, and yet it can look completely different on other screens.

For this kind of thing, since you basically need an icon, you can use a drawable or an SVG file.

EDIT

As an alternative solution, I thought of using this SVG as the src of your imageButton and the button should have the custom circular shape like in this answer.

Answer 2

circularbutton.xml in your drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="oval">
        <solid android:color="#FD91B5"/>
    </shape>
</item>
<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="#FD91B9"/>
    </shape>
</item>

Edit the color for Pressed State as per your wish.

Add circularbutton.xml to your ImageView

<ImageButton
    style="@style/Base.Widget.AppCompat.ActionButton"
    app:layout_widthPercent="34%"
    app:layout_heightPercent="34%"
    android:scaleType="fitXY"
    android:src="your_image"
    android:background="@drawable/circularbutton"
    android:id="@+id/kiosk_record_button"
    app:layout_marginTopPercent="33%"
    app:layout_marginLeftPercent="23%"
 />

If scaleType doesn't work, you can apply padding to make the icon smaller.