All geek questions in one place

Adding a FloatingActionButton to a minimized toolbar layout

Currently working on an application where I need to add the "share" and "add" buttons in the lower right corner of the Collapsing toolbar (for the parallax effect).

Which can hide while scrolling or sit on the Actionbar . Added image of what I want to achieve. There are currently no clues on how to do this ( with floating buttons with anchors, but with an error ).

This is what it should look like:

Here is the code:

  <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:id="@+id/htab_maincontent" 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" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/htab_appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/htab_collapse_toolbar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:id="@+id/htab_header" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/htab_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="top" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:titleMarginTop="13dp"/> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/htab_tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:background="@color/colorPrimary" app:tabIndicatorHeight="@dimen/tabIndicatorHeight"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/htab_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
+5
source share
1 answer

If you use this in CollapsingToolbarLayout , you can do this:

 <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbarCollapse" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:layout_height="190dp" android:background="@android:color/darker_gray" android:minHeight="190dp" android:src="@drawable/ic_email" app:layout_collapseMode="parallax" android:id="@+id/imageView8" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignTop="@+id/fabmain2" android:layout_toStartOf="@+id/fabmain2" android:layout_marginEnd="20dp" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginLeft="16dp" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginRight="16dp" android:layout_marginEnd="23dp" android:layout_alignBottom="@+id/imageView8" android:layout_alignParentEnd="true" android:layout_marginBottom="29dp" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" app:layout_collapseMode="pin" /> </RelativeLayout> </android.support.design.widget.CollapsingToolbarLayout>

Also, according to Google Material Design , I don’t think if this is the standard way / or a good way for two buttons

Also, this is my idea (standard way):

You can add a Share action with this icon on the Actionbar , and then use a single FloatingActionButton as follows:

https://github.com/xuyisheng/DesignSupportLibraryDemo

Or I did it myself:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#EEEEEE" android:fitsSystemWindows="true"> <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!--Your content--> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layoutdetails" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/thumbnaildetails" android:layout_width="match_parent" android:layout_height="200dp" android:layout_alignParentStart="true" android:contentDescription="@string/imghd" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <TextView android:id="@+id/txtitemdetailstitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="85dp" android:textAppearance="?android:attr/textAppearanceMedium" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/tbbardetails" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_collapseMode="pin" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/ic_work" app:backgroundTint="#E91E63" app:fabSize="normal" app:layout_anchor="@id/app_bar_layoutdetails" app:layout_anchorGravity="right|bottom" /> </android.support.design.widget.CoordinatorLayout>
+6
source

Source: https://habr.com/ru/post/1240666/

More articles:


All Articles