How to change status bar color in Sketchware?


Earlier code injection method was required for changing status bar color in sketchware. But now in newer versions of sketchware it can easily be done using add source directly block.

To change the status bar color in sketchware project, insert add source directly block in onCreate event in LOGIC of the project, and then write the following code.

Window w = this.getWindow();
w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); w.setStatusBarColor(Color.parseColor("#000000"));


Change the hex color code in last line of the code as per the requirement. It will change color of status bar to the color code provided in the code above.

This code has to be used on each screen of the app.

Note that this code works in Android versions 5 and above. When the app is used in lower versions, it may crash the app. Therefore, we should use if..else.. to apply this code in compatible versions. So the code should look like the one given below.

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {
Window w =this.getWindow();
w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); w.setStatusBarColor(Color.parseColor("#000000"));
}

How to show Status Bar in Fullscreen mode?

Method 1.
Set the theme of your sketchware project to Fullscreen.
Then use following code in onCreate event:
Window w = this.getWindow();
w.addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Method 2.
Set the theme of your sketchware project to NoActionBar.
Then use following code in onCreate event:

getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {
Window w = this.getWindow();
w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
w.setStatusBarColor(Color.parseColor("#33000000"));
}

Note that here in the color code #33000000, the number 33 indicates the amount of transparency. If it is 00 status bar will be completely transparent and if it is ff status bar will be completely opaque with color as set in the color code.

Comments

  1. This is great. Thanks bro.
    Pls can you make a tutorials about how to
    1 implement page loading progress in web browser?
    2. How to add bookmarks in the different page[within the app] / how to implement to get browser history in different page[app page]
    3.how to make user settings or data persistent
    4. How to implement floating buttom and able to create a note which will automatic add to scroll view on the same app page.

    I would be glad. Thnx

    ReplyDelete
    Replies
    1. The videos below may not be that clean but you can use the logic in them.
      Watch this for adding Bookmarks: https://youtu.be/8-LxBambpB0

      Watch this for adding history page:
      https://youtu.be/fqj_gWzAlAQ

      Delete
    2. For adding notes watch this: https://youtu.be/1_XKiotkVg8

      Delete
  2. how about a tutorial on changing an app theme to dark mode

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Enable Fullscreen for Youtube videos in WebView

Creating a Drawing View in Sketchware

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware