2つのウィジェット/レイアウトの間に新しい「フローティングアクションボタン」を追加する方法

Question

私はあなたが新しい "Floating Action Button" a.k.a "FAB"で、あなたが新しいAndroidのデザインガイドラインを見たことがあると思います

例えば、このピンクのボタン：

私の質問は愚かに聞こえます、そして私はすでに多くのことを試みました、しかし、2つのレイアウトの交差点にこのボタンを置くための最良の方法は何ですか？

上記の例では、このボタンはImageViewであると想像できるものとrelativeLayoutの間に完全に配置されています。

私はすでにたくさんの調整を試みましたが、それをするための正しい方法があると確信しています。

Answer 1

ベストプラクティス：

• Gradleファイルにcompile 'com.Android.support:design:25.0.1'を追加
• ルートビューとしてCoordinatorLayoutを使用します。
• FABにlayout_anchorを追加して上面図に設定します。
• FABにlayout_anchorGravityを追加して次のように設定します。bottom|right|end

<Android.support.design.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">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <LinearLayout
            Android:id="@+id/viewA"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_weight="0.6"
            Android:background="@Android:color/holo_purple"
            Android:orientation="horizontal"/>

        <LinearLayout
            Android:id="@+id/viewB"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_weight="0.4"
            Android:background="@Android:color/holo_orange_light"
            Android:orientation="horizontal"/>

    </LinearLayout>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="16dp"
        Android:clickable="true"
        Android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</Android.support.design.widget.CoordinatorLayout>

Answer 2

この例で最もクリーンな方法は次のようになります。

• RelativeLayoutを使用する
• 隣接する2つのビューを上下に配置します
• FABを親の右端に合わせて右端マージンを追加します。
• FABをヘッダービューの下部に揃え、影を含めてFABの半分のサイズの 負の 余白を追加

シャーマンランド実装から適応された例は、あなたが望むどんなFABでも使います。 FABがshadowを含めて64dpの高さであると仮定します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <View
        Android:id="@+id/header"
        Android:layout_width="match_parent"
        Android:layout_height="120dp"
    />

    <View
        Android:id="@+id/body"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_alignBottom="@id/header"
        Android:layout_marginBottom="-32dp"
        Android:layout_marginRight="20dp"
    />

</RelativeLayout>

Answer 3

File> Import Sample ...をクリックして、Android StudioにGoogleのサンプルプロジェクトをインポートできます。

このサンプルには、FrameLayoutから継承したFloatingActionButtonビューが含まれています。

編集 新しいSupport Design Libraryを使用すると、この例のように実装できます。 https://github.com/chrisbanes/cheesesquare

Answer 4

AppCompat 22では、FABは古いデバイスでサポートされています。

Build.gradle（app）に新しいサポートライブラリを追加します。

compile 'com.Android.support:design:22.2.0'

それからあなたはあなたのxmlの中でそれを使うことができます：

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:src="@Android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

elevationおよびpressedTranslationZプロパティを使用するには、ネームスペースappが必要です。したがって、このネームスペースをレイアウトに追加します。xmlns:app="http://schemas.Android.com/apk/res-auto"

Answer 5

今では公式のデザインサポートライブラリの一部です。

あなたの成績で：

compile 'com.Android.support:design:22.2.0'

http://developer.Android.com/reference/Android/support/design/widget/FloatingActionButton.html

Answer 6

このライブラリ （ javadocはこちら ）、最小APIレベルは7です。

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

それはテーマ、xmlまたはJavaコードによってそれをカスタマイズする能力を持つ単一のウィジェットを提供します。

使い方はとても簡単です。 プロモートアクション パターンに従って利用可能なnormalとminiの実装があります。

<com.shamanland.fab.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

demoアプリ をコンパイルしてみてください。徹底的な例があります：ListView、2つのビュー間で位置合わせを使った明るいテーマと暗いテーマ。

Answer 7

追加の無料 Android用フローティングアクションボタンライブラリ は次のとおりです。多くのカスタマイズがあり、SDKバージョン9以降が必要です。

フルデモビデオ

dependencies {
    compile 'com.scalified:fab:1.1.2'
}

Answer 8

丸みを帯びたxml背景を指定することで、TextViewを使用してフローティングアクションボタンを簡単に追加 - gradleファイルにコンパイルcom.Android.support:design:23.1.1を追加

• ルートビューとしてCoordinatorLayoutを使用します。
• CoordinatorLayoutを終了する前にtextViewを紹介してください。
• Drawableの内側に円を描きます。

サークルXmlは

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">

    <solid
        Android:color="@color/colorPrimary"/>
    <size
        Android:width="30dp"
        Android:height="30dp"/>
</shape>

レイアウト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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:weightSum="5"
    >

    <RelativeLayout
        Android:id="@+id/viewA"
        Android:layout_height="0dp"
        Android:layout_width="match_parent"
        Android:layout_weight="1.6"
        Android:background="@drawable/contact_bg"
        Android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        Android:layout_height="0dp"
        Android:layout_width="match_parent"
        Android:layout_weight="3.4"
        Android:orientation="vertical"
        Android:padding="16dp"
        Android:weightSum="10"
        >

        <LinearLayout
            Android:layout_height="0dp"
            Android:layout_width="match_parent"
            Android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            Android:layout_height="0dp"
            Android:layout_width="match_parent"
            Android:layout_weight="1"
            Android:weightSum="4"
            Android:orientation="horizontal"
            >
            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:text="Name"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

            <TextView
                Android:id="@+id/name"
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="3"
                Android:text="Ritesh Kumar Singh"
                Android:singleLine="true"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            Android:layout_height="0dp"
            Android:layout_width="match_parent"
            Android:layout_weight="1"
            Android:weightSum="4"
            Android:orientation="horizontal"
            >
            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:text="Phone"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

            <TextView
                Android:id="@+id/number"
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="3"
                Android:text="8283001122"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:singleLine="true"
                Android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            Android:layout_height="0dp"
            Android:layout_width="match_parent"
            Android:layout_weight="1"
            Android:weightSum="4"
            Android:orientation="horizontal"
            >
            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:text="Email"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="3"
                Android:text="[email protected]"
                Android:textSize="22dp"
                Android:singleLine="true"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            Android:layout_height="0dp"
            Android:layout_width="match_parent"
            Android:layout_weight="1"
            Android:weightSum="4"
            Android:orientation="horizontal"
            >
            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="1"
                Android:text="City"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:padding="3dp"
                />

            <TextView
                Android:layout_height="match_parent"
                Android:layout_width="0dp"
                Android:layout_weight="3"
                Android:text="Panchkula"
                Android:textSize="22dp"
                Android:textColor="@Android:color/black"
                Android:singleLine="true"
                Android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        Android:id="@+id/floating"
        Android:transitionName="@string/transition_name_circle"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:layout_margin="16dp"
        Android:clickable="false"
        Android:background="@drawable/circle"
        Android:elevation="10dp"
        Android:text="R"
        Android:textSize="40dp"
        Android:gravity="center"
        Android:textColor="@Android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

        </Android.support.design.widget.CoordinatorLayout>

どのように見えるかを見るにはここをクリック

Answer 9

これをあなたのgradleファイルに追加してください

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.Android.support:appcompat-v7:23.0.0'
    compile 'com.Android.support:design:23.0.1'
}

これはあなたのactivity_main.xmlに

<Android.support.design.widget.CoordinatorLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <LinearLayout Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

            <LinearLayout
                Android:id="@+id/viewOne"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_weight="0.6"
                Android:background="@Android:color/holo_blue_light"
                Android:orientation="horizontal"/>

            <LinearLayout
                Android:id="@+id/viewTwo"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_weight="0.4"
                Android:background="@Android:color/holo_orange_light"
                Android:orientation="horizontal"/>

        </LinearLayout>

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/floatingButton"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_margin="16dp"
            Android:clickable="true"
            Android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </Android.support.design.widget.CoordinatorLayout>

あなたは http://www.ahotbrew.com/Android-floating-action-button/ でダウンロードするためのAndroidスタジオプロジェクトの完全な例を見つけることができます。

Answer 10

これが実用的なコードです。

私は私のfloatingActionButtonを固定するためにappBarLayoutを使います。 これが役に立つことを願っています。

XMLコード.

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_height="192dp"
        Android:layout_width="match_parent">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            Android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <Android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                Android:id="@+id/toolbarItemDetailsView"
                Android:layout_height="?attr/actionBarSize"
                Android:layout_width="match_parent"></Android.support.v7.widget.Toolbar>
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="Android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                Android:orientation="vertical"
                Android:focusableInTouchMode="true"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    Android:visibility="gone"
                    Android:layout_marginTop="56dp"
                    Android:layout_width="match_parent"
                    Android:layout_height="230dp"
                    Android:scaleType="centerCrop"
                    Android:src="@drawable/third" />


                <ScrollView
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">

                    <RelativeLayout
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_gravity="center"
                        Android:orientation="vertical">

                        <Android.support.v7.widget.CardView
                            Android:layout_width="match_parent"
                            Android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                Android:layout_width="match_parent"
                                Android:layout_height="match_parent"
                                Android:layout_margin="8dp"
                                Android:padding="3dp">


                                <LinearLayout
                                    Android:layout_width="match_parent"
                                    Android:layout_height="match_parent"
                                    Android:orientation="vertical">


                                    <TextView
                                        Android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginLeft="4dp"
                                        Android:text="Title" />

                                    <LinearLayout
                                        Android:layout_width="match_parent"
                                        Android:layout_height="match_parent"
                                        Android:layout_marginTop="8dp"
                                        Android:orientation="horizontal">

                                        <TextView
                                            Android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginLeft="4dp"
                                            Android:layout_weight="1"
                                            Android:text="Shope Name" />

                                        <TextView
                                            Android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginRight="4dp"
                                            Android:gravity="right"
                                            Android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        Android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        Android:layout_width="match_parent"
                                        Android:minLines="5"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginLeft="4dp"
                                        Android:layout_marginTop="16dp"
                                        Android:text="description" />

                                    <LinearLayout
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginBottom="8dp"
                                        Android:orientation="horizontal">

                                        <TextView
                                            Android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginLeft="4dp"
                                            Android:layout_weight="1"
                                            Android:text="Qunatity" />

                                        <TextView
                                            Android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginRight="4dp"
                                            Android:layout_weight="1"
                                            Android:gravity="right"
                                            Android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        Android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginRight="4dp"
                                        Android:layout_weight="1"
                                        Android:gravity="right"
                                        Android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </Android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </Android.support.constraint.ConstraintLayout>

    </Android.support.v4.widget.NestedScrollView>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        Android:layout_marginEnd="@dimen/_6sdp"
        Android:src="@drawable/ic_done_black_24dp"
        Android:layout_height="wrap_content" />

</Android.support.design.widget.CoordinatorLayout>

上記のコードを貼り付けたら。あなたはあなたのデバイス上で次のような結果を見るでしょう。