CODEWITHSUNDEEP
androidandroid-layout
Scrungepipes
Scrungepipes

Reputation: 37581

Image view not centered in parent though layout_centerHorizontal is set to true

Why is my image view (orange) not centered in the horizontal linear layout (blue) even though its layout_centerHorizontal is set to true:

enter image description here

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical"
    tools:context=".MainActivity" tools:deviceIds="wear_square"
    android:weightSum="1">

    <TextView android:id="@+id/text" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="@string/hello_square" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#6dbdff"
        android:layout_weight="0.30"
        android:weightSum="1">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/imageView"
            android:layout_centerHorizontal="true"
            android:background="#ff5831"
            android:layout_weight="0.37" />
    </LinearLayout>

</LinearLayout>

Upvotes: 0

Views: 199

Answers (2)

oorosco
oorosco

Reputation: 246

You cannot use layout_centerHorizontal for a child of a Linear layout... this is the proper implementation. Notice how i use the gravity attribute. (the one you're using would work if it was a direct child of a RelativeLayout

(Edit to work...)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
              android:layout_height="match_parent" android:orientation="vertical"
              tools:context=".MainActivity" tools:deviceIds="wear_square"
              android:weightSum="1">

    <TextView android:id="@+id/text" android:layout_width="wrap_content"
              android:layout_height="wrap_content" android:text="HELLO" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#6dbdff"
        android:layout_weight="0.30"
        android:weightSum="1">
        <View android:layout_width="0dp" android:layout_height="10dp"
            android:layout_weight="0.315"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/imageView"
            android:background="#ff5831"
            android:layout_weight="0.37" />
    </LinearLayout>

</LinearLayout>

Alternative, in case you don't want to put things on either side of the image... 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
              android:layout_height="match_parent" android:orientation="vertical"
              tools:context=".MainActivity" tools:deviceIds="wear_square"
              android:weightSum="1">

    <TextView android:id="@+id/text" android:layout_width="wrap_content"
              android:layout_height="wrap_content" android:text="HELLO" />

    <FrameLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#6dbdff"
        android:layout_weight="0.30"
        android:weightSum="1">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:id="@+id/imageView"
            android:layout_gravity="center_horizontal"
            android:background="#ff5831" />
    </FrameLayout>

</LinearLayout>

Upvotes: 1

petey
petey

Reputation: 17140

Not sure you need the 2nd LinearLayout, so here goes.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical"
    tools:context=".MainActivity" tools:deviceIds="wear_square"
    android:weightSum="1">

    <TextView android:id="@+id/text" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="@string/hello_square" />


    <ImageView
        android:layout_width="wrap_content"
        android:src="#ff5831"
        android:layout_height="0dp"
        android:id="@+id/imageView"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0.37" />

</LinearLayout>

For now, I'made the src of the image the color you want to see. IF you replace it with an actual bitmap refernce, it will be centered and properly sized based on the bitmap you use and parent restraints

if I delete the android:layout_weight="0.37" line (which was added by Android Studio) then the image view vanishes, why is that?

With this line, the imageView will know how to size itself based on the parent. Without, because the imageView has no image, so it cannot size itself based on the image bitmap to show (which is missing) and the parent that contains it. Add an image to show and it will come back.

Final advice,

Totally read this article about how android draws views. Its really really great info.

Upvotes: 0

Related Questions