How to align view by center point?

Question

I would like to create this layout

Then I found this

Android - How do I position views in an offset relative to the center/top/bottom (etc.) of their parent?

So I created this layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.myapplication.MainActivity">
    <View
        android:id="@+id/square"
        android:layout_width="100dp"
        android:background="#ff0000"
        android:layout_centerInParent="true"
        android:layout_height="100dp"/>
    <ImageView
        android:id="@+id/circle"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@id/square"
        android:layout_alignLeft="@id/square"
        android:layout_marginRight="25dp"
        android:layout_marginBottom="25dp"
        android:src="@mipmap/circle" />
</RelativeLayout>

But the layout margin does not have any effect

The output is same to

<ImageView
    android:id="@+id/circle"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignTop="@id/square"
    android:layout_alignLeft="@id/square"
    android:src="@mipmap/circle" />

How to align a view's center point to certain point of other view?

is center in horizontal and vertical working in your code? try it — Milind Vyas, Jun 14 '16 at 05:52
Place the circle inside the square, then move up and left a full radius — OneCricketeer, Jun 14 '16 at 05:52

score 1 · Answer 1 · answered Jun 14 '16 at 06:00

Hi i have done one example, my be it help to you

please check following code with output

<FrameLayout
                android:id="@+id/FrameMove"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp">

                <LinearLayout
                    android:id="@+id/linearFramelayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/frame_drawable"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:paddingBottom="-50dp">

                    <TextView
                        android:id="@+id/txtMove"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@android:color/white"
                        android:textSize="20sp"
                        android:textStyle="bold"/>
                </LinearLayout>


                <ImageView
                    android:id="@+id/imgClose"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|top"
                    android:layout_marginRight="-8dp"
                    android:layout_marginTop="-8dp"
                    android:src="@drawable/ic_action_close_white"/>

            </FrameLayout>

This answer is difficult to apply in my current layout, but finally I inspired from this answer, I just need to set android:layout_marginRight="-25dp", then the problem is solved, so this is still a useful answer — CL So, Jun 14 '16 at 07:54

Jeffrey Nyauke · Answer 2 · 2016-06-14T05:57:52.323

0

One option is giving the square a margin Top and margin Left that is equal to the radius of the circle. Let both elements have attributealignParentLeft=true

edited Jun 14 '16 at 05:57

answered Jun 14 '16 at 05:57

Jeffrey Nyauke

1,846
14
12

score 0 · Answer 3 · answered Jun 14 '16 at 06:01

0

if you know the width and height of your circle image then this could be easy you need to use a framelayout and give left and top margin to the square half the width and height of a circle

answered Jun 14 '16 at 06:01

Mehroz Munir

2,248
1
18
16

How to align view by center point?

3 Answers3