Как сделать панель инструментов прозрачной?

Это самостоятельный пост с вопросами и ответами. У меня есть прозрачная панель действий, которая перекрывает макет. После перехода на последнюю библиотеку поддержки я был вынужден избавиться от панели действий в пользу панели инструментов. Старые способы сделать его прозрачным и наложить этот макет больше не работают.

<style name="CustomActionBarTheme" parent="@android:style/Theme.AppCompat">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
</style>

<style name="TransparentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

android material-design android-toolbar

22.10.2014

Ответы:

Создайте файл toolbar.xml с фоном AppBarLayout @null.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    android:id="@+id/general_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Login"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>

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

и вот результат:

23.10.2016

вам не нужно AppBarLayout, достаточно android:background="@null" для вашего android.support.v7.widget.Toolbar 29.04.2018

Все, что вам нужно, это определить тему, которая скрывает панель действий, определить стиль панели действий с прозрачным фоном и установить этот стиль для виджета панели инструментов. Обратите внимание, что панель инструментов должна отображаться как последний вид (по всему дереву просмотра)

<style name="Theme.Custom" parent="@android:style/Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Макет:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Toolbar should be above content-->
    <include layout="@layout/toolbar" />

</RelativeLayout>

Макет панели инструментов:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/CustomActionBar"/>

22.10.2014

Если вы используете панель инструментов, просто рассматривайте ее как обычный вид. Теперь вы можете делать все, что хотите: сделать фон панели инструментов прозрачным, скрыть или показать его... Простое применение стиля windowActionBarOverlay = true не работает. 31.10.2014

Нет смысла определять Theme.Custom. Ничего не использовать. Боюсь, это не настоящий работающий Q.A. 30.12.2014

Хотя это и так, но есть некоторые проблемы с этим, поскольку он не работает, когда родителем является AppBarLayout. 28.02.2017

@HuyDuongTu, не могли бы вы взглянуть на этот вопрос: stackoverflow.com/questions/64192376/ 05.10.2020

Проверив пример исходного кода Google, я узнал, как сделать панель инструментов полностью прозрачной. Это было проще, чем я думал. Нам просто нужно создать простую фигуру, которую можно рисовать следующим образом.

Имя рисуемого toolbar_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
    android:angle="90"
    android:startColor="@android:color/transparent"
    android:endColor="@android:color/transparent"
    android:type="linear" />
</shape>

А затем во фрагменте или действии.. Добавьте панель инструментов, как это.

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/toolbar_bg"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

И здесь у нас будет полностью прозрачная панель инструментов.

Не добавляйте <android.support.design.widget.AppBarLayout >, иначе это не сработает.

Примечание. Если вам нужен AppBarLayout, установите высоту на 0, чтобы он не отрисовывал тень.

25.08.2016

круто, вы нашли это предостережение в AOSP? 18.10.2017

В чем причина использования градиента, если оба цвета одинаковы? Почему бы просто не сделать фон прозрачным? 13.11.2017

@Генри, хороший вопрос. Я пробовал с сплошной прозрачностью и не работал, но вы можете попробовать, может быть, теперь это работает. 13.11.2017

@ Хени, попробуй и это. У меня сейчас такой код. Установите на свою тему ..android:colorPrimary›@color/transparent и ..name=colorPrimary›@color/transparent‹/item› 13.11.2017

Он скроет целую панель инструментов (эмулятор Android 5.0), но, по крайней мере, это работает. 18.12.2017

форма? почему бы просто не добавить @null? 29.04.2018

@CoolMind не забудьте установить <item name="android:textColorPrimary">@android:color/white</item> в своих стилях 29.04.2018

Может ли кто-нибудь взглянуть на это stackoverflow.com/questions/64192376/ 05.10.2020

Панель инструментов работает как представление, поэтому ответ очень прост.

toolbar.getBackground().setAlpha(0);

18.12.2014

Это не очень хороший подход, потому что загруженное изменяемое растровое изображение является общим. Лучше использовать setBackgroundColor 19.12.2014

Да, он может использовать и твой способ. Это почти то же самое. 19.12.2014

Как это сделать в xml? 01.09.2015

альфа, прячет toolbar content для меня 18.04.2016

Это скроет все представления группы просмотра панели инструментов. 09.07.2016

Кто-нибудь может помочь с этим вопросом? stackoverflow.com/questions/64192376/ 05.10.2020

Добавьте следующую строку в style.xml

<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>

Теперь добавьте следующую строку в style-v21,

  <style name="AppTheme" parent="Base.Theme.AppTheme">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

и установите тему как android:theme="@style/AppTheme"

Это сделает строку состояния прозрачной.

11.08.2016

Только это сработало для меня (библиотека поддержки AndroidX):

 <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:theme="@style/AppTheme.AppBarOverlay"
            android:translationZ="0.1dp"
            app:elevation="0dp">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@null"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </com.google.android.material.appbar.AppBarLayout>

Этот код удаляет фон во всех необходимых представлениях, а также удаляет тень из AppBarLayout (что было проблемой)

Ответ был найден здесь: удалить тень под виджетом AppBarLayout android

15.08.2019

Просто добавьте android:background="@android:color/transparent", как показано ниже, в макет панели приложений.

<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"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>`

07.06.2017

Просто используйте следующий xml-код:

Код макета:

<android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/def_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/toolbarTransparent"
            android:layout_alignParentTop="true" />

И добавьте следующий код в colors.xml:

<color name="toolbarTransparent">#00FFFFFF</color>

Это даст вам желаемый результат.

14.08.2015

Нет, это не делает панель инструментов прозрачной. 01.09.2015

@IgorGanapolsky: Дайте мне знать, что вы пробовали. Я могу попытаться помочь вам разобраться в вашей проблеме. 02.09.2015

У меня есть панель инструментов внутри AppBarLayout внутри CoordinatorLayout (все внутри DrawerLayout). Я попытался применить прозрачный фон к AppBarLayout и панели инструментов, но он не стал прозрачным. 02.09.2015

он сделал цвет панели инструментов white, а не transparent 18.04.2016

Возможно, вам нужно взглянуть на этот пост прозрачная панель действий с AppCompat-v7 21

Очки, которые предлагает пост,

Просто убедитесь, что вы используете RelativeLayout для размещения панели инструментов и тела.
Поместите панель инструментов в последнюю очередь.
Поместите прозрачный цвет для атрибута android: background панели инструментов.

Это должно решить проблему без особых хлопот.

31.12.2014

Зачем использовать панель действий, когда у нас есть панель инструментов?? 01.09.2015

Упомянутый пост принадлежит кому-то другому, у которого изначально были проблемы с ActionBar :) 01.09.2015

Самый простой способ сделать панель инструментов прозрачной — определить непрозрачность в разделе @colors, определить TransparentTheme в разделе @styles, а затем поместить эти определения на панель инструментов.

@colors.xml

<color name="actionbar_opacity">#33000000</color>

@styles.xml

<style name="TransparentToolbar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

@activity_main.xml

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:background="@color/actionbar_opacity"
        app:theme="@style/TransparentToolbar"
        android:layout_height="?attr/actionBarSize"/>

Вот результат:

Снимок экрана с прозрачной панелью инструментов

21.02.2016

Хороший и чистый способ ответить. Держись в том же духе :) 01.04.2016

это серый, не прозрачный. 08.04.2021

Я реализовал полупрозрачную панель инструментов, создав две темы Theme.AppCompat.Light.NoActionBar и установив для атрибута colorPrimary прозрачный цвет.

1) Создайте одну тему для непрозрачной панели инструментов:

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

    <!-- Toolbar background color -->
    <item name="colorPrimary">#ff212cff</item>

</style>

Вторая тема для прозрачной/наложенной панели инструментов:

<style name="AppTheme.Overlay" parent="AppTheme">
    <item name="colorPrimary">@color/transparent</item>
</style>

2) В макете активности поместите панель инструментов за контентом, чтобы он отображался перед ним:

<RelativeLayout
    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:orientation="vertical">

    <fragment
        android:id="@+id/container"
        android:name="com.test.CustomFragment"
        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="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</RelativeLayout>

3) Примените прозрачную тему к своей деятельности в AndroidManifest.xml.

    <activity
        android:name="com.test.TransparentActivity"
        android:parentActivityName="com.test.HomeActivity"
        android:theme="@style/AppTheme.Overlay" >
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.test.HomeActivity" />
    </activity>

20.11.2014

основной цвет должен быть непрозрачным 01.06.2016

Благодарю вас! Особенно полезными были RelativeLayout вместо CoordinatorLayout и Toolbar за видом. Теперь я даже могу нарисовать картинку за StatusBar. 18.12.2017

Я знаю, что опаздываю на вечеринку. Я создал простой класс для управления прозрачностью Toolbar.

import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;



public class TransparentToolbarManager {

    private Toolbar mToolbar;
    private ColorDrawable colorDrawable;
    public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;

    public TransparentToolbarManager(Toolbar mToolbar) {
        this.mToolbar = mToolbar;
        this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
    }

    public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
        this.mToolbar = mToolbar;
        this.colorDrawable = colorDrawable;
    }

    //Fading toolbar
    public void manageFadingToolbar(int scrollDistance) {
        if (mToolbar != null && colorDrawable != null) {
            //FadeinAndOut according to the horizontal scrollValue
            if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
                setToolbarAlpha(scrollDistance);
            } else if (scrollDistance > MAX_ALPHA) {
                setToolbarAlpha(MAX_ALPHA);
            }
        }
    }


    @SuppressLint("NewApi")
    public void setToolbarAlpha(int i) {
        colorDrawable.setAlpha(i);
        if (CommonHelper.isSupport(16)) {
            mToolbar.setBackground(colorDrawable);
        } else {
            mToolbar.setBackgroundDrawable(colorDrawable);
        }
    }


}

и CommonHelper.isSupport()

public static boolean isSupport(int apiLevel) {
        return Build.VERSION.SDK_INT >= apiLevel;
}

09.11.2015

Просто добавьте android:background="#10000000" в свой тег AppBarLayout. Это работает.

08.09.2018

https://stackoverflow.com/a/37672153/2914140 помог мне.

Я сделал этот макет для деятельности:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent" <- Add transparent color in AppBarLayout.
        android:theme="@style/AppTheme.AppBarOverlay"
        >

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

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        <- Remove app:layout_behavior=...
        />

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

Если это не сработает, в onCreate() активности напишите (где панель инструментов @+id/toolbar):

toolbar.background.alpha = 0

Если вы хотите установить полупрозрачный цвет (например, #30ff00ff), установите toolbar.setBackgroundColor(color). Или даже установите цвет фона AppBarLayout.

В моем случае стили AppBarLayout и Toolbar роли не играли.

25.01.2019

попробуйте ниже код

<android.support.design.widget.AppBarLayout
                    android:id="@+id/app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:theme="@style/AppTheme.Transparent"
                    >
                        <android.support.v7.widget.Toolbar
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:popupTheme="@style/AppTheme.PopupOverlay" />
                </android.support.design.widget.AppBarLayout>

стиль.xml

<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorControlActivated">@color/colorWhite</item>
        <item name="colorControlNormal">@color/colorWhite</item>
    </style>

15.10.2016

для Панель поддержки v7 android.support.v7.widget.Toolbar:

код

toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));

xml (android:background="@null" или android:background="@android:color/transparent")

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="@null"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:ellipsize="start"
        android:singleLine="true"
        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>

если заголовок невидим, установите textColor

29.04.2018

Как сделать фон AppBarLayout полностью прозрачным... Тем временем я должен прокручивать всю прокрутку нижней части AppBarLayout... Как и в приложении Gmail stackoverflow.com/questions/54956542/ 19.03.2020

Добавьте приведенный ниже код в файл styles.xml

<style name="LayoutPageTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

          <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:popupTheme="@style/AppTheme.PopupOverlay" />

Не забудьте написать: android:background="@android:color/transparent"

27.08.2019

Перейдите к пакету res и откройте color.xml. Установите основной цвет на #00000000.

14.12.2017

Пожалуйста, добавьте пример кода или дополнительные пояснения, чтобы сделать ваш ответ более понятным. 14.12.2017

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

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

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP