Search code examples
androidxmlandroid-imageviewimage-scaling

How to center fit image in linear layout?


I have an xml screen with three children linear layouts in a parent linear layout of vertical orientation. First child contains an image view and when running the application I can not view any image. Why? is the image size too big?? If so.. how to scale it? However Image is view able in my design tab. of android stdudio. Below is my complete code for xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_sign_up"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.root.my_laoder.SignUp"
    android:orientation="vertical">

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

       <ImageView
       android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:adjustViewBounds="true"
    android:scaleType="centerInside"
    android:src="@drawable/ty"
       />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:paddingTop="50dp"


        >


        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"

           />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"

            />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"

            />
    </LinearLayout>

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="50dp"
        >

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"/>

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"

        />

</LinearLayout>


</LinearLayout>


Solution

  • 1. Add attribute android:gravity="center_horizontal" to LinearLayout, to show ImageView in center.

    2. Update ImageView width to android:layout_width="wrap_content" and remove attribute android:layout_gravity="center".

    3. Use android:scaleType="fitXY" instead of android:scaleType="centerInside"

    Try this:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_sign_up"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/ty" />
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical"
            android:paddingTop="50dp">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="number" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingTop="50dp">
    
            <Button
                android:text="Button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.5" />
    
            <Button
                android:text="Button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.5" />
    
        </LinearLayout>
    </LinearLayout>
    

    OUTPUT:

    enter image description here