透明的 AppBarLayout

Question

我正在开发一个应用程序，我希望有一个透明的工具栏 (AppBarLayout)，但仍然可以看到导航图标按钮。不幸的是，我能做到的最好的就是透明的工具栏，它仍然会留下阴影（高度）。

我有一个全屏对话框片段，请看样式：

<style name="FullScreenImageStyle" parent="AppTheme">
        <item name="android:windowNoTitle">true</item>

        <item name="android:windowFullscreen">false</item>
        <item name="android:windowIsFloating">false</item>


        <item name="android:windowEnterAnimation">@anim/slide_up</item>
        <item name="android:windowExitAnimation">@anim/slide_down</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

片段的布局看起来像这样（这里只是开始）：

<androidx.coordinatorlayout.widget.CoordinatorLayout
        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="match_parent"
        android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </com.google.android.material.appbar.AppBarLayout>

稍后在初始化对话框片段时，我设置了全屏样式和导航图标的资源ID。

结果如下所示。请注意屏幕顶部的工具栏阴影：

请问有什么办法解决这个问题吗？

Answer 1

去掉AppBarLayout，直接使用Toolbar：

<androidx.coordinatorlayout.widget.CoordinatorLayout
   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="match_parent">

   <androidx.appcompat.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@android:color/transparent"
     android:fitsSystemWindows="true"
     android:paddingStart="6dp"
     android:paddingEnd="16dp"
     android:translationZ="1dp"
     app:contentInsetStartWithNavigation="0dp"
     app:navigationIcon="@android:drawable/ic_menu_close_clear_cancel" />

  <FrameLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior">

     //your content

  </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

它会给你这个视图：

Answer 2

这样做

 <android.support.design.widget.AppBarLayout
  ...
  android:stateListAnimator="@null"
  ... />

Answer 3

使用此代码

 <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null">

appBarLayout.setOutlineProvider(null)

Answer 4

最后我通过删除AppBarLayout，将工具栏设置为透明背景并添加translationZ解决了这个问题，觉得有点hacky。

下面是代码供参考：

<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:translationZ="2dp"
            android:fitsSystemWindows="true"/>

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <!-- Some other layouts -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 5

试试这个代码 .. 并输入您的图像和您的需求。此代码在工具栏图标和一些文本和右侧也搜索图标..

  <com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        android:theme="@style/MyToolbar"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:titleTextAppearance="@style/MyToolbar">

        <ImageView
            android:id="@+id/headerIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_6sdp"
            android:src="@drawable/ic_edit_location_black"
            android:visibility="gone" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_6sdp">

            <TextView
                android:id="@+id/header"
                style="@style/MyToolbar"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center_vertical"
                android:textColor="@color/primary"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageView
                android:id="@+id/ivSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/_10sdp"
                android:src="@drawable/search_icon"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.appcompat.widget.Toolbar>


</com.google.android.material.appbar.AppBarLayout>

Answer 6

试试这个；

 android:background="@color/transparent"
 android:elevation="0dp"
 app:elevation="0dp"

<color name="transparent">#00000000</color>