Question

I just completed an app which is working as expected but when i run it on API 19 ---> API 16, i get a distorted UI where some of the views will overlap each other, the arrangement is disorganized and when you open another activity, the last activity UI is shown below the current activity. This error is weird to me because when i tested the app on API 22 + , it was working fine.

I tried to figure out the error but couldn't because i can't tell where the error is which left me in a confused state.

Below is the Screenshots of the aforementioned UI Behavior.

The UI XML Files

Cardview_row_article.xml

    <?xml version="1.0" encoding="utf-8"?><!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    android:layout_marginTop="3dp"
    card_view:cardCornerRadius="3dp"
    card_view:cardPreventCornerOverlap="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardUseCompatPadding="true"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/art_image"
            android:layout_width="110dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:scaleType="fitXY"
            android:src="@drawable/loading_item_img"
            />

        <TextView
            android:id="@+id/art_title"
            android:layout_width="230dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:textAlignment="center"
            android:textSize="30dp"
            android:layout_alignTop="@+id/art_image"
           />

        <TextView
            android:id="@+id/art_subTitle"
            android:layout_width="220dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:textSize="15sp"
            android:textStyle="italic"
            android:textColor="@android:color/holo_red_dark"
            android:textAlignment="center"/>


    </RelativeLayout>
</android.support.v7.widget.CardView>

NewsDetail.xml

   <?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <!-- App Bar -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <!-- Collapser -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapser"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/image_paralax"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/kenny"/>

            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/CustomActionBar"

                />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.FloatingActionButton
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right|end"
            android:src="@drawable/ic_add"
            android:layout_margin="@dimen/fab_margin"
            android:clickable="true"/>


    </android.support.design.widget.AppBarLayout>



    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/app_bar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">


            <LinearLayout
                style="@style/Widget.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">


                <TextView
                    android:id="@+id/titleDetailTxt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:minLines="1"
                    android:text="Title"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:textSize="20dp"/>


                <TextView
                    android:id="@+id/detailDetailTxt"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="DATE"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

                <TextView
                    android:id="@+id/timeDetailTxt"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minLines="4"
                    android:padding="2dp"
                    android:text="details"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#0f0f0f" />


            </LinearLayout>


        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabsocial"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_share"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>


</android.support.design.widget.CoordinatorLayout>

EmergencyActivity.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:support="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.domain.navdrawer.InerFragment"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
      android:orientation="vertical" >

        <ImageView
            android:id="@+id/emer_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/emergencyback"
            android:layout_marginTop="6dp"
            />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/emertop"
        android:text="Emergency Report"
        android:textSize="25sp"
        android:textColor="@color/Color_Red"
        android:gravity="center"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_layout_name"
      >

        <EditText
            android:id="@+id/input_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/question_name_input_hint"
            android:inputType="textAutoComplete" />
    </android.support.design.widget.TextInputLayout>

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <RadioButton
        android:id="@+id/emergency_type_fire"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/type_fire" />
    <RadioButton
        android:id="@+id/emergency_type_accident"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/type_accident" />
    <RadioButton
        android:id="@+id/emergency_type_robbery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/type_robbery" />

    <RadioButton
        android:id="@+id/emergency_type_others"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/type_other" />

</RadioGroup>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_emergency"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >



        <EditText
            android:id="@+id/input_emergency"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="@string/hint_emergency" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input_email"
            android:layout_width="match_parent"
            android:inputType="textEmailAddress"
            android:layout_height="wrap_content"
            android:hint="@string/hint_mobile" />
    </android.support.design.widget.TextInputLayout>

    </LinearLayout>


    <Button
        android:id="@+id/btn_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        android:layout_centerHorizontal="true"
        android:textColor="@color/finestWhite"
        android:background="@android:color/holo_red_dark"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        />

    </LinearLayout>

Answer 1

Well, i finally figured out the fix to the UI glitches.

All you have to do is Set the background of the root activity to 'White' in your activity xml files.

Thats just it!

App UI gets distorted on API 19 below

Cardview_row_article.xml

NewsDetail.xml

EmergencyActivity.xml

1 个答案: