How to place correctly two views in a framelayout?-CodePudding

I am trying to get this design:

But my problem is that i can't get to place the red view exacly like in the photo above.

For now I'm using a framelayout but I still can't get the desire design.

Xml:

            <FrameLayout
            android:id="@ id/mental_health_card_h_c_ll_chat_image"
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:background="@drawable/bg_doctor_image_empty"
            android:gravity="center">

            <LinearLayout
                android:id="@ id/mental_health_card_h_c_ll_chat_notifications_image"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_gravity="top|right"
                android:background="@drawable/background_sendbird_notification"
                android:gravity="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.movistar.movistarsalud.components.TeladocTextView
                    android:id="@ id/mental_health_card_h_c_ll_chat_notifications_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="12dp"
                    app:textColor="?attr/white"
                    app:textType="regular"
                    tools:text="2"
                    tools:textColor="?attr/white" />

            </LinearLayout>

            <com.movistar.movistarsalud.components.TeladocImageView
                android:id="@ id/mental_health_card_h_c_chat_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_i037_chat__1_"
                app:riv_oval="true" />

        </FrameLayout>

And what i have until now:

CodePudding user response：

You're pretty close! And I'd recommend ConstraintLayout for positioning stuff - but if you really want to use a FrameLayout (combined with a LinearLayout - I doubt it's more efficient than just using a ``ConstraintLayout) then I think your issue is the chat ImageView` is too large.

If you imagine the FrameView as a box around your image, you have the notification dot right in the top-right corner. That shows you where the top and right edges of the frame are. You can also see that the chat image (including the blue circle) is up against those edges too - in your example pic, there's a bit of a gap.

So you'll need to experiment with setting different layout_width and height values on your ImageView. Try 40dp and see how that looks. Also you'll probably want to mess with your scaleType, you want the image to shrink, not get cropped (your version already looks a lot bigger than the example)

CodePudding user response：

Simply you are missing to add elevation to your LinearLayout.

You need to add this line, and your text would be shown over the chat icon.

android:elevation="1dp"