像 Uber 一样透明的操作栏和状态栏答案

【问题标题】：Transparent action bar and status bar like Uber像 Uber 一样透明的操作栏和状态栏
【发布时间】：2017-10-12 12:27:29
【问题描述】：

我已经对此主题进行了一些研究，但我找不到适合我的应用程序/活动的解决方案。

我试图获得一个透明的操作栏。

首先，我尝试更改 AndroidManifest.xml 中的主题：

values/styles.xml：

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

和

values-v21/styles.xml：

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

结果就是这样：

所以我只得到一些浅灰色的操作栏，左侧/右侧有一些间隙。

其次，我尝试在我的布局中使用fitsSystemWindow="true" 和android:background="@android:color/transparent"，但它也没有解决问题。

 <?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.poweranimal.letsgo.Application.MainActivity">

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


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

    <include layout="@layout/content_main" />

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

但我得到与以前相同的输出:( 2. 此外，我还尝试了获取透明状态栏：

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

和

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

但这也不起作用（没有任何改变）。

我真正想要的是这样的：

如果有人对我有可能的解决方案，那就太酷了。

提前致谢。

【问题讨论】：

标签： java android android-actionbar android-toolbar android-statusbar

【解决方案1】：

1. 首先，您必须更改layout 结构以在透明Toolbar 和StatusBar 下显示MAP，并从现有的gap 中删除左右gap Toolbar。

activity_main.xml：

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

    <RelativeLayout
        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="?attr/actionBarSize"
            android:layout_marginTop="24dp"
            android:elevation="1dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/sample_map">

            <!-- put your content here -->

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

2. 在您的MainActivity 中，执行以下操作以初始化Toolbar 并使Toolbar 和StatusBar 为transparent。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Toolbar :: Transparent
    toolbar.setBackgroundColor(Color.TRANSPARENT);

    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("StackOverflow");
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // Status bar :: Transparent
    Window window = this.getWindow();

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.setStatusBarColor(Color.TRANSPARENT);
    }

    ...........
    .................. 
}

3. 将以下主题应用到您的MainActivity。

values/styles.xml：

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

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

AndroidManifest.xml：

<activity
    android:name=".EmptyActivity"
    android:theme="@style/AppTheme.NoActionBar">

</activity>

输出：

仅供参考，我刚刚在我的内容LinearLayout 中使用了地图的示例图像来显示行为。对于您的情况，将您的所有内容（searchbar, map）放入其中。

希望对你有帮助~

【讨论】：

@FAT 它给了我一个透明的状态栏，但它不像 Uber 那样完全透明。
经过10页的搜索终于找到了这个答案。太好了！

【解决方案2】：

试试这个。

将以下代码添加到您的活动中以将状态栏设置为透明，对于操作栏，您应该尝试使用透明背景的自定义操作栏。

  private void settingStatusBarTransparent() {

        if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
            Window w = getWindow(); // in Activity's onCreate() for instance
            w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setNavigationBarColor(Color.BLACK);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
            //setStatusBarTranslucent(true);
        }
    }

【讨论】：

这是唯一对我有用的解决方案。谢谢。
底部导航栏也变得透明。我的按钮与系统按钮重叠

【解决方案3】：

试试这个：

首先在colors.xml 中添加自定义颜色，如下所示：

<color name="transparent_white">#80FFFFFF</color>

然后将此颜色设置为Where to? xml 文件主布局的背景。

在这一行中#80 是颜色的不透明度（简而言之，与透明相反）。

颜色前面的前两个字母：

'#00' - 全透明色
'#FF' 或 没有任何定义 - 完全不透明的颜色

用下面的XML更改并尝试

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent_white">

希望这能解决你的问题。

【讨论】：

【解决方案4】：

试试这个：在你的活动中：设置全屏标志

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        if (android.os.Build.VERSION.SDK_INT >= 21)
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        super.onCreate(savedInstanceState);
    }

现在在清单中：应用主题

<activity
        android:name=".YourActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.ActionBar.Transparent"/>

在 res/styles.xml 中

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

并在您的CoordinatorLayout 中设置android:fitsSystemWindows="false"

fitsSystemWindows="false" : 正常绘制视图，状态下 bar 因为你设置了窗口标志。
fitsSystemWindows="true" : 绘制状态下的视图 bar 因为您设置了窗口标志，但添加了一个顶部
填充，以便在状态栏下方绘制内容并且它们不会重叠。

【讨论】：

不幸的是，您的解决方案没有任何变化。如果我设置android:fitsSystemWindows="false"状态栏就会消失。
statusbar disappears?它会变得透明。！顺便说一句..我使用代码，它对我很有效..然后你应该检查其他答案

【解决方案5】：

首先我的观点是，您创建自定义操作栏并将操作栏的背景设置为透明。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="60dp"
    android:background="@android:color/transparent"
    android:id="@+id/toolBar"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <ImageButton
        android:background="@android:color/transparent"
        android:id="@+id/btnBackButton"
        android:layout_width="40dp"
        android:layout_height="45dp"
        android:src="@drawable/back" />


   <ImageView
       android:layout_width="wrap_content"
       android:layout_height="39dp"
       android:layout_gravity="center_vertical|center_horizontal"
       android:id="@+id/toolbar_image"
       android:background="@android:color/transparent"
       android:src="@drawable/logo_header_new"
       android:visibility="visible"
       />
</android.support.v7.widget.Toolbar>

【讨论】：

【解决方案6】：

您需要做的就是在您的主题中设置这些属性：

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

您希望拥有透明状态栏的活动/容器布局需要此属性集：

android:fitsSystemWindows=”true”

希望对你有帮助

【讨论】：