web-dev-qa-db-fra.com

Barre d'action transparente et barre d'état comme Uber

J'ai fait quelques recherches sur ce sujet mais je n'ai pas trouvé de solution pour mon application/activité.

  1. J'ai essayé d'obtenir une barre d'action transparente.

Tout d'abord, j'ai essayé de changer les thèmes dans mon AndroidManifest.xml:

values ​​/ styles.xml:

<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>

et

values-v21/styles.xml:

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

Mais c'est le résultat:

enter image description here

Je ne reçois donc qu'une barre d'action gris clair avec quelques lacunes sur le côté gauche/droit.

Deuxièmement, j'ai essayé d'utiliser fitsSystemWindow="true" et Android:background="@Android:color/transparent" dans mes mises en page, mais cela n'a pas non plus résolu le problème.

 <?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="com.example.poweranimal.letsgo.Application.MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/transparent">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"/>


    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    </Android.support.design.widget.CoordinatorLayout>

Mais j'obtiens la même sortie qu'avant :( 2. De plus, j'ai aussi essayé d'obtenir une barre d'état transparente avec:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

et

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

mais cela n'a pas fonctionné aussi (rien n'a changé).

Ce que je veux vraiment, c'est quelque chose comme ça:

enter image description here

Ce serait cool si quelqu'un a une solution possible pour moi.

Merci d'avance.

javaandroidandroid-actionbarandroid-toolbarandroid-statusbar
16
Sandman98M

1. Tout d'abord, vous devez changer votre structure layout pour afficher MAP sous transparent Toolbar & StatusBar et aussi pour supprimer _ gauche et droite gap de votre Toolbar existant.

activity_main.xml: 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="false">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_marginTop="24dp"
            Android:elevation="1dp" />

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/sample_map">

            <!-- put your content here -->

        </LinearLayout>
    </RelativeLayout>
</Android.support.design.widget.CoordinatorLayout>

2. Dans votre MainActivity, faites ci-dessous les choses pour initialiser Toolbar et faire Toolbar et StatusBar as transparent.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Toolbar :: Transparent
    toolbar.setBackgroundColor(Color.TRANSPARENT);

    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("StackOverflow");
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // Status bar :: Transparent
    Window window = this.getWindow();

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop)
    {
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.setStatusBarColor(Color.TRANSPARENT);
    }

    ...........
    .................. 
}

3. Appliquez le thème ci-dessous à votre MainActivity.

values ​​/ styles.xml: 

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

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

AndroidManifest.xml: 

<activity
    Android:name=".EmptyActivity"
    Android:theme="@style/AppTheme.NoActionBar">

</activity>

SORTIE:

enter image description here

[~ # ~] fyi [~ # ~] , je viens d'utiliser un exemple d'image de carte dans mon contenu LinearLayout pour montrer le comportement. Pour votre cas, mettez tout votre contenu (searchbar, map) à l'intérieur.

J'espère que cela vous aidera ~

21
Ferdous Ahamed

Essaye ça.

Ajoutez le code suivant à votre activité pour définir la barre d'état transparente et pour la barre d'action, vous devriez essayer une barre d'action personnalisée avec un fond transparent.

  private void settingStatusBarTransparent() {

        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);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
            getWindow().setNavigationBarColor(Color.BLACK);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
            //setStatusBarTranslucent(true);
        }
    }
5
UltimateDevil

En tant que premier point de vue, vous créez une barre d'action personnalisée et définissez un arrière-plan de la barre d'action transparent.

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="60dp"
    Android:background="@Android:color/transparent"
    Android:id="@+id/toolBar"
    Android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <ImageButton
        Android:background="@Android:color/transparent"
        Android:id="@+id/btnBackButton"
        Android:layout_width="40dp"
        Android:layout_height="45dp"
        Android:src="@drawable/back" />


   <ImageView
       Android:layout_width="wrap_content"
       Android:layout_height="39dp"
       Android:layout_gravity="center_vertical|center_horizontal"
       Android:id="@+id/toolbar_image"
       Android:background="@Android:color/transparent"
       Android:src="@drawable/logo_header_new"
       Android:visibility="visible"
       />
</Android.support.v7.widget.Toolbar>
0
user7353609

Essaye ça:

Tout d'abord, ajoutez une couleur personnalisée dans colors.xml comme ci-dessous:

<color name="transparent_white">#80FFFFFF</color>

Définissez ensuite cette couleur comme arrière-plan de la disposition principale de votre Where to? fichier xml.

Et dans cette ligne #80 est l'opacité (en bref, à l'opposé de transparent) de la couleur.

Deux premières lettres avant la couleur:

  1. '# 00' - Couleur entièrement transparente
  2. '# FF' ou Pas de définition - Couleur non transparente complète

Changez en XML avec ci-dessous et essayez

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/transparent_white">

J'espère que cela résoudra votre problème.

0
Nitin Patel

Essayez ceci: dans votre activité: définir le drapeau plein écran

    @TargetApi(Build.VERSION_CODES.Lollipop)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        if (Android.os.Build.VERSION.SDK_INT >= 21)
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        super.onCreate(savedInstanceState);
    }

Maintenant dans le manifeste: Appliquer le thème

<activity
        Android:name=".YourActivity"
        Android:label="@string/app_name"
        Android:screenOrientation="portrait"
        Android:theme="@style/AppTheme.ActionBar.Transparent"/>

dans res/styles.xml

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

Et mettre Android:fitsSystemWindows="false" dans votre CoordinatorLayout

  • fitsSystemWindows="false": dessine la vue normalement, sous la barre d'état en raison des indicateurs de fenêtre que vous avez définis.

  • fitsSystemWindows="true": dessine la vue sous la barre d'état en raison des indicateurs de fenêtre que vous avez définis, mais ajoute un haut
    pour que le contenu soit dessiné sous la barre d'état et ne se chevauche pas.

0
rafsanahmad007