web-dev-qa-db-fra.com

Rendre la barre d'outils transparente

create_account.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="true"
tools:context="io.sleeko.board.CreateAccountActivity">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"

        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/fab_margin"
    Android:src="@Android:drawable/ic_dialog_email" />

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

Je dois rendre la ToolBar ci-dessus transparente. afin que nous puissions voir le fond Image.J'ai essayé différentes méthodes. mais n'a pas pu trouver la solution correcte.

s'il vous plaît help.thanks

androidtoolbartransparent
16
Nabeel K

La plupart du temps, nous souhaitons que la barre d’outils soit translucide, car nous voulons montrer le contenu derrière elle. Le problème est que les couleurs du contenu derrière la barre d’outils peuvent entrer en conflit avec la couleur des éléments/texte de la barre d’outils (flèche haut/arrière par exemple).

Pour cette raison, de nombreuses implémentations montrent que la barre d’outils n’est pas transparente mais transparente avec un dégradé.

Vous pouvez l'obtenir avec le code suivant:

<?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"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="@drawable/background_toolbar_translucent" />

background_toolbar_translucent.xml

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

<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <gradient
        Android:angle="270"
        Android:endColor="@Android:color/transparent"
        Android:startColor="@color/black_alpha_40"/>
</shape>

couleurs.xml

<color name="black_alpha_40">#66000000</color>

Vous pouvez jouer avec différentes valeurs sur le dégradé. Ce que j'ai trouvé, c'est que pour les éléments blancs, le noir à 40% fonctionne bien.

Une autre chose à faire est de cacher le titre de la barre d’outils.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Et montrez le prix élevé ...

getSupportActionBar().setDisplayShowTitleEnabled(false);

Ne vous inquiétez pas si vous voyez quelque chose comme ça dans le panneau d'aperçu de la mise en page ...  enter image description here

Cela semble très différent quand le contenu se chevauche:

 enter image description here

52
Sotti

Voici ma solution.

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay"
    Android:background="#00000000">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
5
schmaedech

Essayez ça:

<Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="@Android:color/transparent"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

et enlevez ça avec la balise de fin:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

Mais ne le rendez pas complètement transparent, vous pouvez utiliser la couleur avec une transparence telle que #93000000, ainsi ce sera:

<Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="#93000000"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
0
Mohamed