Positioning an image inside an ImageView with gravity: top

Question

      ╔════════════════════════════════════════════════════════╗
      ║               Linear Layout  (Center)                  ║
      ║    ╔══════════════════════════════════════════════╗    ║   
      ║    ║ ImageView    ╔══════════════╗                ║    ║
      ║    ║              ║              ║    (Center)    ║    ║
      ║    ║              ║ Actual image ║                ║    ║
      ║    ║              ║              ║                ║    ║
      ║    ║              ║  (Center)    ║                ║    ║
      ║    ║              ║              ║                ║    ║
      ║    ║              ╚══════════════╝                ║    ║
      ║    ╚══════════════════════════════════════════════╝    ║ 
      ║                                                        ║
      ╚════════════════════════════════════════════════════════╝

And I want to do this:

      ╔════════════════════════════════════════════════════════╗
      ║               Linear Layout  (Center)                  ║
      ║    ╔══════════════════════════════════════════════╗    ║   
      ║    ║ ImageView    ║              ║                ║    ║
      ║    ║              ║              ║    (Center)    ║    ║
      ║    ║              ║ Actual image ║                ║    ║
      ║    ║              ║              ║                ║    ║
      ║    ║              ║  (Top)       ║                ║    ║
      ║    ║              ║              ║                ║    ║
      ║    ║              ╚══════════════╝                ║    ║
      ║    ╚══════════════════════════════════════════════╝    ║ 
      ║                                                        ║
      ╚════════════════════════════════════════════════════════╝

Note that : imageview has gravity center with Linear Layout I want the image in the imageview has gravity top, i try to set gravity:top, but nothing change. Help me

Edit: this is my xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="@color/all_white">
    <LinearLayout android:id="@+id/title_bar" style="@style/TitleBar">
        <TextView android:layout_width="wrap_content" 
            android:id="@+id/tv_printweb"
            android:singleLine="true" 
            android:ellipsize="end" 
            style="@style/ScreenTitleText" />
    </LinearLayout>
    <RelativeLayout android:orientation="vertical"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:layout_below="@+id/tv_web_filename" 
        android:layout_above="@+id/tv_web_page_num"
        android:layout_weight="1" 
        android:background="@color/background">
        <LinearLayout android:id="@+id/ln_web_pre"
            android:layout_width="30dp" 
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true" 
            android:gravity="center">
            <Button android:id="@+id/btn_web_pre" 
                android:layout_width="40dp"
                android:layout_height="120dp" 
                android:background="@drawable/bt_left"
                />
        </LinearLayout>
        <LinearLayout android:id="@+id/ln_web_zoomview"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:background="@color/all_white" 
            android:orientation="vertical"
            android:gravity="center" 
            android:layout_centerInParent="true">
            <ImageView android:id="@+id/web_zoomview"
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@color/all_white" 
                android:layout_gravity="top"
                />

        </LinearLayout>
        <LinearLayout android:id="@+id/llCircle"
                android:layout_height="fill_parent" 
                android:layout_width="fill_parent"
                android:layout_marginRight="40dp" 
                android:layout_marginLeft="40dp" 
                android:layout_marginBottom="25dp" 
                android:layout_marginTop="25dp">
        </LinearLayout>
        <LinearLayout android:id="@+id/ln_web_next"
            android:layout_width="30dp" 
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true" 
            android:gravity="center">
            <Button android:id="@+id/btn_web_next" 
                android:layout_width="40dp"
                android:layout_height="120dp" 
                android:background="@drawable/bt_right_1"
                />
        </LinearLayout>
        <RelativeLayout android:id="@+id/pagebar_web_top"
            android:layout_width="fill_parent" 
            android:layout_height="30dp"
            android:layout_alignParentTop="true" 
            android:gravity="center_vertical"
            android:paddingLeft="10dip" 
            android:paddingRight="10dip">
            <TextView android:id="@+id/tv_web_page_size"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" 
                android:gravity="center"
                android:text="Paper Size" 
                android:textColor="@color/all_black"
                android:textStyle="bold" 
                android:background="@drawable/paper_border" />
        </RelativeLayout>

        <RelativeLayout android:id="@+id/web_pagebar"
            android:layout_width="fill_parent" 
            android:layout_height="50dp"
            android:layout_alignParentBottom="true" 
            android:gravity="left"
            android:paddingLeft="10dip" 
            android:paddingRight="10dip">
            <TextView android:id="@+id/tv_page_num"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_centerVertical="true" 
                android:gravity="center"
                android:text="1/1" 
                android:textColor="@color/all_black"
                android:textStyle="bold" 
                android:background="@drawable/paper_border" />
            <Button android:id="@+id/btn_web_orientation"
                android:layout_width="50dp" 
                android:layout_height="50dp"
                android:layout_alignParentRight="true" 
                android:background="@drawable/rotate_l" />
        </RelativeLayout>

    </RelativeLayout>
    <LinearLayout android:gravity="right|center_horizontal"
        android:id="@+id/toolbar" 
        style="@style/FunctionBar">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:id="@+id/btn_web_print"
            style="@style/FunctionButton" 
            android:text="@string/str_print" />
    </LinearLayout>
</LinearLayout>

This http://stackoverflow.com/questions/7631983/android-image-view-gravity answered the question for me — John, Jan 25 '13 at 17:28
I put an answer [here](http://stackoverflow.com/questions/6101874/android-center-an-image/33039444#33039444). It helped my centralize Imageview. — Sindri Þór, Oct 09 '15 at 13:26

score 119 · Accepted Answer · answered Mar 12 '14 at 21:24

119

Set the scaleType to fitStart in your XML:

<ImageView
    android:id="@+id/ivMap"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitStart" >
</ImageView>

answered Mar 12 '14 at 21:24

Terel

3,857
1
25
28

2

Thanks. i was playing with gravity which had no outputs, scaleType was the one which i was searching for.. – Sai Sep 28 '15 at 10:20
2

This doesn't centre the image – Dog Lover Jul 14 '19 at 12:27
although, when animating this fitCenter is probably the only one, one would like to use] – juztcode Sep 24 '20 at 15:10

score 6 · Answer 2 · answered Apr 28 '11 at 12:37

6

You can use ImageView.ScaleType.MATRIX and set image matrix using ImageView.setImageMatrix(). Matrix can be obtained using Matrix.setRectToRect() method.

answered Apr 28 '11 at 12:37

Michael

53,859
22
133
139

bigstones · Answer 3 · 2014-09-09T09:43:42.467

6

Please check Terel's answer, which is said to be the correct answer.

Depending on what else is in the layout, a solution could be to use another layout (i.e. a FrameLayout which is rather light) in place of the ImageView, and have the ImageView in place of the actual image, with its android:layout_gravity="top".

edited Sep 09 '14 at 09:43

answered Apr 28 '11 at 12:42

bigstones

15,087
7
65
82

I use Linear layout. I try all of your comment, but i can only change the position of imageview, not image inside imageview – Nam Vu Apr 29 '11 at 03:42
1

@ZuzooVn: the only way to move an image inside ImageView is using `android:scaleType`, and the only setting that will let you do what you want is `android:scaleType="matrix"`, with a matrix that will translate to the horizontal center the image. As this is non trivial, I suggest rethinking your layout. (see my suggestion) – bigstones Apr 29 '11 at 10:33

Juan · Answer 4 · 2011-06-06T15:46:41.193

Have you tried using the attribute android:gravity = "top" I see that for your ImageView you are using android:layout_gravity maybe you could try using the other one. As far as I know, the "android:layout_gravity" attribute is used for setting the gravity of the element within its parent, while the "android:gravity" attribute is for setting the gravity of the element's contents. (Someone correct me if I'm wrong! =P hehe!)

score 1 · Answer 5 · answered Apr 28 '11 at 12:59

1

Wouldn't it be easier to use a RelativeLayout? With android:layout_alignParentTop="true" and android:layout_centerHorizontal="true" you can achieve the desired effect.

answered Apr 28 '11 at 12:59

Mokus

3,339
1
24
30

i must use linear layout. See my xml in my post – Nam Vu Apr 28 '11 at 13:03
Is there a specific reason why you encapsulate every view in a seperate layout? I don't see the necessity of it... – Mokus Apr 28 '11 at 13:10
I use it in my code. It make me easier to display many thing in my app – Nam Vu Apr 28 '11 at 13:13
Did you try android:layout_gravity="top|center"? – Mokus Apr 28 '11 at 13:22
There are two solutions I've found if you want to keep the structure you have at the moment. Either you set the LinearLayout android:layout_height to wrap_content or you set the gravity of the LinearLayout to top. – Mokus Apr 29 '11 at 05:35

Positioning an image inside an ImageView with gravity: top

5 Answers5