CODEWITHSUNDEEP
androidandroid-layoutandroid-viewpagerandroid-linearlayout
S.V.
S.V.

Reputation: 1221

Height of layouts inside of a viewpager whose height is set to wrap content

I ran into the issue concerning a ViewPager's height not being set correctly when setting android:height="wrap_content"

Now, I've successfully applied the fix mentioned here and it is working as expected. My ViewPager is correctly assuming the height of its tallest element.

However! Each of the items inside of my viewpager contains a linearlayout, which contains 2 elements, like so: (This is my container)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <ImageView
        android:layout_margin="@dimen/gutterSpaceHalf"
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:id="@+id/foo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <Button
            android:layout_gravity="bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

This gives me in effect a layout that kind-of looks like this:

bad UI mockup done in paint

And what I'm trying to illustrate here is that, on the second page, LinearLayout foo will have a different height from the first page. This is expected.

But the problem comes in when I want to align the button on each page to the bottom! This is of course an issue as the bottom of foo on page one will not be the same as the bottom of foo on page two.

The standard solution, in my mind, would be to set the height of foo to match_parent. However, if I do this, the whole page becomes the height of my imageview, as the applied fix mentioned above can not calculate each child's height correctly anymore.

So, bearing in mind that my entire goal is to have equal-height pages, with dynamic content (the text), while keeping the buttons aligned to the bottom of the page, what solution would you suggest here?

Things I've tried include jiggering the height settings on layouts up the tree, and setting the height of each view to the measured height of its container upon being added in my ViewPagerAdapter, but nothing seems to be working how I want it to.

Any suggestions would be highly appreciated. Please comment if I've missed something or you'd like to see more information.

Upvotes: 0

Views: 403

Answers (1)

S.V.
S.V.

Reputation: 1221

IVE DONE IT YES

All I had to do was add a view with weight=1 above my button, and give my button a static height. Now the button lines up to the bottom correctly on each page, due to the added view expanding to fill remaining size.

I also had to add +1 to the height as defined in the "hacky" solution I mentioned above, else the view I added would push items out of the largest page's layout, like so:

    if (height != 0) {
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height + 1 /* This is a heuristic solution */, MeasureSpec.EXACTLY);
    }

YESSSSSS

(layout changes):

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <View  <!-- ADDED -->
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="@dimen/buttonHeight"/>

Upvotes: 1

Related Questions