使用AppCompat-v7 21实现透明的ActionBar

Question

在Appcompat-v7 21中，有没有一种方法可以使Material Design中的ActionBar透明？不幸的是，这并没有起作用。

  <item name="colorPrimary">@android:color/transparent</item>

请注意，这并非旧事：

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

- ligi

Answer 1

<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ACTION BAR STYLES -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="android:windowActionBarOverlay">true</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
    <item name="windowActionBarOverlay">true</item>
</style>

- Danial Hussain

---

我认为你应该看一下这个链接： https://developer.android.com/training/basics/actionbar/styling.html 它会告诉你如何改变操作栏的颜色。 如果你得到了答案，请点赞。谢谢！ - Danial Hussain

修复方法：如果您在操作栏中有图标，则此方法无效。将windowActionBarOverlay样式移动到AppTheme中，这样它就可以适用于所有情况了。 - Morten Holmgaard

@MortenHolmgaard 你刚刚为我节省了一两个小时。 - Delblanco

actionbar_background是什么意思？请帮忙解释一下。 - Basheer AL-MOMANI

Answer 2

实际上，这很容易而简单。

1. 只需确保使用RelativeLayout来布置Toolbar和正文。
2. 将Toolbar放在最后。
3. 将透明色应用于Toolbar的android:background属性。

以下是一个可行的代码示例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

    <fragment
        android:id="@+id/fragment_editor"
        android:name="ichsan.myapp.HelloFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_editor" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="#10000000"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</RelativeLayout>

希望它能回答你的问题。

- sancho21

---

不错。在看到你的帖子之前，我已经花了一段时间在这个问题上了。 - Lars

有没有人想出一个干净的解决方案，以便根据 Activity 中显示的 Fragment 来在重叠的工具栏和顶部固定的工具栏之间进行切换？ - Ryan

虽然这样做可以奏效，但必须删除android.support.design.widget.AppBarLayout。一旦它被删除了，原来折叠的工具栏将会留在屏幕上。 - Robert

请问您如何在 Activity（而非 FragmentActivity）中使用“fragment_editor”作为 RecyclerView 的布局，实现上述布局？其中，布局应使用 **tools:layout="@layout/fragment_editor"**。 - OnePunchMan

Answer 3

步骤：

1. 将以下样式放入v21\styles.xml中。

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

2. 您的工具栏XML代码

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/TransperantToolbar"/>

- Dhaval Jivani

Answer 4

以上方法都没有解决我的问题（至少单独使用它们没有解决） 我正在使用appcompat v7 23和一个CoordinatorLayout，这很可能是罪魁祸首。如果你也在使用这个，那么你的主活动布局很可能是这样的

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.farmdog.farmdog.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
                 app:layout_anchor="@+id/appbar"
                 app:layout_anchorGravity="top"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

注意上面的两个布局锚定线 - 这对我很有帮助。

- kellogs