PercentRelativeLayout okay on Emulator, not okay on phone

Question

I've just implemented PercentRelativeLayout. I've added: compile 'com.android.support:percent:24.2.0' to the gradle so Android Studio at least recognizes the view. And added the Google API.

I'm having rendering problems. In the emulator, my display works fine. Installed on an older phone running Android 4ish, TextViews appear but not image views.

In the preview render (in design tab) the ImageViews show when I switch to API 23, but not API 24.

I feel like this was just working. Any known fixes to this? Unfortunately the view is essential to scale my layout.

EDIT: The preview suddenly works again with several restarted of android studio. Didn't change anything else.

The layout works in preview all the way back to API 16 but still not working on phone. ImageViews don't show up.

XML Below

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.y"
tools:showIn="@layout/app_bar_main"
android:background="#FFF"
android:weightSum="1"
android:orientation="vertical">

 <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollView"
    android:scrollIndicators="top">

    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="This text appears correctly"
            android:textSize="28sp"
            android:id="@+id/textMainTitle"
            android:layout_gravity="center"
            android:layout_alignParentTop="true"
            android:textColor="#ffffff"
            android:singleLine="true"/>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="As does this text"
            android:id="@+id/textMainSubTitle"
            android:layout_gravity="center_horizontal"
            android:layout_below="@id/textMainTitle"
            />


        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnIntro"
            android:src="@drawable/button1" //DOES NOT APPEAR IN PHONE
            app:layout_widthPercent="30%"
            app:layout_heightPercent="25%"
            android:layout_below="@id/textMainSubTitle"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp" />

   </android.support.percent.PercentRelativeLayout>

 </ScrollView>


</LinearLayout>

Answer 1

Inspired by BR89, the solution to my issue was actually use "android:src" instead of "app:srcCompat" and also specifying "0dp" on "android:layout_width"

But putting both "app:layout_widthPercent" and "app:layout_heightPercent" will not have any issue on my physical device though.

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash">
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="25%"
        app:layout_marginLeftPercent="25%"
        android:src="@drawable/logo"/>
</android.support.percent.PercentRelativeLayout>

Answer 2

Finally figured this out. Problem was actually in the XML. Posting here for reference in hopes someone will find it helpful in the future.

The problem came from setting layout_heightPercent and layout_widthPercent. For some reason this does not allow the view in question to display. I do not believe it has anything to do with scaling the aspect ratio as the problem exists with buttons as well (with no aspect ratio to maintain.)

But if you're having visibility problems with a PercentRelativeLayout, see below.

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/btnIntro"
        android:src="@drawable/button1" 
        app:layout_widthPercent="30%"       // MUST SET ONE 
        app:layout_heightPercent="25%"      // OR OTHER NOT BOTH
        android:layout_below="@id/textMainSubTitle"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp" />