Forum Xamarin.Forms

Status bar and Action bar transparent in Android

RaisaRaisa BRMember ✭✭
edited November 2016 in Xamarin.Forms

Hello guys,
I am developing an application in Xamarin Forms, I am trying to set in the Android status bar and transparent bar action with an image that will overlap. As in the image below. Any idea? thanks

Answers

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    @Raisa I don't think that's possible with the current implementation of AppCompat (at least not in a non-hacky native way). Android offers different layouts and elements to achieve all of the above, but XF is still using a relative layout as the topmost container.

  • RaisaRaisa BRMember ✭✭

    I'm using XF, but I'm implementing this directly on android

    MainActivity

    if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Lollipop)
    {
    Window.AddFlags(WindowManagerFlags.LayoutNoLimits);
    Window.AddFlags(WindowManagerFlags.LayoutInScreen);
    Window.DecorView.SetFitsSystemWindows(true);
    }

    the navigation bar is transparent but the status bar turns gray

  • HelgeKeckHelgeKeck DEMember ✭✭

    did you find a solution for this?

  • RaisaRaisa BRMember ✭✭

    Still can not find a solution

  • MengyuLiMengyuLi USMember ✭✭
    edited January 2017

    I use xamarin.android.
    The code below can achieve this:

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

  • matt4pimatt4pi USMember ✭✭

    @MengyuLi said:
    I use xamarin.android.
    The code below can achieve this:

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

    If I add this, it hides the ActionBar throughout the entire app, which is not desirable.

  • VinayakGawasVinayakGawas USMember ✭✭✭

    Try using this.

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

  • HelgeKeckHelgeKeck DEMember ✭✭

    hey Guys, Raisa wants to do that with Xamarin.Forms and not with Xamarin.Android. Just saying

  • RaisaRaisa BRMember ✭✭

    Yes, I want to do using Xamarin Forms project, but I can do this directing in the Android project.

    The Status bar was transparent, but I also wanted the back button to stay on top of the image, overlapping it, just like the image I added.

    Has anyone ever managed to do this using Xamarin?
    thanks

  • gunnarhalengunnarhalen BRMember

    @Raisa said:
    Yes, I want to do using Xamarin Forms project, but I can do this directing in the Android project.

    The Status bar was transparent, but I also wanted the back button to stay on top of the image, overlapping it, just like the image I added.

    Has anyone ever managed to do this using Xamarin?
    thanks

    Hi @Raisa

    Try this line at your styles.xml:

    true

    Worked for me. ;)

  • VinayakGawasVinayakGawas USMember ✭✭✭

    @gunnarhalen Heyyy your line got cut i guess. Can you please post it again.

  • gunnarhalengunnarhalen BRMember

    @VinayakGawas Sorry!

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

  • NickKovalskyNickKovalsky USMember ✭✭✭

    did you guys manage to do it? in master-detail context my menu bar turns kinda grey, color of window background or something, the point is the detail page is not expanding to the upper space of the menu bar. Need another hack to expand .Forms detail page to the now available upper space..

  • yanbodangyanbodang AUMember

    Hey guys, did you solve this problem? I faced the same one.
    Thanks

  • MarlonRibeiroMarlonRibeiro USMember ✭✭✭

    @Raisa try to add these lines inside your Lollipop verification:
    var statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
    statusBarHeightInfo.SetValue(this, 0);

  • batmacibatmaci DEMember ✭✭✭✭✭

    @gunnarhalen said:
    @VinayakGawas Sorry!

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

    This is not exactly doing what she wants. It only makes status bar Translucent but still there is action bar overlapping the image.

  • Damien_DoumerDamien_Doumer Member ✭✭

    To make the action bar transparent and allow your images to be seen, go to your android styles and add this
    <item name="android:windowTranslucentStatus">true</item>

  • MrDaneeyulMrDaneeyul Member ✭✭

    To clarify, windowTranslucentStatus makes the status bar translucent/transparent. However, if you don't want action bars or toolbars at the top of the screen to be partially covered by the translucent status bar, you also need fitsSystemWindows. So:

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:fitsSystemWindows">true</item>
    
  • ulrichxycoulrichxyco Member ✭✭

    This is the approach that worked for me.

    Add this line in your custom theme in styles.xml

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

    Then on every layout, add this line to the layout that contains the xmlns:adroid="h t t p://schemas.android.com/apk/res/android"

    android:fitsSystemWindows="true"

    This approach will make your status bar transparent, your ToolBar/ActionBar in the proper position and not distort the AlertDialog at the same time.

  • ulrichxycoulrichxyco Member ✭✭

    @MrDaneeyul said:
    To clarify, windowTranslucentStatus makes the status bar translucent/transparent. However, if you don't want action bars or toolbars at the top of the screen to be partially covered by the translucent status bar, you also need fitsSystemWindows. So:

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:fitsSystemWindows">true</item>
    

    Thanks! This works if you are not planning to use any AlertDialogs, putting android:fitsSystemWindows in the style, distorts the position of the Title and Message of the AlertDialog. You can instead put this on every layout.

  • KayKuoKayKuo Member ✭✭✭

    @Raisa Hi ,although it has been a long time, have you solved this problem? I also have the same needs.

Sign In or Register to comment.