сделать панель прозрачной

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> 

мне нужно сделать выше ToolBar прозрачным. так что мы можем видеть фоновое изображение. Я пробовал разные методы. но не смогли найти правильное решение.

пожалуйста help.thanks

Answer 1

Попробуйте это:

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

и удалить, что с закрывающим тегом:

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

Но не делают его полным прозрачным, вы можете использовать цвет есть прозрачность, как #93000000, так будет:

<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

В большинстве случаев мы хотим, чтобы панель инструментов была полупрозрачной, потому что мы хотим показывать содержимое за ней. Проблема в том, что цвета содержимого за панелью инструментов могут сталкиваться с цветом элементов/текста панели инструментов (например, вверх/назад).

По этой причине вы увидите во многих реализациях, что панель инструментов на самом деле не прозрачна, но прозрачна с градиентом.

Вы можете получить это со следующим кодом:

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

Вы можете играть с различными значениями по градиенту, я обнаружил, что для белых элементов черный 40% отлично работает.

Другое, что вы можете сделать, это скрыть заголовок панели инструментов.

getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

И показать вверх affordance ...

getSupportActionBar().setDisplayShowTitleEnabled(false); 

Не беспокойтесь, если вы видите что-то вроде этого в панели макета предварительного просмотра ...

Это выглядит очень разные когда фактически перекрывается содержание:

Answer 3

Вот мое решение.

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