nimra asad
nimra asad

Reputation: 179

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>

Upvotes: 1

Views: 7916

Answers (4)

Farid Haq
Farid Haq

Reputation: 4219

I think you missed scaleType of ImageView, Follow the steps to make your image center

 1. Add attribute android:layout_gravity="center_horizontal" to show ImageView in center.

 2. Set ImageView layout_width="match_parent" and 
 layout_height="@dimen/fixed_height"
 ==> height will be fixed but width will automatically adjust 
 according to device size

 3. and set scaleType="fitEnd" or scaleType="fitCenter"
 ==> fitEnd is ( Scale the image from the end of the container ) and 
 possible to have space on top
 if image is different each time.
 ==> fitCenter is (Scale the image from center) and possibility to 
 have space in top and bottom

    Example:
    <ImageView
        android:id="@+id/cover_image"
        android:layout_width="match_parent"
        android:layout_height="@dimen/fixed_height"
        android:layout_gravity="center_horizontal"
        android:scaleType="fitEnd" />

Upvotes: 0

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21766

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

Upvotes: 5

schinj
schinj

Reputation: 804

Try this for your ImageView:

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

Upvotes: 0

Ali Ahsan
Ali Ahsan

Reputation: 470

what are the dimens values for these parameters?

android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"

and why you are using separate linearlayout for imageView even with parent layout as linear?

kindly remove that

have you checked the size of image you are using as a background in ImageView? if size is large than probably image is pushing your rest of your views out of the screen.try to give fixed width and height let's say 100dp for both and see if you are able to see anything.

If you wanna make imageView centre horizontally use in ImagView view

android:layout_gravity="center_horizontal"

above line of code will not work with separate linear layout for ImageView. If you are gonna use separate layout for ImageView anyway, use below line of code inside that linearlayout

android:gravity="center_horizontal"

Note: sorry I'm not able to leave a comment.

Upvotes: 0

Related Questions