Как я могу добавить новую «Плавающую кнопку действия» между двумя виджетами / макетами

287

Я полагаю, что вы видели новые рекомендации по дизайну Android с новой «плавающей кнопкой действия», также называемой «FAB»

Например, эта розовая кнопка:

введите описание изображения здесь

Мой вопрос звучит глупо, и я уже много чего перепробовал, но как лучше всего поставить эту кнопку на пересечении двух макетов?

В приведенном выше примере эта кнопка идеально расположена между тем, что мы можем представить как ImageView и относительный макет.

Я уже пробовал много твиков, но я убежден, что есть правильный способ сделать это.

Waza_Be
источник
Вы можете расположить макеты внутри макета и расположить кнопку на этом макете
Chrome Penguin Studios
1
Я думаю, что эта библиотека может очень помочь: github.com/ksoichiro/Android-ObservableScrollView
разработчик Android
Как скрыть это при прокрутке? Я сталкиваюсь с проблемой, когда, если я прокручиваю страницу, fab остается сверху и не прячется! Пожалуйста, помогите
Аниш Кумар

Ответы:

473

Лучшая практика:

  • Добавить compile 'com.android.support:design:25.0.1' в файл Gradle
  • использование CoordinatorLayout как корневой вид.
  • Добавить layout_anchorв FAB и установить его на вид сверху
  • Добавьте layout_anchorGravityв FAB и установите для него: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>
Дэвид
источник
3
@Aprendiz Я также хотел бы привести цитату, но я понимаю, почему этот ответ лучше, чем у ХьюДжеффнера. Я нахожу это проще, более гибким, менее хакерским. Вы не жестко кодируете значения layout_height или margin, которые могут изменяться во времени или быть определены динамически. Ответ Хью может работать в некоторых простых случаях, и , возможно , может быть обходной путь для некоторых сторонних библиотек , которые не полностью поддерживают CoordinatorLayoutи layout_anchorи layout_anchorGravityособенности, как та , которую он использует, futuresimples .
acrespo
1
Кстати, futuresimples - это библиотека AWESOME , и в случае, если кому-то интересно, есть форк, который объединяет этот CoordinatorLayoutподход с этой библиотекой, посмотрите . И есть также вилка для более старых версий.
acrespo
2
Я искал именно это. +1 для простоты.
Эмилиано Де Сантис
29
Почему не все это в документации Android?
Мостафа
3
использование app: layout_anchor вызывает у меня проблемы с рендерингом (линейные макеты не могут быть преобразованы в координатный
макет
91

Похоже, что самый чистый способ в этом примере:

  • Используйте RelativeLayout
  • Расположите 2 смежных вида один под другим
  • Выровняйте FAB по родительскому праву / концу и добавьте правое / конечное поле
  • Выровняйте FAB по нижней части представления заголовка и добавьте отрицательное поле, половину размера FAB, включая тень

Пример адаптирован из реализации Shamanland, используйте любой FAB по вашему желанию. Предположим, что FAB имеет высоту 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>

Пример макета FAB

Хью Джеффнер
источник
Этот макет сделал свое дело для меня! Я использую FABпо futuresimple - это довольно просто , чтобы добавить и использовать, наслаждайтесь!
Роман
Как вы сказали «Расположите 2 смежных вида один под другим» -> это была проблема, которую я получил, я просто упустил из виду, что моя «схема контейнера» была испорчена несоответствующими скобками: D Спасибо: P
Мартин Пфеффер,
Это не хорошее решение. Отрицательное поле устраняет нижнюю половину цели касания кнопки. Клики не регистрируются, если я нажимаю нижнюю половину потрясающего.
Доронц
1
@ Доронз Хмм, у меня, похоже, нет этой проблемы. Ваши взгляды в правильном порядке, то есть FAB - верхний слой?
Хью Джеффнер
23
android: layout_marginBottom = "- 32dp" жестко закодированное значение с кнопкой wrap_content - плохое решение
Лестер
51

Вы можете импортировать пример проекта Google в Android Studio, нажав Файл> Импортировать образец ...

Образец импорта

Этот образец содержит представление FloatingActionButton, которое наследуется от FrameLayout.

Редактировать С помощью новой библиотеки проектирования поддержки вы можете реализовать ее, как в следующем примере: https://github.com/chrisbanes/cheesesquare

Рул
источник
1
Вы должны иметь Android-21 для запуска.
Юлия Ашомок
Вы должны использовать библиотеку поддержки дизайна, если вы хотите использовать FloatingActionButton. Смотрите сырную площадь Google.
Roel
16

С AppCompat 22 FAB поддерживается для старых устройств.

Добавьте новую библиотеку поддержки в ваш build.gradle (приложение):

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"

Одед Брейнер
источник
3
добавить информацию о appпространстве имен
Лукаш 'Severiaan' Grela
14

Теперь это часть официальной библиотеки поддержки дизайна.

В твоем gradle:

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

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

Veronnie
источник
5
Ваш ответ немного неясен и неопределенен. Не могли бы вы объяснить, что является частью DSL, и, возможно, процитировать соответствующую информацию с этой страницы.
SuperBiasedMan
Извините, я видел много ссылок на внешние библиотеки, поэтому я хотел указать на официальную библиотеку. Библиотека может создавать только кнопки, но позиционирование осуществляется разработчиками. Так что мой пост не очень актуален, извините.
Веронни
12

Попробуйте эту библиотеку ( javadoc здесь ), минимальный уровень API равен 7:

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

Он предоставляет один виджет с возможностью его настройки с помощью Theme, XML или Java-кода.

свет между

Это очень просто в использовании. Есть в наличии normalи miniреализация по шаблону Promoted Actions .

<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"
    />

Попробуйте скомпилировать демо-приложение . Есть исчерпывающий пример: светлые и темные темы, используя с ListView, выровнять между двумя представлениями .

Алексей К.
источник
3
Просто чтобы добавить к этому ответу ^ Вы также можете использовать другие доступные библиотеки бэкпорта , такие как: github.com/FaizMalkani/FloatingActionButton и github.com/makovkastar/FloatingActionButton . Оба из которых могут показаться более значительными. Но просто следуйте подробному представлению из источника, указанного в этом ответе. Прекрасно работает.
Джон Шелли
это официальная библиотека?
Cocorico
нет официальной библиотеки. это моя библиотека с открытыми исходниками.
Алексей К.
Эта плавающая кнопка действия - плохой пример того, как ее реализовать. Это не соответствует истинным рекомендациям по дизайну материалов.
Майкл
@ Майк Милла, что не так с этой библиотекой? какие требования не выполняются?
Алексей К.
9

Вот еще одна бесплатная библиотека Floating Action Button для Android . Он имеет много настроек и требует SDK версии 9 и выше

введите описание изображения здесь

Полное Демо Видео

dependencies {
    compile 'com.scalified:fab:1.1.2'
}
Владислав Байдак
источник
3
Вопрос не в том, как вы используете FAB , а в том, как вы расположите его так, чтобы он совмещал два представления. Вздох.
Скотт Биггс
6

Сохраняйте это простым Добавление плавающей кнопки действия с помощью TextView, предоставляя закругленный фон XML. - Добавить компиляцию com.android.support:design:23.1.1в файл Gradle

  • Используйте 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="ritesh.singh@betasoftsystems.com"
                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>

Нажмите здесь, чтобы увидеть, как это будет выглядеть

Ritesh
источник
5

Добавьте это в ваш файл 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>

Вы можете найти полный пример проекта Android Studio для загрузки на http://www.ahotbrew.com/android-floating-action-button/

Гуриндер Сингх
источник
1

здесь работает код.

я использую appBarLayout, чтобы закрепить плавающую кнопку ActionActionButton.надеюсь, что это может быть полезным.

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>

Теперь, если вы вставите код выше. вы увидите следующий результат на вашем устройстве. Изображение результата

Rk215 Tech
источник