Size of imageView in LinearLayout

2
votes

I have a horizontal LinearLayout with 3 ImageViews, but ImageView are much more wider than image are(rectangle when image is square). I've try to set adjustViewBound="true", than imageView become square but much more bigger. Also I've tryed to set scaleType="firXY" but then the image is scaling to fit rectangle imageView. Here is ma xml:

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/llButtons">

  <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_start_text"
        android:id="@+id/imgStart"
        android:layout_weight="1.5"
        android:src="@drawable/ic_play"/>

    <ImageView
        android:id="@+id/imgReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:text="@string/button_reset_text"
        android:src="@drawable/ic_cls"/>

    <ImageView
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:text="@string/button_next_text"
        android:src="@drawable/ic_next"/>
    </LinearLayout>

And this is a result:

enter image description here

How can I set ImageView size as picture size?

5
androidandroid-layoutimageviewandroid-linearlayout
it is because of weight you assigned wight 1.5 which will change imageView bounds - Khizar Hayat
use wrapcontent instead of weight if you want imageViewSize as pic size - Khizar Hayat
delete ` android:layout_weight="1.5"` and use ` android:layout_marginRight="numberdp"` to make space between imageViews - BOUTERBIAT Oualid

5 Answers

1
votes

You had assigned the weight as 1.5 and this makes the issue. Anyway You can adjust the width of each images By previewing the layout.

  1. Preview the layout
  2. Now Double Click on the layout Content.
  3. Now You will be able to adjust the height and width of those imageviews.
  4. Adjust it with proper height and width.

This gives you the proper idea how to manage items in a Linear Layout.

1
votes

Try setting scaletype to CENTER_INSIDE

1
votes

I assume you want to keep the images equidistant horizontally. Create a LinearLayout for each image, give each a weight of 1 (remove weights from ImageViews), and set each LinearLayout's gravity to center. 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/llButtons"
        android:weightSum="3">
  <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        >
        <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_start_text"
        android:id="@+id/imgStart"
        android:src="@drawable/ic_play"/>
    </LinearLayout>

    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        >
        <ImageView
        android:id="@+id/imgReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_reset_text"
        android:src="@drawable/ic_cls"/>
    </LinearLayout>
    <LinearLayout 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        >
        <ImageView
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_next_text"
        android:src="@drawable/ic_next"/>
    </LinearLayout>
</LinearLayout>
0
votes

Thank you all, I've solved it. Following advice of @Khizar Hayat I've delete wight attribute and use wrap content instead. To place my ImageViews by screen sides and center I've using .

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/llButtons">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_start_text"
    android:id="@+id/imgStart"
    android:src="@drawable/ic_play"/>

<Space
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_weight="1"/>

<ImageView
    android:id="@+id/imgReset"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_reset_text"
    android:src="@drawable/ic_cls"/>

<Space
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_weight="1"/>

<ImageView
    android:id="@+id/btnNext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_next_text"
    android:src="@drawable/ic_next"/>
</LinearLayout>
0
votes
  1. Fix ImageView's size with a specific size (in dp) or use fill_parent
  2. set android:scaleType to fitXY.