CoordinatorLayout layout_anchorGravity not working?

Question

I am trying to make a layout design .In which i set anchorGravity of two views card view and fab. but fab is correct position but the card view not correct position. I also attach two images for explanation. Why does it happens ? How can I Solve it ?

<androidx.coordinatorlayout.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="wrap_content"
android:background="@android:color/transparent">


<androidx.cardview.widget.CardView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="25dp"
    android:src="@drawable/ic_outline_done_24"
    app:borderWidth="0dp"
    app:cardBackgroundColor="@color/colorAccent"
    app:elevation="6dp"
    app:layout_anchor="@id/left_layout"
    app:layout_anchorGravity="top|right">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:src="@drawable/add"
        app:tint="@color/colorPrimary" />
</androidx.cardview.widget.CardView>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_category"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="25dp"
    android:background="@color/blue"
    android:fitsSystemWindows="true"
    android:src="@drawable/ic_outline_done_24"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal"
    app:layout_anchor="@id/right_layout"
    app:layout_anchorGravity="top|right">

</com.google.android.material.floatingactionbutton.FloatingActionButton>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/account_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@color/smallFont"
            android:orientation="vertical">

            <TextView
                android:id="@+id/accout_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="20dp"
                android:text="title"
                android:textColor="@color/white"
                android:textSize="20dp">

            </TextView>

            <TextView
                android:id="@+id/account_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="@string/amount"
                android:textColor="@color/white" />
        </LinearLayout>


    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/cat_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="50dp"
            android:background="@color/blue"
            android:orientation="vertical">

            <TextView
                android:id="@+id/cat_title_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="20dp"
                android:text="Title"
                android:textColor="@color/white"
                android:textSize="20sp">

            </TextView>

            <TextView
                android:id="@+id/category_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:text="sub title"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I am try different solution but can solve this problem.

Answer 1

Specifying and anchor gravity of top|right will position a view centered on the top/right corner of the anchor view. But, if the anchor view butts up against a side of the coordinator layout, the view that is being anchored will shift inward. Here is an example:

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="match_parent"
        android:layout_height="84dp"
        android:background="@android:color/holo_green_light"
        android:orientation="vertical" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_anchor="@id/left_layout"
        app:layout_anchorGravity="top|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

This is like your FAB. Everything seems to behave. Now lets shrink the width of the LinearLayout and move it down to the vertical center of the layout to move it away from the sides of the CoordinatorLayout. (The change in width and moving to the vertical center are the only changes to the layout.)

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="200dp"
        android:layout_height="84dp"
        android:layout_gravity="center_vertical"
        android:background="@android:color/holo_green_light"
        android:orientation="vertical" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_anchor="@id/left_layout"
        app:layout_anchorGravity="top|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

This is what the anchoring specified does if it doesn't run into one of the sides of the CoordinatorLayout.

If we add android:layout_gravity="bottom" to the view then this is what we see:

That is better but where are the margins? And why does that work (sort of) anyway?

If you can, I suggest that you wrap the left_layout LinearLayout in a FrameLayout and use layout gravity to position the view.

<androidx.coordinatorlayout.widget.CoordinatorLayout x
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <FrameLayout
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/left_layout"
            android:layout_width="200dp"
            android:layout_height="84dp"
            android:layout_gravity="center_vertical"
            android:background="@android:color/holo_green_light"
            android:orientation="vertical" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="16dp"
            android:layout_gravity="top|end"
            android:background="@android:color/holo_blue_light" />

    </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>