web-dev-qa-db-ja.com

フローティングアクションボタンの背景をグラデーションにする方法は？

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 = ""はどちらもカラーリソースのみを使用します。これを行う方法を誰かが提案できますか？ありがとう！

androidfloating-action-button
6
Kinjal Rathod

ステップ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"*を使用してFABでこのdrawable.xmlを設定します。

P.S. your_iconがPNG、JPEGであることを確認してください。

9
codervishal

受け入れられた回答は正常に機能していますが、以下の行を追加すると、追加されたアイコンが引き伸ばされます[〜＃〜] fab [〜＃〜]

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

スクリーンショットを共有しています：

前FABボタン

previous **FAB button**

Dimen.xmlにdesign_fab_image_sizeを追加し、Android:src="@drawable/gradient"を追加すると、アイコンが引き伸ばされます。

Stretched Fab button

これに対処するために、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>

出力：

fab_with_gradient

4
Kavita_p

この方法も機能します。必要なすべてのカスタマイズを実行できるドローアブルで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>
1
Jay
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),
  ),

これがFloatingActionButtonの画像です

0
rixcian