Home » Android » android – How to center an ImageView in a LinearLayout?

android – How to center an ImageView in a LinearLayout?

Posted by: admin April 23, 2020 Leave a comment

Questions:

The following XML code doesn’t work to center an ImageView in a LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/myimg" 
        android:layout_width="36dip"
        android:layout_height="36dip"
        android:scaleType="fitXY"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/my_background"
    />
</LinearLayout>

And this is RelativeLayout code which surprisingly works:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/myimg" 
        android:layout_width="36dip"
        android:layout_height="36dip"
        android:scaleType="fitXY"
        android:layout_centerHorizontal="true"
        android:background="@drawable/my_background"
    />
</RelativeLayout>

Can someone tell me why? Thanks!

How to&Answers:

You have to set vertical orientation on your LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
    android:id="@+id/myimg" 
    android:layout_width="36dip"
    android:layout_height="36dip"
    android:scaleType="fitXY"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/my_background"
/>

Answer:

Sorry, but above code didn’t work for me, so i posting my Code which worked for me is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical">

   <ImageView
        android:id="@+id/ivPic"
        android:layout_width="70dp"
        android:layout_height="70dp" />

</LinearLayout>

I hope it helps for others who need.

Answer:

What usually works for me is, I wrap the imageview inside a RelativeLayout when then goes into a LinearLayout making sure that height and width attributes of the relativelayout matches the linearLayout. And you know how to keep the imageview in the center of the relativelayout.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              android:layout_width="fill_parent"
              android:layout_height="wrap_content">
              <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                         <ImageView 
                             android:id="@+id/myimg" 
                             android:layout_width="36dip"
                             android:layout_height="36dip"
                             android:scaleType="fitXY"
                             android:orientation="vertical"
                             android:layout_gravity="center_horizontal"
                             android:background="@drawable/my_background"
                         />
              </RelativeLayout>
    </LinearLayout>

Answer:

<LinearLayout
    android:orientation="horizontal"  
    android:layout_width="0dp"
    android:layout_weight="0.50"
    android:gravity="center"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/addToDateOrReceipt"
        android:layout_width="25dp"
        android:layout_height="25dp" />
</LinearLayout>

Set the android:gravity property of your LineraLayout to center.

Answer:

The problem is because you use android:layout_width=”fill_parent” in LinearLayout.
Change it to “wrap_content”

Answer:

let’s keep the UI clean and simple to understand.

 <LinearLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/phone_auth_bg"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">

            <ImageView
                android:id="@+id/imageMobile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/phone" />

        </RelativeLayout>

And if any attributes need to be changed in the image-section, you may bring the change as it won’t cause any changes in the layout UI.

Answer:

You also can made it with a FrameLayout and inside of it a LinearLayout so it is easier to manage and easier to put it on the center of the view.

<?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:orientation="vertical">
 <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
     android:orientation="vertical">

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/app_name" />

     <ImageView
         android:id="@+id/ivPic"
         android:layout_width="70dp"
         android:layout_height="70dp" />
 </LinearLayout>
</FrameLayout>

I know you are asking about how to center an imageview in a layout but wanted to provide another way to do it