Translucent SystemBars o caminho certo – através de níveis API e temas

BY admin
|

Desenhar borda a borda com status translúcido e barras de navegação na v21+ com temas escuros e claros.

Este artigo assume que você já passou pela navegação por gestos – indo de borda em borda (I)

Desde que queremos que o conteúdo seja desenhado atrás das barras do sistema, significa que

  1. Precisamos de translucidez
  2. Precisamos de scrims escuros ou claros para a barra de navegação e barra de status conforme o tema atual.

Capacidade

  • EstatusBarColor
    Mas estamos limitados a usar cores mais escuras uma vez que os ícones da barra de status permanecem brancos.
  • windowTranslucentStatus true irá sobrepor-se ao statusBarColor e aplicar um scrim escuro fixo que não pode ser alterado.
  • Navegação totalmente configurávelBarColor
    Mas estamos limitados a usar cores mais escuras uma vez que os botões de navegação permanecem de cor branca.
  • windowTranslucentNavigation true irá sobrepor-se à navegaçãoBarColor e aplicar um scrim escuro fixo que não pode ser alterado.
  • Ícones da barra de status &Botões da barra de navegação permanecem sempre claros.

v23+

  • windowLightStatusBar
    Permite que os ícones da barra de status fiquem escuros

v27+

  • windowLightNavigationBar
    Permite que os botões da barra de navegação fiquem escuros.

Solução

Nota: Vamos usar uma barra de estado transparenteBarColor. Porque em vez disso usaremos a AppBar para colorir a barra de status. Uma vez que a AppBar cobre a área da barra de status, deve ser suficiente para definir o fundo relevante para a AppBar diretamente.

Na sua implementação, esta pode ser qualquer vista que está no topo. Se não houver nenhuma vista no topo da tela , você pode usar o atributo statsuBarColor. Ele dará os mesmos resultados.

Valores base:

AppBarLayout:

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/moviesAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/status_bar_scrim"
android:theme="@style/Widget.AppTheme.AppBar"
app:elevation="2dp"
app:layout_constraintTop_toTopOf="parent"> <androidx.appcompat.widget.Toolbar
android:id="@+id/moviesToolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="Popular Movies" />
</com.google.android.material.appbar.AppBarLayout>

v21 – v22:

  • Deixamos a janelaTranslucentStatus e a janelaTranslucentNavigation, pois o sistema aplicará um scrim escuro se os usarmos.
  • StatusBar e ícones da barra de navegação permanecem brancos.
  • Means, só podemos usar fundos escuros/scrims.

Temos 2 opções aqui:

Utilizar fundos diferentes para temas escuros e claros.

No caso de tema escuro a corSurface será escura/preta. Podemos usar uma cor similar para systemBars também.
Em caso de tema claro, o colorSurface será claro/branco. Não podemos usar uma cor similar para systembars já que os ícones são brancos.

Basicamente, não podemos lidar muito bem com barras de sistema com temas claros na v21-22. Portanto, ficamos apenas com o uso de fundos escuros .

Utilizar o mesmo fundo para temas escuros e claros.

>

Podemos trabalhar à nossa maneira usando fundos escuros para temas escuros e claros.

Como resultado, o tema escuro brilhará.

No caso do tema claro:
Desde que este scrim escuro também será aplicado ao AppBar (se estivermos desenhando atrás dele, o que somos!), teremos que usar um ThemeOverlay.Dark para o AppBar. Senão teremos texto escuro sobre fundo escuro.

values-night

v23 – v26:

>

>

Podemos ser totalmente flexíveis com a barra de status, pois temos a capacidade de fazer os ícones da barra de status ficarem escuros.

  • Para o tema light, teremos um status_bar_scrim claro e um nav_bar_scrim escuro (uma vez que os ícones de navegação não podem ser escuros).
  • Para o tema escuro, os valores-noite irão sobrepor-se ao status_bar_scrim para ser escuro e o nav_bar_scrim irá seguir o status_bar_scrim para ser escuro também.
  • Além disso, precisamos evitar que o nosso Widget.AppTheme.AppBar esteja sempre com o tema escuro.

valores-v23

v27+:

Podemos ser totalmente flexíveis com a barra de navegação, pois agora temos a capacidade de fazer os ícones da barra de navegação ficarem escuros.
Desde valores-v23 usa um diferente status_bar_scrim e nav_bar_scrim para tema claro. Temos de nos certificar aqui que ambos são iguais (ambos são claros para o tema claro e ambos são escuros para o tema escuro).

Só precisamos de fazer o nav_bar_scrim seguir o status_bar_scrim novamente e estamos prontos.

values-v27

O código inteiro pode ser encontrado aqui: https://github.com/gaurav414u/MoviesInsetsDemo