UI Compatibility Issues Between Different API Versions

Question

I am working on an app which utilizes a Navigation Drawer (which I generated from Android Studio's Activity template), which uses fragments internally. The Navigation Drawer is nested into my MainActivity. I have also included a menu into the toolbar which has two more options; Filter & Settings (Settings generated from AS template too). I ran into issues when I tested the app between APIs 19 and 24.

My LoginActivity uses the drawableLeft attribute along with a drawableTint (which I'm aware only works for API23 and higher). How can I get the drawableLeft icon to display in white on older versions?

My second, more major issue, concerns the Toolbar and its compatibility. In API 24 (simulated using Nexus 5X), the Toolbar is well-aligned underneath the Status Bar, whereas in API 19, the Toolbar goes underneath the Status Bar which also has a mismatched colour. Now, I am aware that the Toolbar is a new addition to Material Design hence being supported from API 23+ (I think), but what would be the correct approach in fixing this?

app_bar_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.michael.whatsupldn.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/london_skyline_dark"
        android:layout_alignParentTop="true"
        android:id="@+id/imageView"
        android:contentDescription="@string/london_skyline"/>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:fitsSystemWindows="true"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <include layout="@layout/content_main" />

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

Any help will be much appreciated!

P.S. If any code is needed to help the analysis, just ask away.

EDIT

I have also encountered the same Toolbar problem within my FilterActivity...

UPDATE

After applying fitsSystemWindows to AppBarLayout and CoordinatorLayout, this is the following result, which has not fixed my issue. It has actually made the case worse as it destabilised the output in API 24.

For 1st issue: are you setting color of drawable like @color/white or #ffffff? — Usman Rana, Jul 20 '17 at 11:17
@UsmanRana I'm setting it this way: android:drawableTint="#FAFAFA" — AndroidDevBro, Jul 20 '17 at 11:41

score 2 · Answer 1 · answered Jul 20 '17 at 12:16

2

I think your vector code is like this.....

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="@color/colorWhite"
    android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 
    0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 
    -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 
    -2,-2zM8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1s3.1,1.39 
     3.1,3.1v2L8.9,8L8.9,6zM18,20L6,20L6,10h12v10z"/>
 </vector>

change this line of code

     android:fillColor="@color/colorWhite"

to.....

     android:fillColor="#FFFFFF"

If I am not wrong this is the solution for you.

answered Jul 20 '17 at 12:16

Arnab Kundu

1,287
2
12
17

Yes, that worked - thank you so much, great answer! Have you by any change looked at the second issue I've mentioned? – AndroidDevBro Jul 20 '17 at 12:48
https://stackoverflow.com/questions/26532045/tinting-checkbox-on-pre-v21 – Arnab Kundu Jul 20 '17 at 13:44
You can go through this link this is related with buttonTint.But for checkbox I have used. Not sure it will work for you or not. – Arnab Kundu Jul 20 '17 at 13:45

score 1 · Answer 2 · answered Jul 20 '17 at 11:42

1

How can I get the drawableLeft icon to display in white on older versions?

You can make use of DrawableCompat:

Drawable drawable = getResources().getDrawable(R.drawable.some_drawable);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), getResources().getColor(android.R.color.white));

^Source

What would be the correct approach in fixing this (toolbar allignment)?

Apply android:fitsSystemWindows="true" to both Toolbar and its parents.

answered Jul 20 '17 at 11:42

azizbekian

60,783
13
169
249

Ok, I have included in the Toolbar now, but what would its parent be? I have included my XML code for the app_bar... – AndroidDevBro Jul 20 '17 at 11:57
Apply `fitsSystemWindows` to `AppBarLayout` and `CoordinatorLayout`. – azizbekian Jul 20 '17 at 11:58
Please take a look at my post, I've updated it with the output. It has not worked for me. – AndroidDevBro Jul 20 '17 at 12:12
@Programmer101, apply styles as specified in [this](https://stackoverflow.com/a/28041425/1083957) answer. – azizbekian Jul 20 '17 at 12:22
I've taken a look at the answer, however, that doesn't seem to help me as it's focused towards transparency, whereas what I'm looking for is help with `ActionBar` / `toolbar` layout compatibility. – AndroidDevBro Jul 21 '17 at 09:56

score 1 · Answer 3 · answered Jul 20 '17 at 12:19

1

You can set color programmatically and it would work for you:

// 0=left, 1=top , 2=right , 3=bottom
    editText.getCompoundDrawables[0].mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP);

answered Jul 20 '17 at 12:19

Usman Rana

2,067
1
21
32

score 0 · Accepted Answer · answered Jul 21 '17 at 14:01

Issue #1 was fixed thanks to Arnab Kuntu.

Issue #2 I managed to thankfully find a solution for myself when playing around with the themes within styles. My AppTheme had the following declaration nested within <item name="android:windowTranslucentStatus">true</item>, making the Status bar transparent, which makes the simulator think there is no foundation to support the Action Bar / Toolbar resting underneath.

UI Compatibility Issues Between Different API Versions

4 Answers4