Android. Placing ImageViews

Question

I need to place 10 ImageViews alongside one another (in a horizontal row) and they need to fill the entire screen from left to right. So if the total width of the screen is let's say 100px, then each ImageView would have a width of 10px. Let's ignore the height of each ImageView.

How in the world, can i accomplish this using dp values and not pixels? I've placed inside each ldpi, mdpi and hdpi folder a .jpg image, each having dimensions in respect to this guy's answer: see here

I've tried doing this:

<ImageView 
  android:id="@+id/caca1" 
  android:src="@drawable/tile_11" 
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content" />
<ImageView 
  android:id="@+id/caca2" 
  android:src="@drawable/tile_11" 
  android:layout_toRightOf="@+id/caca1" 
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content" />

... and so on, 'til the 10th ImageView. Each one is place on the right side of the previous.

The above code DOES display them in a row, starting from the left margin of the screen ... but i doesn't reach the right margin.

Is there a way i could stretch each tile to fit the width of the screen, without defining each image view's width in pixels ?

how about a horizontal LinearLayout with the 10 ImageViews, each with identical weights? — CSmith, Jul 12 '12 at 15:20
Estel and CSmith have provided a good answer, I just want to add that it's usually bad practice to define the size of a widget in your layout file in pixels or dip (any numeric value, really). When taking into account screen size and pixel density, numeric values can cause the same layout to look different on two different phones, even if they have the same screen size. Using `layout_weight` is the best way to go, it will give your users a more consistent experience over screen sizes and cut down the likelihood of distortion. — MattDavis, Jul 12 '12 at 15:29
@MattDavis and CSmith please see my comment on the answer below. You might have an idea on what to do :( — AndreiBogdan, Jul 12 '12 at 15:38

score 1 · Answer 1 · answered Jul 12 '12 at 15:21

1

You want to use a LinearLayout to show them horizontally:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <ImageView
    android:layout_width="0"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/image" />
  <ImageView
    android:layout_width="0"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/image2" />
  etc..
</LinearLayout>

Provided the layout_weight is the same for each of the ImageView, they will be equally sized within the LinearLayout.

answered Jul 12 '12 at 15:21

Estel

2,154
2
18
25

Oh boy... that sounds like the answer i'm looking for. Let me give it a quick try :D – AndreiBogdan Jul 12 '12 at 15:22
So, it works. It makes the ImaveViews each have a width witch is 10% of the total width of the screen. BUT on each side (left and right) of the drawable inside the ImageView, there is a transparent space. I'm guessing the drawable has got a smaller width and the OS isn't stretching it to fit the ImageView. How to do this, so it fits EVERY time, on every android device screen. ?? – AndreiBogdan Jul 12 '12 at 15:37
1

Instead of setting your drawable as the `android:src` attribute, try the `android:background` attribute. This may stretch or otherwise distort your images a bit though. – MattDavis Jul 12 '12 at 15:49
I did. It fills the ImageView, but it doesn't keep the ratio. The width of the ImageViews increase (using the layout_weight thing) but the height remains the same. So when i use your background suggestion or the scaleType attribute suggested below, it indeed fills the ImageView, but the height/width ratio isn't kept. What can i do so when it increases the width, it increases the height as well so it keeps the initial ratio of the drawable? Any ideas? – AndreiBogdan Jul 12 '12 at 16:01
I've encountered this before and it was a huge PITA. Try `android:adjustViewBounds="true"` on the ImageViews. – Estel Jul 12 '12 at 16:08

score 1 · Answer 2 · answered Jul 12 '12 at 15:53

1

Set the images width to 0 and weight to 1 and also set their scale types to CENTER_CROP or FIT_XY

<ImageView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/image"
    android:scaleType="CENTER_CROP" />

answered Jul 12 '12 at 15:53

Ed.

1,934
15
13

Please see the above post's comment. You might know the answer :( It works with scaleType, but the height of the ImageView doesn't change, so it looses the ratio of the initial drawable. – AndreiBogdan Jul 12 '12 at 16:02

CSmith · Accepted Answer · 2012-07-12T16:32:47.360

1

Regarding adjusting the height dynamically, I think you'll have to do this programmatically in your Acivitities OnCreate():

for each image:

// image layout adjustment
LayoutParams lp = mImage.getLayoutParams();
float width = (float)mImage.getDrawable().getIntrinsicWidth();
int height = (int)(((float)mContext.getWindowManager().getDefaultDisplay().getWidth() / 10.0f) * ((float)mImage.getDrawable().getIntrinsicHeight() / width));

lp.height = height;
mImage.setLayoutParams(lp);

height = screen width / 10 (cuz you have 10 images across assuming 0 margins) then multiply by ratio of height/width of image. This should keep your image in scale.

edited Jul 12 '12 at 16:32

answered Jul 12 '12 at 16:17

CSmith

13,318
3
39
42

First of all, will this be a pixel or a dp value? If it's a pixel value, then i need to convert it to dp, and then define the height in dp, no? Otherwise, if it's pixel, the ldpi,mdpi,hdpi thing where the OS picks the most adequate drawable from these folders, won't work, or will it?? – AndreiBogdan Jul 12 '12 at 16:22
see above edit for height= formula, this hopefully gives you the right value – CSmith Jul 12 '12 at 16:33

Android. Placing ImageViews

3 Answers3