Android UI compatibility issue

Question

I'm a beginner in Android. Currently, working on a self-project. Built one user profile page which is rendering fine on Nexus 5 Emulator but not on Nexus 4 Emulator.

Here are the Screenshots from both the Emulator.

From Nexus5 Emulator

From Nexus4 Emulator

The difference in Nexus4 Emulator are...

the top Header bar with Back Button is missing which you can see in Nexus5 Emulator.
the profile picture is going back of red background.

Here are Source codes...

activity_user_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.bhramaan.android.bhramaan.UserProfileActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_user_profile" >

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

        <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar" />

        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/profile_header_background" />

        <ImageButton
            android:id="@+id/user_profile_photo"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-60dp"
            android:background="@drawable/profile_circular_border_imageview"
            android:elevation="5dp"
            android:padding="20dp"
            android:scaleType="centerCrop"
            android:src="@drawable/default_profile_new" />

        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#ebca0707"
            android:elevation="4dp"
            android:paddingBottom="24dp">

            <TextView
                android:id="@+id/user_profile_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="76dp"
                android:text="Suresh Kumar Majhi"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/user_profile_short_bio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/user_profile_name"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="12dp"
                android:text="Write codes and explore the world"
                android:textColor="#fff"
                android:textSize="14sp" />
        </RelativeLayout>


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/profile_layout"
            android:layout_marginTop="5dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp"
                android:text="Android Profile UI Design" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_marginBottom="3dp"
                android:layout_marginTop="3dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp"
                android:text="Android Profile XMl UI Design" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp"
                android:text="Android Profile UI Design" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_marginBottom="3dp"
                android:layout_marginTop="3dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp"
                android:text="Android Profile XMl UI Design" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="20dp"
                android:text="Android Profile UI Design" />
        </LinearLayout>
    </RelativeLayout>
</ScrollView>

UserProfileActivity.java

package com.bhramaan.android.bhramaan;

import android.app.ActionBar;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class UserProfileActivity extends AppCompatActivity {

    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user_profile);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    public boolean onCreateOptionsMenu(Menu menu) {
        return true;
    }
}

profile_circular_border_imageview.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="100dp" />
    <solid android:color="#41ba7a" />
    <stroke
        android:width="3dip"
        android:color="#f9f9f9" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

My Gradle Dependancies

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "24.0.0"

    defaultConfig {
        applicationId "com.bhramaan.android.bhramaan"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
    compile 'com.mcxiaoke.volley:library:1.0.19'
    compile 'com.roughike:bottom-bar:2.0.2'
}

Anyone, please help me to understand what's I'm doing wrong.

@mohammadrezakhalifeh Thanks for your quick reply. I've updated my post with Gradle dependencies now. — Suresh, Oct 13 '16 at 14:14
try to rebuild your project ...in answers people mentioned backward compatibility for material design, at first i geussed same but you've added appcompat-v7 and its may not be a problem — mohammadreza khalifeh, Oct 13 '16 at 14:45
After following @knossos suggestion of re-ordering the Profile Image XML element fixed the issue. Now, I need to fix the toolbar thing. I think I can fix that. — Suresh, Oct 13 '16 at 14:50

score 3 · Accepted Answer · answered Oct 13 '16 at 14:31

3

You have different results for each emulator because one emulator is targeting API 23 Marshmallow and one is targeting API 19 (Kitkat).

Kitkat does not support elevation, so when you add it in your XML it will do nothing. You should be getting Lint warnings about that.

To fix it, just move your profile image XML element down below the @id/profile_layout RelativeLayout.

You will need to share @layout/tool_bar to solve the issue with it being missing. But I would wager it is using elevation too.

answered Oct 13 '16 at 14:31

Knossos

15,802
10
54
91

After changing the order of Profile Image XML element it's now working fine in Nexus4 Emulator. Yeah, I'm using elevation in that ```toolbar``` also. As new to the android world don't know a lot of such things. I'll try to fix that toolbar thing on my own. Thanks for the guidance. – Suresh Oct 13 '16 at 14:43
@mi6crazyheart No problem, for a new Android coder - you are doing well. There are tons of "gotchas" with Android and API levels. Just make sure you don't turn off Lint - it will tell you when there is an issue most of the time. – Knossos Oct 14 '16 at 05:11

score 2 · Answer 2 · answered Oct 13 '16 at 14:32

The profile picture remains behind because you use elevation to put it in front of other layout, but you can use elevation only on API level 21 or higher.

Your nexus 4 use API Level 19

You can change the order in the layout and put the ImageView after the red box.

Android UI compatibility issue

2 Answers2