Position TextView directly below an ImageView that takes up as much space as possible without cropping

Question

I'm having a lot of trouble getting this to work correctly. I have an ImageView and a TextView, both in a LinearLayout. I want the ImageView to take up as much of the parent view as possible without cropping or changing the aspect ratio, but leaving enough room for the TextView directly below it. I have this mostly working, but when the height of the image is small enough to leave extra space in the parent view, the TextView only appears at the very bottom of the LinearLayout, as opposed to just below the image.

I've tried many combinations of layout parameters, fiddling with the gravity, weight, height, and width of both the ImageView and the TextView. I even tried using a RelativeLayout, but the results were very inconsistent.

Here is the relevant portion of my code:

// Create a vertical linear layout to hold the image with the caption below
// it, taking up as much space on the screen as possible
LinearLayout ll = new LinearLayout(context);
ll.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
ll.setOrientation(LinearLayout.VERTICAL);
ll.setGravity(Gravity.CENTER);

// Get the image view
ImageView img = new ImageView(context);
LayoutParams ilp = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
ilp.weight = 1;
ilp.gravity = Gravity.CENTER;
img.setLayoutParams(ilp);

// Create the caption view
TextView cap = new TextView(context);
cap.setText("Example caption text");
LayoutParams clp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
clp.weight = 0;
clp.gravity = Gravity.CENTER_HORIZONTAL;
cap.setLayoutParams(clp);

// Add views to the linear layout
ll.addView(img);
ll.addView(cap);

// Load the image using an AsyncTask
loadImageTask = new LoadCachedImageTask(context, img, pos);
loadImageTask.execute("image src");

Here's an image of the "good behaviour," where the image is scaled up to the point where the text is still visible:

good behaviour

Here's an image of the "bad behaviour," where there is room above and below the image, but the text still stays at the bottom:

bad behaviour

As I've already mentioned in my post, I cannot post images because I need a reputation of at least 10. And I have tried a RelativeLayout, but I also couldn't get it to work. Sometimes the text would just remain centered behind the image, sometimes staying at the top of the screen, etc. — may5694, Aug 22 '12 at 06:55
solution can be found here http://stackoverflow.com/a/35998185/619673 — deadfish, Mar 16 '16 at 13:22

score 0 · Answer 1 · answered Aug 22 '12 at 06:32

0

No need to fiddle too much with gravity and all; Just change

LayoutParams clp = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

of your textview to

LayoutParams clp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);

Hopefully it'll solve your problem:) cheers:)

answered Aug 22 '12 at 06:32

Manoj Kumar

1,510
3
20
40

I have tried this, and unfortunately all it does is push the TextView to the top of the screen, and the ImageView doesn't show up at all. – may5694 Aug 22 '12 at 17:51
Fill parent means it'll fill the remaining space available. If you use the imageview before the textview like in the code you have posted, it will work perfectly; otherwise show the code which you are really using – Manoj Kumar Aug 23 '12 at 05:38

score 0 · Answer 2 · answered Aug 22 '12 at 06:59

0

You want your text view to be relative to the image view i.e just below it whether the image is small or large. A RelativeLayout handles this kind of situations easily and it's advisable to use RelativeLayout as the container ans it helps adjusting the views even if the size or resolution of the device changes. You can use this sample code:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/stack" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_alignLeft="@id/image"
        android:text="This is image"
        android:layout_marginTop="10dp" />
</RelativeLayout>

answered Aug 22 '12 at 06:59

karn

5,963
3
22
29

While I agree that a RelativeLayout makes more sense, this doesn't work as expected. With some example images, the caption appears above the image, sometimes behind it, sometimes below. I also need smaller images to scale up, and changing the ImageView LayoutParams to use MATCH_PARENT instead of WRAP_CONTENT causes the caption to always be behind the image. If it makes any difference, the code I'm using is within a subclass of PagerAdapter's instantiateItem method, but I can't see how using a ViewPager would make any difference to how the inner layouts display. – may5694 Aug 22 '12 at 18:05
If u go through the code carefully then you will find that the text view is positioned below the image view so it's not possible that it will ever be displayed above the image as you have mentioned. But it is possible that if you use FILL_PARENT then the text view might not be displayed. In that case I would suggest you to use LinearLayout with different layout_weights for image and the text. The ratio of weights might be 10:1 or something. – karn Aug 22 '12 at 19:42
I see that the TextView is positioned below the ImageView by use of the `android:layout_below="@id/image"` attribute, and my programatic approach mirrors this configuration. The text's position, perhaps because the ImageView is loaded asynchronously, still fluctuates. – may5694 Aug 23 '12 at 00:15
Secondly, the issue with using a weight ratio of 10:1 or so is that, as you mentioned, the TextView is not dependent on the ImageView. For an image that can stretch the full screen height vertically, the TextView should ideally be at the bottom of the screen - but choosing a weight ratio that gives this result will not suit images that at full scale have a lot of extra space above and below them. The TextView in this case remains at the bottom of the screen because of this weight ratio, and I need mine to be just below the image. – may5694 Aug 23 '12 at 00:21

score 0 · Answer 3 · answered Aug 22 '12 at 17:52

why dont you just use drawableTop attribute of the TextView

 <TextView
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:drawableTop="@drawable/your_drawable"
      .... />

and you can set the drawable padding just the way you want it to be

Position TextView directly below an ImageView that takes up as much space as possible without cropping

3 Answers3