Выровняйте две поплавковые кнопки рядом друг с другом

Question

немного новичок здесь. Я пытаюсь выровнять две кнопки действий по плаванию рядом друг с другом, но они немного перекрываются. Вероятно, необходим вид поля, я попытался с layout_marginRight = "85dp", но он не работает.

Скриншот

<android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/AppTheme.PopupOverlay" /> 

     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

    <include layout="@layout/content_user_profile" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end" 
     android:src="@drawable/ic_chat_white_24dp" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     app:layout_anchor="@id/fab" 
     app:layout_anchorGravity="left|center" 
     android:src="@drawable/ic_person_add_white_24dp"/> 

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

Как заставить их правильно просмотра? Благодарю.

Answer 1

Я должен сказать, что это не очень хороший опыт, чтобы поместить два FloatingActionButton бок о бок. Обычно ставьте один FAB или пытайтесь добавить на него меню. Посмотрите это: https://github.com/Clans/FloatingActionButton

Answer 2

Самый лучший способ, что я мог бы найти, было инкапсулировать два Fab-фрагменты в RelativeLayout, например, так:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="bottom" 
    android:layout_margin="20dp"> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentEnd="true" 
     android:src="@drawable/ic_chat_white_24dp"/> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentEnd="true" 
     android:layout_marginRight="50dp" 
     android:src="@drawable/ic_person_add_white_24dp"/> 
</RelativeLayout> 

RelativeLayout будет иметь такую ​​же высоту, что и FABs, так вам не нужно думать о выравнивании по высоте. В FABs будет выровнена с правой стороны, из-за эту линию:

android:layout_alignParentEnd="true" 

Вы можете настроить значение Маржи в каждом макете, чтобы соответствовать вашим потребностям. Я думаю, что это должно ответить на ваш вопрос.

EDIT: Вышеуказанное не будет работать так, как вы планировали. Это будет:

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar" 
    android:layout_width="match_parent" 
    android:layout_height="85dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/AppTheme.AppBarOverlay"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/toolbar_layout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 


</LinearLayout> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:layout_anchor="@id/app_bar" 
    app:layout_anchorGravity="bottom|right" 
    android:layout_margin="20dp"> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentEnd="true" 
    android:src="@android:drawable/ic_person_add_white_24dp" 
    android:visibility="visible"/> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentEnd="true" 
     android:layout_marginRight="20dp" 
     android:src="@android:drawable/ic_person_add_white_24dp" /> 
</RelativeLayout> 

Объяснение

я теперь использовать

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar" 
    android:layout_width="match_parent" 
    android:layout_height="85dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/AppTheme.AppBarOverlay"> 

в качестве якоря для RelativLayout, который содержит FABS.

Удалено android:layout_gravity="bottom" из RelativeLayout и заменено его app:layout_anchor="@id/app_bar" и app:layout_anchorGravity="bottom|right".

По-прежнему необходимо отрегулировать поля для ваших нужд. Также я добавил android:layout_height="85dp" в ваш AppBarLayout, потому что у меня не было android:layout_height="@dimen/app_bar_height". Просто замените это. Надеюсь, это поможет.