无法设置浮动操作按钮的渐变背景
Not able to set gradient background of floating action button
我正在尝试将浮动操作按钮的背景设置为渐变。我已经看过很多解决方案,但其中 none 对我有用。无论我尝试什么,它都会向我显示一个黑色操作按钮。我试过将背景设置为彩色,但也没有用。我正在尝试创建底部导航栏。
我的代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.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="56dp"
app:titleTextColor="#000000"
app:title=""
app:elevation="8dp"
/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
android:layout_gravity="bottom"
app:elevation="8dp"
app:fabAlignmentMode="center"
app:fabCradleRoundedCornerRadius="32dp"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="18dp"
app:buttonGravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:menu="@menu/bottom_menu"
android:layout_marginEnd="16dp"
android:background="@android:color/transparent"
app:itemIconTint="@color/bottom_nav_selector"
/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_button"
android:src="@drawable/fab_gradient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomAppBar"
android:contentDescription="TODO" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
梯度
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item android:gravity="center">
<bitmap
android:gravity="fill_horizontal"
android:src="@drawable/ic_action_add" />
</item>
</layer-list>
在你的theme.xml中创建样式
<style name="Floating" parent="Widget.Design.FloatingActionButton">
<!---rest of your style-->
<item name="android:foreground">@drawable/gradient</item>
</style>
并在您的 FloatingActionButton 中应用此样式:
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="@style/Floating"
android:id="@+id/fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomAppBar"
android:contentDescription="TODO" />
更新:
使图标居中:在API23及以上:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="@drawable/common_full_open_on_phone"
android:gravity="center"
android:width="24dp"
android:height="24dp">
</item>
</layer-list>
对于 API 23 岁及以下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="@drawable/common_full_open_on_phone"
android:top="15dp"
android:right="15dp"
android:left="15dp"
android:bottom="15dp" />
</layer-list>
我正在尝试将浮动操作按钮的背景设置为渐变。我已经看过很多解决方案,但其中 none 对我有用。无论我尝试什么,它都会向我显示一个黑色操作按钮。我试过将背景设置为彩色,但也没有用。我正在尝试创建底部导航栏。
我的代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.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="56dp"
app:titleTextColor="#000000"
app:title=""
app:elevation="8dp"
/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
android:layout_gravity="bottom"
app:elevation="8dp"
app:fabAlignmentMode="center"
app:fabCradleRoundedCornerRadius="32dp"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="18dp"
app:buttonGravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:menu="@menu/bottom_menu"
android:layout_marginEnd="16dp"
android:background="@android:color/transparent"
app:itemIconTint="@color/bottom_nav_selector"
/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_button"
android:src="@drawable/fab_gradient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomAppBar"
android:contentDescription="TODO" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
梯度
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item android:gravity="center">
<bitmap
android:gravity="fill_horizontal"
android:src="@drawable/ic_action_add" />
</item>
</layer-list>
在你的theme.xml中创建样式
<style name="Floating" parent="Widget.Design.FloatingActionButton">
<!---rest of your style-->
<item name="android:foreground">@drawable/gradient</item>
</style>
并在您的 FloatingActionButton 中应用此样式:
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="@style/Floating"
android:id="@+id/fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomAppBar"
android:contentDescription="TODO" />
更新:
使图标居中:在API23及以上:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="@drawable/common_full_open_on_phone"
android:gravity="center"
android:width="24dp"
android:height="24dp">
</item>
</layer-list>
对于 API 23 岁及以下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="@drawable/common_full_open_on_phone"
android:top="15dp"
android:right="15dp"
android:left="15dp"
android:bottom="15dp" />
</layer-list>