CODEWITHSUNDEEP
androidandroid-layout
Skizit
Skizit

Reputation: 44842

Android: Center an image

I've got a linear layout and an image...

<?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">

<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
 android:src="@drawable/icon" android:layout_height="wrap_content"
 android:scaleType="center"></ImageView>

</LinearLayout>

How do I dynamically center my image so that it will appear in the center of the screen on all devices?

Upvotes: 51

Views: 154467

Answers (13)

MoniFern
MoniFern

Reputation: 47

android:scaleType ="centerInside" --> this line use to center an image,, but you need to keep height and width of an image as wrap_context

 <ImageView
            android:id ="@+id/imageView6"
            android:layout_width ="wrap_content"
            android:layout_height ="wrap_content"
            android:scaleType ="centerInside"
            android:layout_marginTop ="20dp"
            app:srcCompat ="@drawable/myimage" />

Upvotes: 1

Cesar Bobadilla
Cesar Bobadilla

Reputation: 37

First of all, you need to use 'match_parent' and don't use 'fill_parent' in the LinearLayout declaration, you could check the "official documentation" here https://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#MATCH_PARENT Another observation is that you need to use the ImageView as a child, then use ImageView should be self-closing; this means that it should end with '/>'. Then let me show you some fast ideas: 1- As natural way

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"    
android:layout_width="match_parent"
android:layout_height="match_parent"
><ImageView 
android:layout_width="wrap_content" 
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:src="@drawable/ocean" android:scaleType="center"/> </LinearLayout>

Then looks like enter image description here 2- You could improvise fastly

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
/><ImageView 
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:scaleType="center"/><ImageView 
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:src="@drawable/ocean"
android:scaleType="center"/>
<ImageView 
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:background="#ffffff"
android:scaleType="center"/></LinearLayout>

And then looks like

enter image description here

3- Other ideas could be born in that way, for instance this one

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"    
android:layout_width="match_parent"
android:layout_height="match_parent"
><ImageView 
android:layout_width="300dp" 
android:layout_height="80dp"
android:id="@+id/imageView1"
/><ImageView 
android:layout_width="300dp" 
android:layout_height="80dp"
android:id="@+id/imageView1"
android:src="@drawable/ocean" 
/> 
<ImageView 
android:layout_width="300dp" 
android:layout_height="80dp"
android:id="@+id/imageView1"
/> </LinearLayout>

Lokking like this

enter image description here

Other possibility

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
><ImageView 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/ocean"
android:id="@+id/imageView1"
android:scaleType="center"/><ImageView 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:background="#ffffff"
android:scaleType="center"/>
<ImageView 
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:id="@+id/imageView1"
android:background="#ffffff"
    android:src="@drawable/ocean"
android:scaleType="center"/></LinearLayout>

enter image description here

As we have been seeing, you could use 'hidden spaces' or 'spaces with background color' to fastly solve some trouble, obviously, this is not always a possibility

Upvotes: 2

Singupurapu prudhvi raj
Singupurapu prudhvi raj

Reputation: 57

change layout weight according you will get....

Enter this:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="0.03">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:layout_gravity="center"
        android:src="@drawable/logo" />

</LinearLayout>

Upvotes: -1

ONE
ONE

Reputation: 577

Here are 2 ways you can center an image (or images) both vertically and horizontally in LinearLayout.

(1) Use the android:layout_gravity="center" attribute in ImageView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"> 
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        layout_height="wrap_content"
        android:src="@drawable/icon"
        android:layout_gravity="center"/>
</LinearLayout>

How this works: the android:layout_gravity="center" attribute in ImageView centers itself (i.e. the image) vertically and horizontally relative to its parent (LinearLayout).

-- OR --

(2) Alternatively, you can use the android:gravity="center" attribute in LinearLayout and omit the android:layout_gravity="center" attribute in ImageView :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"> 
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        layout_height="wrap_content"
        android:src="@drawable/icon"
        android:layout_gravity="center"/>
</LinearLayout>

How this works: the android:gravity="center" attribute in LinearLayout centers its child/children (in this case, it's the image) vertically and horizontally.

Upvotes: 2

Houcine
Houcine

Reputation: 24181

If you are using a LinearLayout , use the gravity attribute : 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <ImageView android:layout_width="wrap_content"
        android:id="@+id/imageView1"
        android:src="@drawable/icon"
        android:layout_height="wrap_content"
        android:scaleType="centerInside" />
</LinearLayout>

If you are using a RelativeLayout , you can use android:layout_centerInParent as follows : 

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

    <ImageView android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:scaleType="centerInside"
        android:layout_centerInParent="true" />

</RelativeLayout>

Upvotes: 66

user5507100
user5507100

Reputation:

You can also use this,

android:layout_centerHorizontal="true"

The image will be placed at the center of the screen

Upvotes: 1

Sindri &#222;&#243;r
Sindri &#222;&#243;r

Reputation: 2927

What did it for me was

LinearLayout
     RelativeLayout
          <ImageView
              width... 
              height..
     --->     android:layout_centerHorizontal="true"

cheers!

Upvotes: 1

appleuser
appleuser

Reputation: 11

try this.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:scaleType="centerInside"
        android:src="@drawable/logo" />

</LinearLayout>

Upvotes: 1

user2352726
user2352726

Reputation: 35

This worked for me 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/Logo"
            android:gravity="center"
            android:scaleType="centerInside"
            android:src="@drawable/logo" />

    </LinearLayout>

Upvotes: 1

Julian V
Julian V

Reputation: 84

Another method. (in Relative tested, but I think in Linear would be also works)

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:adjustViewBounds="true"
    android:gravity="center"

If you use Eclipse you can choose graphical layout when *.xml file is active. On the top, you will find the Structure and option Adjust View Bounds. It will cut short all dimensions of pseudo-frame (blue rectangle) to size of your drawable file.

See also the scaleType option with make funny your image. Try it in Eclipse ;)

Upvotes: 1

Wroclai
Wroclai

Reputation: 26925

In LinearLayout, use: android:layout_gravity="center".

In RelativeLayout, use: android:layout_centerInParent="true".

Upvotes: 131

Kevin Coppock
Kevin Coppock

Reputation: 134664

Technically both answers above are correct, but since you are setting your ImageView to fill_parent instead of wrap_content, the image within is not centered, but the ImageView itself is.

Give your ImageView the attributes:

android:scaleType="centerInside"
android:gravity="center"

The scaleType is really only necessary in this case if the image exceeds the size of the ImageView. You may also want different scaleTypes. In conclusion, android:gravity is what you're looking for in this case, but if your ImageView is set to wrap_content, you should set the ImageView's gravity (android:layout_gravity) to be centered within the parent.

Upvotes: 13

Dmiters
Dmiters

Reputation: 2031

Simply add this to your ImageView.

android:layout_gravity="center"

Upvotes: 3

Related Questions