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

I edited my answer, hoping that this alternative may work for you... — Vucko, Jun 29 '16 at 18:47

score 1 · Answer 1 · edited May 23 '17 at 12:16

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.

edited May 23 '17 at 12:16

Community

1
1

answered Jun 29 '16 at 15:23

Vucko

7,371
2
27
45

Okay. So basically give up on trying to do it in Android layer list because you'll never get the two to resize with a ratio and instead make a vector image? – Mikey A. Leonetti Jun 29 '16 at 15:25
Well, unless someone here can offer a solution on how to do it, the answer is yes. I know I had tried to do similar things like this a while ago, and never quite managed to make them work exactly the same on each device. – Vucko Jun 29 '16 at 15:26

score 1 · Answer 2 · answered Jun 29 '16 at 15:26

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.

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

2 Answers2