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

Ответ 1

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

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

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

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

И покажите доступность...

getSupportActionBar().setDisplayShowTitleEnabled(false);

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

Он выглядит очень по-разному, когда на самом деле перекрывает содержимое:

Ответ 2

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

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

Ответ 3

Попробуйте следующее:

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

Ответ 4

Это моя версия того, как получить прозрачную панель инструментов без тени в AppBarLayout. Основная проблема с вышеуказанными решениями заключалась в том, что когда я сделал панель инструментов прозрачной, тень все еще отбрасывалась под нее. Чтобы сделать прозрачную панель инструментов с иконкой обратной навигации во фрагменте:

layout_transparent_toolbar_fragment.xml:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/general_appbar"
    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:navigationIcon="@drawable/ic_arrow_back_black_24dp"></android.support.v7.widget.Toolbar>

и в TransparentToolbarFragment:

override fun onCreateView(inflater: LayoutInflater, vg: ViewGroup?, savedInstanceState: Bundle?): View? {
    val layout = inflater.inflate(R.layout.layout_transparent_toolbar_fragment, vg, false)
    val toolbar = layout.findViewById<View>(R.id.toolbar) as Toolbar
    val appBar = layout.findViewById<View>(R.id.general_appbar) as AppBarLayout
    appBar.outlineProvider = null
    val appCompatActivity = (activity as AppCompatActivity)
    appCompatActivity.setSupportActionBar(toolbar)

    val actionBar = appCompatActivity.getSupportActionBar()
    if (actionBar != null) actionBar!!.setDisplayHomeAsUpEnabled(true)
    toolbar.setNavigationOnClickListener { appCompatActivity.finish() }

    return layout
}

На самом деле, линия

appBar.outlineProvider = null

выполняет работу по сокрытию тени на панели инструментов.