CODEWITHSUNDEEP
androidandroid-layoutimageviewandroid-imageview
Dave Hirsch
Dave Hirsch

Reputation: 197

LinearLayout not resizing ImageViews correctly

As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.

The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.

(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)

My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?

Here is a good layout (10" tablet, portrait, shown at reduced scale): 10" tablet, portrait

Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale): 10" tablet, landscape

Here is another bad one (phone): phone, portrait

I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.

Here is my current XML:

<RelativeLayout
    android:id="@+id/main_holder"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/intro3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone"
        android:onClick="introClicked"
        android:clickable="true">

        <LinearLayout
            android:id="@+id/intro3_top"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_gravity="top|center_horizontal"
            android:orientation="vertical"
            android:gravity="top|center_horizontal">
            <TextView
                android:id="@+id/textViewIntro3_1"
                fontPath="fonts/AsCuteAs...Heavy.ttf"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Swipe up to mark a spark completed."
                android:layout_gravity="center_horizontal|top"
                android:gravity="center"
                android:layout_weight="1"
                android:paddingBottom="5dp"
                android:background="#C5000000"
                android:textColor="#fff6c3"
                android:textSize="30sp"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:adjustViewBounds="false"
                android:background="@drawable/grad_bottom"
                android:padding="10dp"
                android:layout_weight="1"
                android:scaleType="fitCenter"
                android:src="@drawable/arrow_up"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical"
            android:layout_weight="0"
            android:background="#85000000"
            android:gravity="center">

            <TextView
                android:id="@+id/button_intro3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:alpha="0"
                android:background="@drawable/roundrect"
                android:onClick="introClicked"
                android:padding="10dp"
                android:text="Tap to Continue"
                android:clickable="true"
                android:enabled="true"
                android:textColor="#FFFFF6C3"
                android:textSize="24sp"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/intro3_bottom"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="bottom|center_horizontal"
            android:gravity="bottom|center_horizontal">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:adjustViewBounds="false"
                android:background="@drawable/grad_top"
                android:layout_weight="1"
                android:padding="10dp"
                android:scaleType="fitCenter"
                android:src="@drawable/arrow_down"/>
            <TextView
                android:id="@+id/textViewIntro3_2"
                fontPath="fonts/AsCuteAs...Heavy.ttf"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Swipe down to reject.\n "
                android:layout_gravity="center_horizontal|bottom"
                android:gravity="center"
                android:layout_weight="1"
                android:paddingBottom="0dp"
                android:background="#C5000000"
                android:textColor="#fff6c3"
                android:textSize="30sp"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Upvotes: 1

Views: 529

Answers (1)

Konstantin Loginov
Konstantin Loginov

Reputation: 16000

There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/main_holder"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/intro3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:onClick="introClicked"
        android:clickable="true">

        <TextView
            android:id="@+id/textViewIntro3_1"
            fontPath="fonts/AsCuteAs...Heavy.ttf"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Swipe up to mark a spark completed."
            android:gravity="center"
            android:layout_alignParentTop="true"
            android:paddingBottom="5dp"
            android:background="#C5000000"
            android:textColor="#fff6c3"
            android:textSize="30sp"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/button_intro3"
            android:layout_below="@+id/textViewIntro3_1"
            android:adjustViewBounds="false"
            android:background="@drawable/grad_bottom"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_up"/>

        <TextView
            android:id="@+id/button_intro3"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:alpha="0"
            android:background="@drawable/roundrect"
            android:onClick="introClicked"
            android:padding="10dp"
            android:text="Tap to Continue"
            android:clickable="true"
            android:enabled="true"
            android:textColor="#FFFFF6C3"
            android:textSize="24sp"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="false"
            android:background="@drawable/grad_top"
            android:layout_below="@+id/button_intro3"
            android:layout_above="@+id/textViewIntro3_2"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@drawable/arrow_down"/>
        <TextView
            android:id="@+id/textViewIntro3_2"
            fontPath="fonts/AsCuteAs...Heavy.ttf"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Swipe down to reject.\n "
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:paddingBottom="0dp"
            android:background="#C5000000"
            android:textColor="#fff6c3"
            android:textSize="30sp"/>
    </RelativeLayout>
</RelativeLayout>

What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.

I hope, it helps.

Upvotes: 1

Related Questions