Barra de status transparente e barra de ação do Android


97

Eu fiz algumas pesquisas sobre este tema e eu não poderia encontrar uma solução completa para que, passo a passo e com um pouco de tentativa e erro, eu finalmente descobrir como podemos alcançar estes resultados: ter um transparente ou colorido Actionbare Statusbar. Veja minha resposta abaixo.

Respostas:


238

Estou desenvolvendo um aplicativo que precisa ser semelhante em todos os dispositivos com> = API14 quando se trata de personalização da barra de ações e barra de status. Finalmente encontrei uma solução e como demorou um pouco, irei compartilhá-la para salvar um pouco do seu. Começamos usando uma dependência appcompat-21.

Barra de ação transparente :

values ​​/ styles.xml :

<style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="windowActionBarOverlay">false</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>


values-v21 / styles.xml :

<style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="colorPrimaryDark">@color/bg_colorPrimaryDark</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>

Agora você pode usar esses temas em seu AndroidManifest.xmlpara especificar quais atividades serão transparentes ou coloridas ActionBar:

    <activity
            android:name=".MyTransparentActionbarActivity"
            android:theme="@style/AppTheme.ActionBar.Transparent"/>

    <activity
            android:name=".MyColoredActionbarActivity"
            android:theme="@style/AppTheme.ActionBar"/>

insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui

Nota: em API> = 21 para obter o Actionbartransparente, você precisa obter o Statusbartransparente também, caso contrário, não respeitará seus estilos de cores e permanecerá cinza claro.



Barra de status transparente (funciona apenas com API> = 19) :
Esta é bem simples, basta usar o seguinte código:

protected void setStatusBarTranslucent(boolean makeTranslucent) {
        if (makeTranslucent) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        } else {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

Mas você notará um resultado funky: insira a descrição da imagem aqui

Isso ocorre porque quando o Statusbarfor transparente o layout usará sua altura. Para evitar isso, só precisamos:

SOLUÇÃO UM:
Adicione esta linha android:fitsSystemWindows="true"em seu contêiner de visualização de layout de tudo o que você deseja que seja colocado abaixo da Actionbar:

    ...
        <LinearLayout
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            ...
        </LinearLayout>
    ...

SOLUÇÃO DOIS:
Adicione algumas linhas ao nosso método anterior:

protected void setStatusBarTranslucent(boolean makeTranslucent) {
        View v = findViewById(R.id.bellow_actionbar);
        if (v != null) {
            int paddingTop = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ? MyScreenUtils.getStatusBarHeight(this) : 0;
            TypedValue tv = new TypedValue();
            getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true);
            paddingTop += TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
            v.setPadding(0, makeTranslucent ? paddingTop : 0, 0, 0);
        }

        if (makeTranslucent) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        } else {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

Onde R.id.bellow_actionbarestará o ID de visualização do contêiner de layout de tudo o que queremos ser colocado abaixo de Actionbar:

...
    <LinearLayout
            android:id="@+id/bellow_actionbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        ...
    </LinearLayout>
...

insira a descrição da imagem aqui

Então é isso, acho que não estou esquecendo de nada. Neste exemplo não usei a Toolbarmas acho que terá o mesmo resultado. É assim que eu personalizo meu Actionbar:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        View vg = getActionBarView();
        getWindow().requestFeature(vg != null ? Window.FEATURE_ACTION_BAR : Window.FEATURE_NO_TITLE);

        super.onCreate(savedInstanceState);
        setContentView(getContentView());

        if (vg != null) {
            getSupportActionBar().setCustomView(vg, new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            getSupportActionBar().setDisplayShowCustomEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(false);
            getSupportActionBar().setDisplayShowTitleEnabled(false);
            getSupportActionBar().setDisplayUseLogoEnabled(false);
        }
        setStatusBarTranslucent(true);
    }

Nota: este é um abstract classque se estende ActionBarActivity
Espero que ajude!


9
Você realmente deve usar android: fitSystemWindows se quiser garantir que sua Visualização não esteja abaixo da barra de status transparente.
ianhanniballake

1
Isso está totalmente correto, eu estava revisando meu código e estou usando isso também. Não sei se perdi neste exemplo. Vou atualizá-lo, obrigado!
GuilhE

4
Está faltando MyScreenUtils.getStatusBarHeight(this) aqui a resposta stackoverflow.com/a/3410200/1307690
Roman Nazarevych

1
existe uma maneira de torná-lo translúcido e não totalmente transparente? Estou na API 23
aks

6
Para obter o Transparent StatusBar Works precisei adicionar FLAG_LAYOUT_NO_LIMITS Flag, colocando o código getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);depois dissogetWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Eduardo ER

3

Suporta após KITKAT. Basta adicionar o código a seguir dentro do método onCreate de sua atividade. Não há necessidade de modificações no arquivo Manifest.

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window w = getWindow(); // in Activity's onCreate() for instance
                w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            }

9
Isso torna a barra de navegação também transparente
NOlivNeto

0

Basta adicionar estas linhas de código ao arquivo java de atividade / fragmento:

getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.