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

Question

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

我试过弄个透明的操作栏。

首先，我尝试更改 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>

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

我真正想要的是这样的：

如果有人能为我提供可能的解决方案，那就太好了。

提前致谢。

Answer 1

试试这个：

首先在 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">

希望这能解决您的问题。

Answer 2

试试这个：在您的 activity 中：设置全屏标志

    @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" : 正常绘制视图，在状态下因为你设置了 window 标志。
fitsSystemWindows="true" : 绘制状态下的视图 bar 因为你设置了 window 标志，但是添加了一个 top
padding 以便内容绘制在状态栏下方，而它们不会重叠。

Answer 3

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

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

Answer 4

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

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

你的activity/你希望有透明状态栏的容器布局需要这个属性设置：

android:fitsSystemWindows=”true”

希望对你有帮助

Answer 5

试试这个。

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

  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);
        }
    }

Answer 6

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

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("Whosebug");
    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）放入其中。

希望对你有所帮助~

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

Transparent action bar and status bar like Uber

java

android

android-actionbar

android-toolbar

android-statusbar