2

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

enter image description here

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:

enter image description here

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

Community
  • 1
  • 1
Joe Rakhimov
  • 4,713
  • 9
  • 51
  • 109

1 Answers1

4

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...

Aracem
  • 7,227
  • 4
  • 35
  • 72
  • 1
    Thank you very much for answer! This works! I made marginTop and marginRight 10dp! And thanks for recommendation! – Joe Rakhimov Aug 23 '15 at 13:02