材料设计透明ActionBar

Question

材料设计透明ActionBar

androidandroid-actionbarandroid-5.0-lollipop

47

我想知道是否有人知道如何制作一个透明的操作栏活动，就像你在新的Google Play商店中访问应用程序页面时看到的那样。

我不关心滚动和从透明转换为实色背景，我只需要操作栏是透明的。

- user3184899

7个回答

27

你只需要在你的应用程序主题中设置 <item name="colorPrimary">@android:color/transparent</item> 并将 windowActionBarOverlay 设置为 true，就像这样：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">@color/my_text_color</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

</resources>

最终结果应该像这样:

代码的最终结果

- Cristian Gomez

太好了，它起作用了。但是，正如您在这里看到的：https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10629709_805789872797492_6827913796269231038_n.jpg?oh=ac43335ed7c387f8c6ed10edfd1faa0f&oe=54B0A62D&__gda__=1420431431_2dfb271b8cb28aee5df2b805507d7e5e在顶部有一点黑色阴影...您能告诉我如何做吗？ - user3184899

也许这可以帮到你：http://stackoverflow.com/questions/17801289/android-translucent-background-with-shadow - Chris Gomez

11

1) 将AppBarLayout的高程属性设置为0dp。

app:elevation="0dp"

2) 将Toolbar的背景颜色设置为透明。

android:background="@android:color/transparent"

整个xml看起来像下面这样：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp">

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

        ......

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

- Mohit Charadva

4

如果从工具栏中移除 android:background 属性并在 AppBarLayout 上设置 android:background="@color/transparent"，那么这对我是有效的。 - w3bshark

10

添加到styles.xml中：

<style name="AppTheme" parent="Theme.MaterialComponents">
    <item name="android:navigationBarColor" tools:targetApi="lollipop">@color/color_primary
    </item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@color/color_primary</item>
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

<style name="MainTheme" parent="AppTheme">
    <item name="actionBarStyle">@style/MyTheme.ActionBar</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

<style name="MyTheme.ActionBar" parent="Widget.AppCompat.ActionBar">
    <item name="elevation" tools:targetApi="lollipop">0dp</item>
    <item name="background">@color/semi_transparent</item>
</style>
</resources>

到colors.xml文件：

<resources>
<color name="color_primary">#212121</color>
<color name="color_primary_dark">@android:color/black</color>
<color name="color_accent">#4285F4</color>
<color name="semi_transparent">#66000000</color>
</resources>

在 AndroidManifest.xml 中选择 MainTheme：android:theme="@style/MainTheme"

- kreker

1

什么？哪个主题需要设置为主题？！ - Dyno Cris

8

这对我有用。

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);   
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

- John Joe

7

透明ActionBar

values/styles.xml:

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

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="windowActionBarOverlay">false</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>

values-v21/styles.xml:

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

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="colorPrimaryDark">@color/bg_colorPrimaryDark</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>

在您的AndroidManifest.xml中使用这些主题来指定哪些活动将具有透明或彩色的ActionBar

<activity
            android:name=".MyTransparentActionbarActivity"
            android:theme="@style/AppTheme.ActionBar.Transparent"/>

    <activity
            android:name=".MyColoredActionbarActivity"
            android:theme="@style/AppTheme.ActionBar"/>

- Maksudul Hasan Raju

在我的清单文件中，我将android:theme="@style/AppTheme.ActionBar.Transparent"放在活动标签中，但它对我无效。然后我将它移动到应用程序标签内（对我来说是第11行），这样就可以了。 - SendETHToThisAddress

3

有一种实用的方法来做到这一点。

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
mActionBar.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mActionBar.setElevation(0);

- Roman Nazarevych

1

它可以工作。在super.onCreate(savedInstanceState);之前添加getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY); - karthik vishnu kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thiago · Accepted Answer

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

在 Lollipop 设备上，以上代码会导致异常。colorPrimary 必须是不透明的。

使用以下样式来让你的 actionbar 更加时尚：

<style name="ThemeActionBar"
        parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@null</item>
        <!-- Support library compatibility -->
        <item name="background">@null</item>
</style>

只需要在你的主题中包含以下内容：

<item name="android:actionBarStyle">@style/ThemeActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/ThemeActionBar</item>
<item name="windowActionBarOverlay">true</item>