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?

  • Android: How to recreate Action bar when fragment changed
  • java.lang.OutOfMemoryError: bitmap size exceeds VM budget
  • How do I prevent the status bar and navigation bar from animating during an activity scene animation transition?
  • Simple parse JSON from URL on Android and display in listview
  • Google Places API always return error
  • Android SQLiteDatabase query with LIKE
  • Source code for new Android Lollipop Calendar app
  • Set icon for android application
  • React Native: Which navigator should I use?
  • SpannableStringBuilder to create String with multiple fonts/text sizes etc Example?
  • Android In-App Billing Dynamic Product List
  • passing intent extra to android broadcast receiver
  • 11 Solutions collect form web for “Android: Center an image”

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

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

    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>
    

    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.

    Simply add this to your ImageView.

    android:layout_gravity="center" 
    

    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 😉

    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>
    

    You can also use this,

    android:layout_centerHorizontal="true"
    

    The image will be placed at the center of the screen

    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.

    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>    
    

    What did it for me was

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

    cheers!

    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>
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.