How can I have this layout like the circular box is on the top of the rectangular box but the center of circle is at the end?

Depends on the radius of the circle. Is it fixed? If it is, you might be able to use a

Box

parent, set the circle to bottom-center and set bottom padding on the rectangle.

I had to do something similar, in addition to what kirill said, there is also an offset modifier. I think I used that and just used half the heigh of the circle size as the offset.

Thanks, guys I am like it is that simple, why didn't I think it earlier, I was thinking something complex 😅 I implemented the Kirill 's method

This also is a great candidate for ConstraintLayout if the size of the elements are not fixed

yes constraint layout is super handy in these layouts I am gonna try that out also.