FAB的代码:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_margin="16dp"
android:src="@drawable/add_chat"
android:tint="@android:color/white" />
</android.support.design.widget.CoordinatorLayout>
渐变背景的代码:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:endColor="#e4849f"
android:startColor="#d96e30" />
</shape>
android:backgroundTint =“”或app:backgroundTint =“”两者都只使用颜色资源。任何人都建议如何做到这一点? 谢谢!!
答案 0 :(得分:6)
第1步。创建新的 drawable.xml 并将此代码添加到其中
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:type="linear"
android:angle="0"
android:startColor="#f6ee19"
android:endColor="#115ede" />
</shape>
</item>
<item android:gravity="center"
>
<bitmap android:src="@drawable/your_icon"
android:gravity="fill_horizontal" />
</item>
</layer-list>
第2步。)现在在 dimens.xml 中添加以下代码行,
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
第3步。)最后使用*android:src="@drawable/drawable.xml"*
P.S。 - 确保 your_icon 是 PNG,JPEG 。
答案 1 :(得分:1)
可接受的答案工作正常,但添加以下行后,它将拉伸在 FAB
上添加的图标<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
我正在分享屏幕截图:
上一个 FAB按钮
在dimen.xml中添加 design_fab_image_size 并添加android:src="@drawable/gradient"
后,图标将被拉伸:
为解决这个问题,我用以下代码替换了我的gradient.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:startColor="#00FF00"
android:endColor="#000000" />
<size
android:width="56dp"
android:height="56dp" />
</shape>
</item>
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
</item>
<item
android:left="10dp"
android:right="10dp">
<rotate
android:fromDegrees="90">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
</rotate>
</item>
输出:
答案 2 :(得分:1)
floatingActionButton: FloatingActionButton(
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [
Color.fromRGBO(55, 59, 68, 1),
Color.fromRGBO(66, 134, 244, 1)
]),
),
child: Icon(Icons.add)),
onPressed: () => _startAddNewTransaction(context),
),
答案 3 :(得分:1)
我尝试了很多不同的答案,但都有各自的缺点或不适用于 material FAB
。
当我意识到这不是它的意义时,我只是将它替换为 ImageView
。这很好用,而且看起来完全一样。
<ImageButton
android:id="@+id/floatingActionButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@drawable/fab_gradient"
android:elevation="6dp"
... />
fab_gradient.xml:
<ripple android:color="?attr/colorControlHighlight"
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="oval">
<gradient
android:type="linear"
android:angle="90"
android:startColor="@color/startColor"
android:endColor="@color/endColor" />
</shape>
</item>
<item android:drawable="@drawable/vector_icon" android:gravity="center" />
</layer-list>
</item>
</ripple>
答案 4 :(得分:0)
不,在不违反UI准则的情况下,无法提供自定义可绘制或渐变或FAB图标。该图标仅接受backgroundTint
到FAB图标。 UI准则明确指出
不要给浮动动作按钮额外的尺寸。
阅读本文:Material Guidelines FAB icon
如果您仍想在FAB上实现渐变,可以使用一个简单的按钮复制FAB图标,然后为其添加渐变颜色。
答案 5 :(得分:0)
此方法也有效。 在drawable中创建一个名为 fab_background.xml 的形状,您可以在其中进行所需的所有自定义操作
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="150dp" android:height="150dp"/>
<gradient android:startColor="@color/colorAccentDark" android:endColor="@color/colorAccent"/>
</shape>
在布局中创建一个名为 custom_fab.xml 的布局,然后使用图像视图设置背景和工厂图标
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="50dp"
android:layout_height="50dp"
android:gravity="center"
android:background="@drawable/fab_background"
>
<android.appcompat.widget.AppCompatImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/right" />
</LinearLayout>
然后您可以使用include
示例
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/background"
android:orientation="vertical">
<include layout="@layout/custom_fab"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="32dp"/>
</RelativeLayout>
答案 6 :(得分:0)
<style name="FullFABStyle">
<item name="fabSize">normal</item>
<item name="maxImageSize">@dimen/fab_size</item>
<item name="fabCustomSize">@dimen/fab_size</item>
</style>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
style="@style/FullFABStyle"
app:srcCompat="@drawable/your_background" />
所以,您不需要覆盖尺寸
答案 7 :(得分:0)
使用CardView
来产生波纹效果:
<androidx.cardview.widget.CardView
android:layout_width="56dp"
android:layout_height="56dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="28dp"
app:cardElevation="12dp"
app:cardUseCompatPadding="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/fab_gradient">
<ImageView
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/icon_svg"
app:tint="@color/white" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
以上答案不适用于SVG,并且您可能还会看到拉伸的图标等。根据fab的材料设计,这是我用于我的应用程序的一种简洁方法:
提示:如果未出现在所需图层上方,请使用elevation
属性。