1

I'm building my mobile application using Xamarin.Forms, and i currently have problem with setting the status bar in Android platform to be completely transparent (like this post here)

Because i am using xamarin.forms so i just want to handle this using Android's styles.xml

I have already read through this post(Android Completely transparent Status Bar?) as well as some others similar posts and tried the same way but i still could not get it to work properly.

Here is my styles.xml :


  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <style name="SplashTheme" parent="MainTheme.Base">
    <item name="android:windowBackground">@drawable/splash_screen</item>
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">#2196F3</item>
    <item name="colorPrimaryDark">#1976D2</item>
    <item name="colorAccent">#FF4081</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>

    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>

    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>

  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

and here is my splash screen xml :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <bitmap
        android:src="@drawable/splash"
        android:tileMode="disabled"
        android:gravity="fill_horizontal|fill_vertical"
        />
  </item>
</layer-list>

I was able to get my desired result with the status bar, however there still a problem with navigation bar. Images here: Splash Screen

Screen

As you can see in the image, the navigation bar take up the space of my app content.

Also when i change android:windowTranslucentNavigation to false, it produce a result like this image here, the position of the bars are correct but the color sucks after

Also i need to change the content color of the bars to darker color, not white like these images.

So my question is how can i get my status bar color to be completely transparent and my navigation bar to be translucent like in my first 2 images, and their position like in my last image, just by setting in styles.xml

I appreciate all your help.

Lê Gia Lễ
  • 510
  • 3
  • 10
  • 24
  • 1
    Might be kind of lazy but if no one else comes up with an answer you could just add padding on the bottom and top so it doesn't overlap – George May 22 '19 at 04:19
  • 1
    When you set status bar/navigation bar to translucent it will ignore color. So step 1, disable translucent navigation. `false` Next, your window is responsible for drawing content behind status and navigation bars. I suggest you simplify your question to something like "how do I draw behind status bar and navigation bar" so people don't come in, suggesting step 1 and leaving (like I was about to). – Eugen Pechanec May 22 '19 at 04:23

0 Answers0