shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.FormsでAndroidのステータスバーを半透明にする

追記

この記事はNavigationPageを使う場合には有効だけれども,Shellを使う場合は有効ではない.

ShellのNavigationBarの色を変更するには以下の記事にあるように,Android側のMainActivity.csでWindow.SetStatusBarColor(Android.Graphics.Color.Argb(255, 44, 0, 0));というように色を指定することができるけれど,透明にはできない...

Jamesさんのこの記事が参考になるだろうか...

montemagno.com

追記前

stackoverflow.com

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

            Window.SetStatusBarColor(Android.Graphics.Color.Argb(0, 44, 0, 0));//これ

            LoadApplication(Startup.Init(ConfigureServices));
        }

forums.xamarin.com

Androidにおいて画面上部の時刻やバッテリー残量などの情報を表示する領域がステータスバーです.

デフォルトではステータスバーは以下のように,透過率0で表示されます.(ステータスバーがわかりやすいようにナビゲーションバーの色を変えてあります)

f:id:shuhelohelo:20200313174132p:plain

しかし,アプリケーションの中にはこのステータスバーが半透明になっているものがあります.

f:id:shuhelohelo:20200313174526g:plain

この記事は,Androidアプリでステータスバーを半透明にする方法です.

AndroidプロジェクトのResources > values > styles.xml内に次の1行を追加します.

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

どこに追加するのが正しい作法なのか不勉強でわかっていませんが,私は以下のとおりにして期待どおりの結果になりました.

<?xml version="1.0" encoding="utf-8" ?>
<resources>

  <style name="MainTheme" parent="MainTheme.Base">
    <item name="android:windowTranslucentStatus">true</item>
  </style>

...略

f:id:shuhelohelo:20200313175137p:plain

ナビゲーションバーが表示されている場合は,これで問題ありません.

ナビゲーションバーを非表示のときにステータスバーを半透明にするときは注意が必要です.

まずはナビゲーションバー表示の場合.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFStatusBar.Views.SecondPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="ナビゲーションバー"
    mc:Ignorable="d">
    <ContentPage.Content>
        <StackLayout>
            <Frame BackgroundColor="Pink">
                <Label Text="Frameだよ" />
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

f:id:shuhelohelo:20200313175834p:plain

このように上から順にステータスバー,ナビゲーションバー,ページのコンテンツが表示されています.

では次にナビゲーションバーを非表示にします.NavigationPage.HasNavigationBar="False"を追加します.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFStatusBar.Views.SecondPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    NavigationPage.HasNavigationBar="False"
    Title="ナビゲーションバー"
    mc:Ignorable="d">
    <ContentPage.Content>
        <StackLayout>
            <Frame BackgroundColor="Pink">
                <Label Text="Frameだよ" />
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

f:id:shuhelohelo:20200313180235p:plain

ナビゲーションバーがなくなった分,ページのコンテンツが上に来ましたが,ご覧のとおりステータスバーとページのコンテンツが重なるように表示されています.

このように,ステータスバーを半透明にし,ナビゲーションバーを非表示にするときはステータスバーとの重なりを考慮してページを作る必要があります.

ソースコード

github.com