Android - How to make one view's center on another view's top right corner inside list item layout

Question

In GridView, I am showing grid of books. Each book has status - new, favorite, done. This is example, what I want to implement:

My layout has 2 ImageViews: 1 for book cover and 1 for book status icon(new, done, favorite)

        <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/ivCover"
            android:layout_width="95dp"
            android:layout_height="146dp"
            />
        <ImageView
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:src="@drawable/icon_new"
            android:layout_alignParentTop="@id/ivCover"
            android:layout_alignRight="@id/ivCover"
            android:background="@drawable/shape_round_book_status"
            android:layout_marginRight="-13dp"
            android:layout_marginTop="-13dp"/>
    </RelativeLayout>

I found how to position one view's center on another view's top right corner here . In that example, solution was for one item - linear layout. In my case, I am putting status icon on the corner for grid view item. In result, most of status icon not visible:

How to make one view's center on another view's top right corner inside list item layout?

Answer 1

To be more efficient you can do this with a FrameLayout that is better for performance than RelativeLayout .

Say that, the trick to do it is put a margin in the book image to simulate that the badge exit the image. For example like this

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

    <ImageView
        android:id="@+id/ivCover"
        android:layout_width="95dp"
        android:layout_height="146dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="30dp"
        />

    <ImageView
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:src="@drawable/icon_new"
        android:layout_gravity="top|right"
        android:background="@drawable/shape_round_book_status"/>

</FrameLayout>

Adjust the layout margin to fit your design.

** Other little recommendation is use x8 sizes to be "more material" (or x4 if you need middle sizes). Instead of 95dp use 96, instead of 146 use 144 or 152...