Android : API 23 的透明工具栏
Android : transparent toolbar for API 23
我的工具栏在现有代码上有问题。我想要一个透明的工具栏(不是半透明的)。
我已经搜索了一些回复,但没有任何效果。
我已经尝试了:
- 创建背景可绘制透明。
- 在 true 上添加带有 windowActionBarOverlay 的自定义主题
- toolbar.getBackground.setAlpha(0)
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"
tools:context=".ui.Activities.MainActivity"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
style="@style/CustomAppBarLayout"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.indetouch.music.player.ui.Activities.MainActivity">
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/transparent">
<!-- multiple frame layout [...] -->
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer"
android:background="@color/main_black"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
tool_bar.xml
<?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="@dimen/abc_action_bar_default_height_material"
style="@style/CustomToolbar"
>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:visibility="gone">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="5dp"
android:visibility="gone">
<android.support.v7.widget.AppCompatImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_volume_down_white_24dp"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="@+id/seekbar_volume"
android:layout_width="150dp"
android:layout_height="match_parent"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_volume_up_white_24dp"
android:visibility="gone"/>
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone">
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/btn_toolbar_back"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_navigate_before_white_24dp"
android:visibility="gone"/>
<Space
android:layout_width="25dp"
android:layout_height="match_parent"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/btn_toolbar_next"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_navigate_next_white_24dp"
android:visibility="gone"/>
</android.support.v7.widget.LinearLayoutCompat>
</android.support.design.widget.CoordinatorLayout>
</android.support.v7.widget.Toolbar>
编辑:我找到了一个解决方案。
我更改文件 "activity_main.xml" 以添加 CoordinatorLayout,然后我添加 AppBarLayout,然后将我的工具栏包含在我的 AppBarLayout 中。
另外,我添加了两种应用于 Toolbar 和 AppBarLayout 的样式。
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">@color/PrimaryColor</item>
<item name="android:colorPrimaryDark">@color/PrimaryDarkColor</item>
<item name="colorAccent">#ffffff</item>
<item name="windowNoTitle">true</item>
</style>
<style name="CustomAppBarLayout">
<item name="android:background">@android:color/transparent</item>
</style>
<style name="CustomToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">@android:color/transparent</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
</resources>
这还没有完成。 AppbarLayout(或工具栏)上有一个阴影,我应该解决这个问题(你也可能:))
您必须先定义样式,然后再将其用于您的工具栏:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorPrimaryDark">#ffffff</item>
<item name="colorAccent">#ffffff</item>
<item name="colorPrimary">@android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
我找到了!
只需将 AppBarLayout 放入 DrawerLayout 中,一切正常。
main_activity.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"
tools:context=".ui.Activities.MainActivity"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
style="@style/CustomAppBarLayout"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.indetouch.music.player.ui.Activities.MainActivity">
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/transparent">
<!-- multiple frame layout [...] -->
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer"
android:background="@color/main_black"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
我的工具栏在现有代码上有问题。我想要一个透明的工具栏(不是半透明的)。
我已经搜索了一些回复,但没有任何效果。
我已经尝试了:
- 创建背景可绘制透明。
- 在 true 上添加带有 windowActionBarOverlay 的自定义主题
- toolbar.getBackground.setAlpha(0)
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"
tools:context=".ui.Activities.MainActivity"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
style="@style/CustomAppBarLayout"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.indetouch.music.player.ui.Activities.MainActivity">
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/transparent">
<!-- multiple frame layout [...] -->
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer"
android:background="@color/main_black"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
tool_bar.xml
<?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="@dimen/abc_action_bar_default_height_material"
style="@style/CustomToolbar"
>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:visibility="gone">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginLeft="5dp"
android:visibility="gone">
<android.support.v7.widget.AppCompatImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_volume_down_white_24dp"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="@+id/seekbar_volume"
android:layout_width="150dp"
android:layout_height="match_parent"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_volume_up_white_24dp"
android:visibility="gone"/>
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone">
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/btn_toolbar_back"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_navigate_before_white_24dp"
android:visibility="gone"/>
<Space
android:layout_width="25dp"
android:layout_height="match_parent"
android:visibility="gone"/>
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/btn_toolbar_next"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_navigate_next_white_24dp"
android:visibility="gone"/>
</android.support.v7.widget.LinearLayoutCompat>
</android.support.design.widget.CoordinatorLayout>
</android.support.v7.widget.Toolbar>
编辑:我找到了一个解决方案。 我更改文件 "activity_main.xml" 以添加 CoordinatorLayout,然后我添加 AppBarLayout,然后将我的工具栏包含在我的 AppBarLayout 中。 另外,我添加了两种应用于 Toolbar 和 AppBarLayout 的样式。
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">@color/PrimaryColor</item>
<item name="android:colorPrimaryDark">@color/PrimaryDarkColor</item>
<item name="colorAccent">#ffffff</item>
<item name="windowNoTitle">true</item>
</style>
<style name="CustomAppBarLayout">
<item name="android:background">@android:color/transparent</item>
</style>
<style name="CustomToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">@android:color/transparent</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
</resources>
这还没有完成。 AppbarLayout(或工具栏)上有一个阴影,我应该解决这个问题(你也可能:))
您必须先定义样式,然后再将其用于您的工具栏:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorPrimaryDark">#ffffff</item>
<item name="colorAccent">#ffffff</item>
<item name="colorPrimary">@android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
我找到了! 只需将 AppBarLayout 放入 DrawerLayout 中,一切正常。
main_activity.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"
tools:context=".ui.Activities.MainActivity"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
style="@style/CustomAppBarLayout"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.indetouch.music.player.ui.Activities.MainActivity">
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/transparent">
<!-- multiple frame layout [...] -->
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer"
android:background="@color/main_black"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>