4

To test kotlin with anko DSL I decided to start a new proyect in last android studio ide (2.1.3), using kotlin plugin (1.0.3) and latest anko library (0.9)

I used the default proyect Navigation Drawer Activity, so I just had to convert the main xml to anko.

This is the xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <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" >

        <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            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"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" >

            <TextView
                android:text="Hello World!"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </RelativeLayout>

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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

And it is working perfectly, as you can see here: [xml]

With anko, I tried to copy every detail from the xml, getting this code:

class MainActivityUi: AnkoComponent<MainActivity> {
    override fun createView(ui: AnkoContext<MainActivity>) = with(ui) {

        drawerLayout {
            id = R.id.drawer_layout
            fitsSystemWindows = true

            coordinatorLayout {

                appBarLayout(R.style.AppTheme_AppBarOverlay) {

                    toolbar {
                        id = R.id.toolbar
                        backgroundColor = colorAttr(R.attr.colorPrimary)
                        popupTheme = R.style.AppTheme_PopupOverlay
                    }.lparams(height=dimenAttr(R.attr.actionBarSize),width=matchParent)

                }.lparams(width=matchParent)

                relativeLayout {
                    padding = dip(16)

                    textView("Hello World!")

                }.lparams(height=matchParent,width=matchParent) {
                   behavior = AppBarLayout.ScrollingViewBehavior()
                }

            }.lparams(height=matchParent,width=matchParent)

            navigationView {
                id = R.id.nav_view
                inflateHeaderView(R.layout.nav_header_main)
                inflateMenu(R.menu.activity_main_drawer)

            }.lparams(height=matchParent) {
                gravity = Gravity.START
                fitsSystemWindows = true
            }
        }
    }
}

And instead, I'm getting this white statusbar: anko

The only changes I did was in the MainActivity change the setContentView(R.layout.activity_main), to MainActivityUi.setContentView(this).

So, my question is, why is this happening when they are the same views and layouts? and how can I fix that?

EDIT: I'm using the default proyect that it's created when in Android Studio you choose new proyect, and then you choose DrawerNavigationActivity. If in setContentView I choose to show the xml's view, the statusbar is blue (first screenshot), but if I choose to show the anko's view I get the white statusbar.

In both cases, I'm using same themes, colors, etc, and when using the xml layout, everything is working perfectly, so it must be an anko's problem

yaymalaga
  • 53
  • 1
  • 6
  • have you tried to set fitsSystemWindows = true to appBarLayout? – Stepango Sep 06 '16 at 03:42
  • Exactly the same problem here, I put just a `Drawer`, the status bar had a white background out there. idk, but with xml it works quite fine. – MewX Jan 19 '17 at 10:18

3 Answers3

2

Try to do

window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)

inside onCreate()

it worked for me

Reference

EDIT: Also My Code

drawerLayout {
  lparams(width = matchParent, height = matchParent)

  coordinatorLayout {
     setPadding(0, dip(24), 0, 0)

     appBarLayout {
        toolbar {
           backgroundColor = primaryColor
           setTitleTextColor(primaryColorText)
        }.lparams(width = matchParent, height = dip(toolbar_size))

     }.lparams(width = matchParent, height = dip(toolbar_size))

  }.lparams(width = matchParent, height = matchParent)

  navigationView {

  }.lparams(width = dip(302), height = matchParent) {
     gravity = Gravity.START
  }
}

EDIT 2: By looking at the source code of androidx, they add some code to handle "fitsSystemWindows". We can copy and paste to archive the same effect. Although Anko is dead, it still useful to create Drawerlayout programmatically (and with any other DSL library)

if (ViewCompat.getFitsSystemWindows(this)) {
    if (Build.VERSION.SDK_INT >= 21) {
        setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {
            @Override
            public WindowInsets onApplyWindowInsets(View view, WindowInsets insets) {
                final DrawerLayout drawerLayout = (DrawerLayout) view;
                drawerLayout.setChildInsets(insets, insets.getSystemWindowInsetTop() > 0);
                return insets.consumeSystemWindowInsets();
            }
        });
        setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        final TypedArray a = context.obtainStyledAttributes(THEME_ATTRS);
        try {
            mStatusBarBackground = a.getDrawable(0);
        } finally {
            a.recycle();
        }
    } else {
        mStatusBarBackground = null;
    }
}
manhong2112
  • 21
  • 1
  • 4
0

You're wrong thinking that the status bar is transparent by default.

According to this image

enter image description here

taken from Android Developers Reference. Check: https://developer.android.com/training/material/theme.html

the status bar color depends on what you have defined in colors.xml or styles.xml in values folder as colorPrimaryDark, so it's not transparent.

Your problem is not white color in status bar which is correct for transparency, but not enough knowledge of using themes in Android applications.

EDIT: Changing status bar color (Java):

Window window = activity.getWindow();

// clear FLAG_TRANSLUCENT_STATUS flag:
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

// add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

// finally change the color
window.setStatusBarColor(activity.getResources().getColor(R.color.my_statusbar_color));

or

 public void setStatusBarColor(View statusBar,int color){
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
           Window w = getWindow();
           w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
           //status bar height
           int actionBarHeight = getActionBarHeight();
           int statusBarHeight = getStatusBarHeight();
           //action bar height
           statusBar.getLayoutParams().height = actionBarHeight + statusBarHeight;
           statusBar.setBackgroundColor(color);
     }
}

Hope it will help

piotrek1543
  • 19,130
  • 7
  • 81
  • 94
  • I don't really think themes are the problem, as I have I'm using the default example proyect "Navigation Drawer Activity" from Android Studio's new proyect. If I compile the app, with setContentView(R.layout.activity_main), it load's the xml's view (the first screenshot I did), and, if instead of that, I set MainActivityUi().setContentView(this), the anko's view is loaded, and it shows like the second picture I did, so theme seems to be fine – yaymalaga Sep 02 '16 at 18:18
  • I've edit my question too, thanks for the help anyways, but transparency is working fine with the xml, so the problem has to be anko's DSL related – yaymalaga Sep 02 '16 at 18:25
  • nope, that's not problem with anko. Write the same in java and you would find the same effect. Anko was made to ommit `xml` files due to increase the app performance – piotrek1543 Sep 02 '16 at 18:42
  • exactly, that's the anko point, so how do you explain that with the xml's layout the transparency is working fine and with the anko's one isn't? It should be the same – yaymalaga Sep 02 '16 at 19:13
  • i don't see in your code changing status bar color. I only see changing color of toolbar – piotrek1543 Sep 02 '16 at 19:57
  • Yeah now I understand what are you talking about. Let me explain, my statusbar color is set to transparent in styles, so when you use the xml layout, the statusbar takes the color of the toolbar, but, when I use anko, it doesn't, and it shows the white, so there must be some problem in my anko layout as the statusbar is taking the color of some element that it's not the toolbar, and this is what I don't understand, as my anko's layout is just the same as the xml's one – yaymalaga Sep 02 '16 at 20:39
0

It is not your statusbar color issue.
Correct me if I am wrong, I believe you are using the Cyanogenmod OS 13.0 edition by the looks of your battery symbol. Switch it back to the default theme in your themes section. Then report back if the issue still persists with your colors.xml file.


Refer this link here for your Kotlin translucent status bar issue.
https://github.com/fython/MaterialStatusBarCompat

Shadab K
  • 1,677
  • 1
  • 16
  • 25