I am trying to implement a CoordinatorLayout
in which I need a shrinking card view. I plan to have different layouts for expanded and shrunk state of this card view later on. I have successfully implemented empty card view but I am getting a weird background in top margin of this card view.
Its difficult to explain in words so here are the pictures
Here is how my XML looks like for this activity
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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:layout_margin="16dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="@+id/toolbar">
<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.v7.widget.CardView-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:background="@color/colorAccent"-->
<!--android:layout_margin="8dp"/>-->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/>
<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"
app:srcCompat="@android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
I want this toolbar to float like a card view. Let me know if more details are needed from my end.
You can find full source code on Github Here .
You are setting layout_margin
to your AppBarLayout
which sets margin for this view vertically as well as horizontally (simply for top, bottom, right and left).
If you want to set margin from a specific side then you have to set margins manually by layout_marginLeft
, layout_marginRight
, layout_marginBottom
and layout_marginTop
.
So simply, if you want to remove top margin. Then simply set margins manually as,
<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:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp">
<!-- your components here -->
</android.support.design.widget.AppBarLayout>
I ended up adding the same amount padding to the CoordinatorLayout
android:paddingTop="16dp"
change android:layout_margin="16"
in your AppBarLayout to
android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp"
I have tested it and it works
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.