2014-10-22 4 views
45

Это самообслуживание Q & Сообщение У меня есть прозрачный 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> 

ответ

26

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

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

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

+4

это не работает .. :( – AndroidMech

+9

Нет смысла определять «Theme.Custom». Ничего не использовать. Боюсь, что это не настоящий рабочий QA – sancho21

4

Я реализовал полупрозрачную панель инструментов путем создания двух 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) Нанести прозрачную тему в acivity в 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> 
+0

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

+0

Спасибо! 'RelativeLayout' вместо' CoordinatorLayout' и 'Toolbar' за представлением были особенно полезны. Теперь я даже рисую картинку за StatusBar. – CoolMind

17

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

toolbar.getBackground().setAlpha(0); 
+29

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

+0

Да, он тоже может использовать ваш путь. Это почти то же самое. –

+0

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

4

Может быть, вы должны взглянуть на этот пост transparent Actionbar with AppCompat-v7 21

Очки, что пост предложить являются

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

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

+0

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

+0

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

5

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

и добавьте следующий код в цветов.XML:

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

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

+9

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

+0

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

+2

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

2

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

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

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

Screenshot transparent toolbar

+0

Приятный и чистый способ ответить. Держите его таким образом :) –

9

Добавьте следующую строку в 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> 

Теперь добавьте следующую строку в стиле-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"

Это wi ll сделать панель состояния прозрачной.

13

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

Название 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, чтобы не нарисовать ее тень.

+0

Удивительно, вы нашли это предостережение в AOSP? –

+0

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

+0

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

1

попробовать ниже код

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

Создать свой 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

3

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

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

GOTO Рез пакет и открытый color.xml набор цвет основного на # 00000000 его сделали.

+1

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

Смежные вопросы