CODEWITHSUNDEEP
androidimageview
AndreiBogdan
AndreiBogdan

Reputation: 11164

Android. Placing ImageViews

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 ?

Upvotes: 0

Views: 440

Answers (3)

CSmith
CSmith

Reputation: 13458

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.

Upvotes: 1

Ed.
Ed.

Reputation: 1952

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" />

Upvotes: 1

Estel
Estel

Reputation: 2204

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.

Upvotes: 1

Related Questions