通知中的模拟器，设备，Android Studio布局差异

Question

I'm trying to layout a fragment for a notification... the emulator and layout in the Android Studio designer are fine.

(Emulator Example)

(Designer Example)

But when the app is run on the target device the layout is not aligned properly.

(Layout on Device)

The device is an s7 edge with resolution 1440*2560, screen size 5.5 inch, and 360dp smallest width.

I created an emulator based on these specs and am running the app on it.

The layout is in res folder layout-sw360dp-xxxhdpi

There are other layout folders:

layout-sw320dp-hdpi

layout-sw360dp-xhdpi

layout-sw360dp-xxhdpi

layout-sw411dp-xxxhdpi

I have tried scaling imageviews, fitxy, fitstart, etc...

I have carefully checked the density pixel sizes for each imageview, layout, and background.

Layout XML:

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/media_notification_large_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:padding="0dp">

<ImageView
android:id="@+id/note_far_left"
android:layout_width="6.5dp"
android:layout_height="112dp"
android:layout_alignParentLeft="true"
android:src="@mipmap/note_far_left" />

<ImageView
android:id="@+id/note_picture_top"
android:layout_width="133.5dp"
android:layout_height="13.5dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@id/note_far_left"
android:src="@mipmap/note_picture_top" />

<ImageView
android:id="@+id/note_picture"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_below="@id/note_picture_top"
android:layout_toRightOf="@id/note_far_left"
android:background="@drawable/silver_note"
android:src="@drawable/silver_note" />

<ImageView
android:id="@+id/note_picture_bottom"
android:layout_width="85dp"
android:layout_height="13.5dp"
android:layout_below="@id/note_picture"
android:layout_toRightOf="@id/note_far_left"
android:src="@mipmap/note_picture_bottom" />

<ImageView
android:id="@+id/note_title_text_top"
android:layout_width="172.75dp"
android:layout_height="6.5dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@id/note_picture_top"
android:src="@mipmap/note_title_text_top" />

<ImageView
android:id="@+id/note_picture_right_top"
android:layout_width="48.5dp"
android:layout_height="32.25dp"
android:layout_below="@id/note_picture_top"
android:layout_toRightOf="@id/note_picture"
android:src="@mipmap/note_picture_right_top" />

<ImageView
android:id="@+id/note_picture_right_bottom"
android:layout_width="14.25dp"
android:layout_height="66.25dp"
android:layout_below="@id/note_picture_right_top"
android:layout_toRightOf="@id/note_picture"
android:src="@mipmap/note_picture_right_bottom" />

<ImageView
android:id="@+id/note_title_text_bottom"
android:layout_width="172.75dp"
android:layout_height="13.5dp"
android:layout_below="@+id/note_title"
android:layout_toRightOf="@id/note_picture_right_top"
android:src="@mipmap/note_title_text_bottom" />

<TextView
android:id="@+id/note_shb1"
android:layout_width="68.5dp"
android:layout_height="13.25dp"
android:layout_below="@id/note_title_text_bottom"
android:layout_margin="0dp"
android:layout_toRightOf="@id/note_picture_right_bottom"
android:background="@mipmap/note_shb1"
android:fontFamily="@font/digital_7_mono"
android:gravity="center"
android:text="Shuffle"
android:textColor="@color/colorAccent"
android:textSize="9.25sp" />

<TextView
android:id="@+id/note_shb2"
android:layout_width="68.5dp"
android:layout_height="13.25dp"
android:layout_below="@id/note_title_text_bottom"
android:layout_margin="0dp"
android:layout_toRightOf="@id/note_shb1"
android:background="@mipmap/note_shb2"
android:fontFamily="@font/digital_7_mono"
android:gravity="center"
android:text="Hands Free"
android:textColor="@color/colorAccent"
android:textSize="9.25sp" />

<TextView
android:id="@+id/note_shb3"
android:layout_width="70dp"
android:layout_height="13.25dp"
android:layout_below="@id/note_title_text_bottom"
android:layout_margin="0dp"
android:layout_toRightOf="@id/note_shb2"
android:background="@mipmap/note_shb3"
android:fontFamily="@font/digital_7_mono"
android:gravity="center"
android:text="Bluetooth"
android:textColor="@color/colorAccent"
android:textSize="9.25sp" />

<ImageView
android:id="@+id/note_button_top"
android:layout_width="207dp"
android:layout_height="18dp"
android:layout_below="@id/note_shb1"
android:layout_toRightOf="@id/note_picture_right_bottom"
android:clickable="true"
android:scaleType="centerInside"
android:src="@mipmap/note_button_top" />

<ImageView
android:id="@+id/note_shuffle"
android:layout_width="34.25dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_picture_right_bottom"
android:clickable="true"
android:src="@drawable/note_shuffle_selector" />

<ImageView
android:id="@+id/note_back"
android:layout_width="34.25dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_shuffle"
android:clickable="true"
android:src="@drawable/note_back_selector" />

<ImageView
android:id="@+id/note_stop"
android:layout_width="34.25dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_back"
android:clickable="true"
android:src="@drawable/note_stop_selector" />

<ImageView
android:id="@+id/note_play"
android:layout_width="34.25dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_stop"
android:clickable="true"
android:src="@drawable/note_play_selector" />

<ImageView
android:id="@+id/note_next"
android:layout_width="34.25dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_play"
android:clickable="true"
android:src="@drawable/note_next_selector" />

<ImageView
android:id="@+id/note_hands"
android:layout_width="35.75dp"
android:layout_height="35dp"
android:layout_below="@id/note_button_top"
android:layout_toRightOf="@id/note_next"
android:clickable="true"
android:src="@drawable/note_hands_selector" />

<TextView
android:id="@+id/note_title"
android:layout_width="137dp"
android:layout_height="25.75dp"
android:layout_below="@id/note_title_text_top"
android:layout_margin="0dp"
android:layout_toRightOf="@id/note_picture_right_top"
android:background="@mipmap/note_title_text"
android:ellipsize="end"
android:fontFamily="@font/digital_7_mono"
android:gravity="center"
android:paddingStart="1dp"
android:paddingEnd="1dp"
android:singleLine="true"
android:text="@string/emergency_broadcast"
android:textColor="@color/colorAccent"
android:textSize="16sp" />

<ImageView
android:id="@+id/note_power"
android:layout_width="35.75dp"
android:layout_height="25.75dp"
android:layout_alignTop="@+id/note_title"
android:layout_toRightOf="@id/note_title"
android:clickable="true"
android:src="@drawable/note_power_selector" />

(edit: added code for notification builder) code to build notification:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
        builder.setStyle(new NotificationCompat.DecoratedCustomViewStyle());
    }else{
        builder.setStyle(new NotificationCompat.BigPictureStyle());
    }

            builder
            .setSmallIcon(R.drawable.icon)
            .setContentTitle(description.getTitle())
            .setSubText(metadataCompat.getText(MediaMetadataCompat.METADATA_KEY_DISPLAY_SUBTITLE))
            .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
            .setContentIntent(pContentIntent);



    return builder;

I'm out of ideas, what am I missing?

Answer 1

ensure that you have placed the slices image in the same dpi.

1- its better to achieve this using the xml drawable background of parent layout and add left rectangle top left.

2- using android:scaleType="FIT_XY" to achieve this.

https://developer.android.com/reference/android/widget/ImageView.ScaleType

Answer 2

Ensure that width of the @id/note_title_text_bottom equals to the sum of note_title and note_power in all your layout files (for all the screen sizes). Otherwise, something is not right with the @mipmap/note_title_text_bottom" for one of the densities. Anyway, it's better to use relative sizes and scale you drawables instead of using multiple layouts with absolute values, which is really hard to maintain and scale.