Imageview alignment issue

Question

I want to achieve my layout with image-view and relative layout as like as picture shows here.

I tried with this code but not works.

<RelativeLayout
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textview_ratting"
    android:layout_margin="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/icon"/>
</RelativeLayout>

Related - http://stackoverflow.com/q/4182486/3225001 – Gurupad Mamadapur Jan 14 '17 at 11:31 — Gurupad Mamadapur, Jan 14 '17 at 11:31

score 7 · Accepted Answer · edited Jan 16 '17 at 05:07

This worked for me...Provide negative paddingTop equal to half of the size of the imageview .

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="70dp"
            android:background="@color/colorAccent" />
        <ImageView
            android:id="@+id/widget_title_icon"
            android:paddingTop="-70dp"
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:layout_gravity="top|center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="@string/action_settings"
            android:scaleType="fitStart"
            android:src="@mipmap/ic_launcher" />
</FrameLayout>

Why have you taken LinearLayout as root element, if there is only one element in it? — Amber Beriwal, Jan 16 '17 at 05:01

score 1 · Answer 2 · edited Jan 14 '17 at 13:01

We normally use FrameLayout for this case:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="100dp"
        android:background="@color/colorAccent"/>

    <ImageView
        android:id="@+id/widget_title_icon"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="top|center_horizontal"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        android:src="@mipmap/ic_launcher"/>
</FrameLayout>

We can also play with android:paddingTop="-10dp" as you like.

See FrameLayout definition:

Child views are drawn in a stack, with the most recently added child on top.

Hope this will help....

score 0 · Answer 3 · edited Jan 14 '17 at 11:36

android:layout_marginTop="-35dp" -35dp is the half of your image size (70dp/2) but margin in the reverse direction so use "-" sign.

<RelativeLayout
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textview_ratting"
    android:layout_margin="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-35dp"
        android:src="@drawable/icon"/>
</RelativeLayout>

score 0 · Answer 4 · answered Jan 15 '17 at 06:22

0

used FrameLayout, using frameLayout you can do it.

answered Jan 15 '17 at 06:22

Chetan Chaudhari

323
5
15

score 0 · Answer 5 · answered Jan 16 '17 at 05:14

For this, you should use FrameLayout. FrameLayout provides a layered layout to overlap items in UI. Example:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center|center_horizontal"
        android:background="@color/colorAccent" />
    <ImageView
        android:id="@+id/widget_title_icon"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_marginBottom="100dp"
        android:layout_gravity="center|center_horizontal"
        android:src="@mipmap/ic_launcher" />
</FrameLayout>

Arpan has already proposed a similar answer. He is using padding and margin of both elements, whereas this one uses layout gravity and relative margin of ImageView. Doing this will always place the contents in the center of the screen on all devices.

ImageView(android:layout_marginBottom) = 0.5 * RelativeLayout(android:layout_height)

Tanvi Agarwal · Answer 6 · 2017-01-16T06:50:32.980

Please use circleimageview and relativelayout as a child of framelayout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:app="http://schemas.android.com/apk/res-auto"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content">
<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginBottom="0dp"
                android:paddingBottom="0dp"
                android:paddingTop="0dp">
</RelativeLayout>

 <de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cir_img_ptv"
                android:layout_width="@dimen/cir_img_diameter_ptv"
                android:layout_height="@dimen/cir_img_diameter_ptv"
                android:layout_gravity="center|top"
                android:layout_marginTop="@dimen/cir_img_top_margin_ptv"
                android:scaleType="centerCrop"
                android:src="@drawable/profile_user"
                app:civ_border_color="@color/white"
                app:civ_border_width="@dimen/cir_img_stroke_ptv"
                app:civ_fill_color="@color/white"
                app:civ_border_overlay="true"/>

 </FrameLayout>

score -2 · Answer 7 · answered Jan 11 '17 at 13:19

Try this code,

activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relCustomerEditProfile"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_marginTop="100dp">

    <LinearLayout
        android:id="@+id/linRoot"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="50dp"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/relHeader"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/imgBackground"
                android:layout_width="wrap_content"
                android:layout_height="90dp"
                android:layout_alignBottom="@+id/relProfile"
                android:layout_centerHorizontal="true"
                android:background="@drawable/bg_black"></RelativeLayout>

            <RelativeLayout
                android:id="@+id/relProfile"
                android:layout_width="110dp"
                android:layout_height="110dp"
                android:layout_centerHorizontal="true">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/imgViewProfilePhoto"
                    android:layout_width="90dp"
                    android:layout_height="100dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="40dp"
                    android:background="@drawable/red"></de.hdodenhof.circleimageview.CircleImageView>

            </RelativeLayout>
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

Hereby,I am attaching screenshot,

Hope, it helps you!!

too many layouts to draw, will degrade the performance...not an optimal approach..try with FrameLayout — Amber Beriwal, Jan 16 '17 at 04:59

Imageview alignment issue

7 Answers7