androidandroid-layoutandroid-coordinatorlayoutfloating-action-button
FloatingActionButton between layouts with CollapsingToolbarLayout
I would like to add a floating action button between two layouts with different elevation to get something like this:
This is my layout, but probably it's overcomplicated:
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
android:theme="@style/AppTheme.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.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="@color/color_primary"
app:scrimAnimationDuration="300"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/trailer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:ignore="ContentDescription" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat"
app:layout_collapseMode="pin" />
</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"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@color/color_primary"
android:elevation="16.0dp">
<com.est.streamcorn.views.AspectRatioImageView
android:id="@+id/image"
android:layout_width="150dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:scaleType="centerInside"
android:theme="@style/MoviePosterImage"
tools:ignore="ContentDescription"
app:elevation="6dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:elevation="6dp"
app:srcCompat="@drawable/player_action_play"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/image"/>
<TextView
android:id="@+id/link1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/title"
app:layout_constraintStart_toEndOf="@id/image"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
All the examples I found anchor the floating button to the coordinator layout, but I would like to have it fixed like the other elements inside the NestedScrollView. Mybe there is a better way to accomplish the different color and elevation without needing two different layouts?
Solution
At the end I was able to achieve this:
This is the layout:
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
android:background="@color/colorPrimaryReverse"
android:theme="@style/AppTheme.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
<com.est.streamcorn.views.CustomCollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:scrimAnimationDuration="250"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/trailer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scaleType="centerCrop"
tools:ignore="ContentDescription"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat"
app:layout_collapseMode="pin">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_marginEnd="5dp"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" />
</android.support.v7.widget.Toolbar>
</com.est.streamcorn.views.CustomCollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="40dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:layout_margin="20dp"
app:elevation="6dp"
app:srcCompat="@drawable/player_action_play"
app:backgroundTint="@color/colorAccent"
app:layout_anchor="@id/header"
app:layout_anchorGravity="bottom|right|end"/>
<android.support.v7.widget.CardView
android:id="@+id/image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
app:cardElevation="6dp"
app:cardCornerRadius="6dp"
app:layout_anchor="@id/header"
app:layout_anchorGravity="top|left|start">
<com.est.streamcorn.views.AspectRatioImageView
android:id="@+id/image"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
tools:ignore="ContentDescription"
app:aspectRatio="@dimen/movie_poster_aspect_ratio" />
</android.support.v7.widget.CardView>
<FrameLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@android:color/transparent"
android:elevation="4.0dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:background="@color/colorPrimaryReverse"
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
android:paddingEnd="0dp"
android:paddingStart="135dp">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:ellipsize="end"
android:maxLines="2"
android:singleLine="false"
android:textAppearance="@style/MovieDetail.Title"
app:layout_constraintBottom_toTopOf="@id/text1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/download"
app:layout_constraintHorizontal_weight="0"
tools:text="The Martian - A Test Movie As Placeholder" />
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="@style/MovieDetail.Text1"
app:layout_constraintBottom_toTopOf="@id/text2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/download"
android:layout_marginBottom="5dp"
tools:text="2015" />
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="@style/MovieDetail.Text2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/download"
android:layout_marginBottom="15dp"
tools:text="141 minutes" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/title"
app:layout_constraintTop_toTopOf="@id/title"
app:layout_constraintEnd_toEndOf="parent"
app:backgroundTint="@android:color/transparent"
app:borderWidth="0dp"
app:elevation="0dp"
app:srcCompat="@drawable/ic_download"
tools:ignore="ContentDescription" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="150dp"
android:background="@color/backgroundColorReverse"
android:orientation="vertical"
android:paddingEnd="15dp"
android:paddingStart="15dp"
android:paddingTop="60dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textSize="16sp"
android:textAllCaps="true"
android:textColor="@color/textColorPrimaryReverse"
android:text="@string/description" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The custom view:
public class CustomCollapsingToolbarLayout extends CollapsingToolbarLayout {
private Boolean previousShowing = true;
public static interface Listener {
public void onContentScrimAnimationStarted(boolean showing);
}
private Listener mListener;
public CustomCollapsingToolbarLayout(Context context) {
super(context);
}
public CustomCollapsingToolbarLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomCollapsingToolbarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public void setScrimsShown(boolean shown, boolean animate) {
super.setScrimsShown(shown, animate);
if (animate && mListener != null && shown != previousShowing) {
mListener.onContentScrimAnimationStarted(shown);
previousShowing = shown;
}
}
public void setListener(Listener listener) {
mListener = listener;
}
}
And in the activity OnCreate:
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
TypedValue tv = new TypedValue();
getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true);
final int actionBarHeight = getResources().getDimensionPixelSize(tv.resourceId);
collapsingToolbarLayout.setScrimVisibleHeightTrigger(actionBarHeight + 100);
collapsingToolbarLayout.setListener(showing -> {
if(showing){
toolbarTitle.setVisibility(View.VISIBLE);
toolbarTitle.animate().alpha(1).setDuration(250);
}
else{
toolbarTitle.setVisibility(View.INVISIBLE);
toolbarTitle.animate().alpha(0).setDuration(250);
}
});
The custom view is needed only if you want to make the title disappear when expanding the CollapsingToolbarLayout. For the layout maybe it's not a good solution but it's smooth. Better ideas are welcome.