it-swarm.com.ru

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

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

<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>
51
Gleichmut

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

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

Создайте файл 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>

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

 enter image description here

33
TranVo

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

Имя отрисовки: 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"/>

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

 enter image description here

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

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

26
Pedro Varela

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

toolbar.getBackground().setAlpha(0);
21
Marco Vignoli

Добавьте следующую строку в 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: тема = "@ стиль/AppTheme"

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

11
Reprator

Просто используйте следующий код 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>

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

7
V_J

Я реализовал полупрозрачную панель инструментов, создав две темы 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>
5
Andy

Простейший способ сделать панель инструментов прозрачной - определить непрозрачность в разделе @colors, определить прозрачную тему в разделе @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"/>

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

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

5
Jonoid

Просто добавьте 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>`
4
Rajesh.k

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

Пункты, которые предлагает сообщение, являются

  1. Просто убедитесь, что вы используете RelativeLayout, чтобы положить панель инструментов и тело.
  2. Поместите панель инструментов в последнюю.
  3. Поставить прозрачный цвет для Android: атрибут фона панели инструментов

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

4
sancho21

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

2
Abu bakar

Я знаю, что опаздываю на вечеринку. Я создал простой класс для управления прозрачностью 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;
}
2
theapache64

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

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

style.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>
1
Sỹ Phạm

для Поддержка панели инструментов 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

1
user25

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.background.alpha = 0

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

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

1
CoolMind