CODEWITHSUNDEEP
androidandroid-layoutmaterial-designkotlinanko
yaymalaga
yaymalaga

Reputation: 53

Statusbar is not transparent but white

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

Upvotes: 4

Views: 1838

Answers (3)

manhong2112
manhong2112

Reputation: 21

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;
    }
}

Upvotes: 2

Shadab K
Shadab K

Reputation: 1755

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

Upvotes: 0

piotrek1543
piotrek1543

Reputation: 19351

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

Upvotes: 0

Related Questions