How can I create a circle profile picture view over rectangle in android layout?

Question

How to draw the attached layout which is have circle over rectangle. mean that circle is profile image, and inside the rectangle login information layout. Can any one please suggest this?

What have you tried so far ? any code would be great. – Umair Dec 04 '17 at 07:39 — Umair, Dec 04 '17 at 07:39
please paste your code here – kamal verma Dec 04 '17 at 07:42 — kamal verma, Dec 04 '17 at 07:42

Omkar · Answer 1 · 2017-12-04T08:13:49.710

try below code

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#be464545">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/user_profile_photo"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="60dp"
            android:background="@drawable/prof"
            android:elevation="5dp"
            android:scaleType="center"
            app:civ_border_color="#FFF"
            app:civ_border_width="5dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="-60dp"
        android:background="#fff"
        android:elevation="4dp"
        android:orientation="vertical"
        android:padding="20dp">



        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="30dp">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/username"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:drawableLeft="@drawable/ic_mood_black_24dp"
                    android:drawableTint="#f5701e"
                    android:hint="UserName"
                    android:inputType="textEmailAddress"
                    android:singleLine="true"/>
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/password"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
                    android:drawableTint="#f5701e"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:singleLine="true"/>
            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/btnLogin"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="22dp"
                android:background="#f5701e"
                android:text="Sign In"
                android:textAllCaps="false"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

    </RelativeLayout>
    </LinearLayout>
</LinearLayout>

layout

for CircleImageView you have to add compile 'de.hdodenhof:circleimageview:2.1.0' dependency in your app level gradle file

AskNilesh · Answer 2 · 2017-12-04T07:54:41.750

Try this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_account_detail"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary" />

    <ScrollView
        android:id="@+id/scrolView_account"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <RelativeLayout
            android:id="@+id/linear_account"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <android.support.v7.widget.CardView
                    android:id="@+id/cardView_account_details"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="70dp"
                    app:cardCornerRadius="5dp"
                    app:cardElevation="5dp"
                    app:cardUseCompatPadding="true">


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">


                        <LinearLayout
                            android:id="@+id/linear_account_input_details"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="50dp"
                            android:orientation="vertical"
                            android:padding="10dp">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="20dp"
                                android:gravity="center"
                                android:text="NILU"
                                android:textSize="30sp" />

                            <EditText
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:drawableLeft="@mipmap/ic_launcher_round"
                                android:hint="Enter Email" />

                            <EditText
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:drawableLeft="@mipmap/ic_launcher_round"
                                android:hint="Enter Paasword" />


                            <Button
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"

                                android:background="@drawable/temp"
                                android:text="Login" />

                        </LinearLayout>

                    </LinearLayout>

                </android.support.v7.widget.CardView>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="This is demo" />

            </LinearLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/imageview_account_profile"
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/ic_launcher_round"
                    app:civ_border_color="@color/colorWhite"
                    app:civ_border_width="2dp" />

            </RelativeLayout>

        </RelativeLayout>


    </ScrollView>


</RelativeLayout>

now create a @drawable/temp.xml in res/drawable folder like this

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="1dp"
        android:color="@color/colorBlue" />
    <solid android:color="@color/colorAccentCompany" />
    <corners android:radius="50dp" />
</shape>

And Don't forgot compile this dependencies

compile 'com.android.support:cardview-v7:26.+'
compile 'de.hdodenhof:circleimageview:2.1.0'

score 1 · Answer 3 · answered Dec 04 '17 at 07:43

Add this in drawable with name shape:

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">

        <stroke android:width="1dp" android:color="#1B5E20" />
        <corners android:radius="50dp"/>
        <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
    </shape>

This is your layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="center"
        android:background="@drawable/shape"
        android:src="@drawable/verification_background"/>


    </FrameLayout>
</RelativeLayout>

score 1 · Answer 4 · answered Dec 04 '17 at 07:44

Simplest way for doing this.

dependencies: compile 'com.android.support:appcompat-v7:23.1.1'
              compile 'com.android.support:design:23.1.1'
              compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
   app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/YOUR_IMAGE"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
 </android.support.v7.widget.CardView>

score 1 · Answer 5 · answered Dec 04 '17 at 07:47

Here Xml code,

   <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <com.mylibrary.widgets.CircularImageView
                android:id="@+id/profile_profileimg"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:src="@drawable/no_user_image" />

  </RelativeLayout>

How can I create a circle profile picture view over rectangle in android layout?

5 Answers5