CODEWITHSUNDEEP
androidxmlandroid-layout
Daniel Kobe
Daniel Kobe

Reputation: 9825

How to have two elements centered in the same spot Android xml

I have a circular progress donut and a circular profile pic. I'd like the donut to be around the profile pic. I put them in a relative layout together. How can I the donut centered over the profile pic?
Layout Code: 

<FrameLayout 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"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.adam.hilo.HomeFragment">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        >

        <ImageButton
            android:id="@+id/profile_pic_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|top"
            android:layout_margin="10dp"
            android:background="@drawable/round_profile_pic_btn"
            android:contentDescription="profile picture button"
            android:padding="20dp"
            android:src="@drawable/ic_face_black_48dp" />

        <com.github.lzyzsd.circleprogress.DonutProgress
            android:id="@+id/donut_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            custom:donut_progress="30"
            android:layout_gravity="left|top"
            custom:donut_text_size="0dp"
            android:layout_alignTop="@+id/profile_pic_btn"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="LEVEL 14 1025 XP"
            android:layout_below="@+id/profile_pic_btn"
            android:layout_centerHorizontal="true"
            android:id="@+id/textView5" />
    </RelativeLayout>

</FrameLayout>

enter image description here

Layout Overview: enter image description here

Upvotes: 0

Views: 80

Answers (2)

tehcpu
tehcpu

Reputation: 966

Or, maybe, try this ;)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto">
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:foregroundGravity="center_horizontal"
        android:id="@+id/frameLayout"
        android:layout_alignParentRight="false"
        android:layout_alignParentEnd="false"
        android:layout_centerHorizontal="true">
        <ImageButton
            android:id="@+id/profile_pic_btn"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:background="@drawable/ic_profile"
            android:contentDescription="profile picture button"
            android:padding="20dp"
            android:src="@drawable/ic_profile" />

        <com.github.lzyzsd.circleprogress.DonutProgress
            android:id="@+id/donut_progress"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            custom:donut_progress="30"
            custom:donut_text_size="0dp"
            android:layout_alignTop="@+id/profile_pic_btn"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/textView5"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_gravity="center" />

    </FrameLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LEVEL 14 1025 XP"
        android:id="@+id/textView5"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_below="@+id/frameLayout"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

enter image description here

Upvotes: 1

Ankur Aggarwal
Ankur Aggarwal

Reputation: 2220

Try this (very small modification):

    <ImageButton
        android:id="@+id/profile_pic_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|top"
        android:layout_margin="10dp"
        android:background="@drawable/round_profile_pic_btn"
        android:contentDescription="profile picture button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/ic_face_black_48dp" />

    <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:donut_progress="30"
        android:layout_gravity="left|top"
        custom:donut_text_size="0dp"
        android:layout_alignTop="@+id/profile_pic_btn"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

Or, try this:

    <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:donut_progress="30"
        android:layout_gravity="left|top"
        custom:donut_text_size="0dp"
        android:layout_alignTop="@+id/profile_pic_btn"
        android:layout_alignLeft="@+id/profile_pic_btn"
        android:layout_alignBottom="@+id/profile_pic_btn"
        android:layout_alignRight="@+id/profile_pic_btn" />

Upvotes: 0

Related Questions