Toolbar transparent

Question

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> 

Ich brauche die oben ToolBar transparent zu machen. damit wir das Hintergrundbild sehen können. Ich habe verschiedene Methoden ausprobiert. aber konnte keine richtige Lösung finden.

bitte help.thanks

Answer 1

bereit:

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

und entfernen, dass mit Ende tag:

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

Aber macht es nicht voll transparent, können Sie Farbe verwenden Transparenz wie #93000000 so wird es so sein:

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

Answer 2

Die meisten der Zeit wir die Symbolleiste wollen scheinend werden, weil wir Inhalte dahinter zeigen wollen. Das Problem ist, dass die Farben des Inhalts hinter der Symbolleiste mit der Farbe der Symbolleistenelemente/Text kollidieren können (z. B. Pfeil nach oben/zurück).

Aus diesem Grund werden Sie in vielen Implementierungen sehen werden, dass die Symbolleiste eigentlich nicht transparent ist, aber durchscheinend mit einem Gradienten.

Sie können diese erhalten mit dem nächsten Code:

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

Colors.xml

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

Sie mit verschiedenen Werten auf dem Gradienten spielen können, Was ich gefunden habe ist, dass für weiße Elemente die schwarzen 40% gut funktionieren.

Eine andere Sache, die Sie tun möchten, ist der Titel der Symbolleiste auszublenden.

getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

Und das bis affordance zeigen ...

getSupportActionBar().setDisplayShowTitleEnabled(false); 

Sorgen Sie sich nicht, wenn Sie so etwas wie dies in der Layout-Vorschaufenster ... siehe

Es sieht ganz anders aus Wenn der Inhalt tatsächlich überlappt:

Answer 3

Hier ist meine Lösung.

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