Question

My layout is below. On some mdpi screens the inner LinearLayout is cutoff. What I would like to happen is to make sure that the inner LinearLayout always shows all of it’s content. I would like the ImageView to scale down as small as it needs to make sure that the LinearLayout below it show’s all of it’s content. On large screens, the ImageView should be as large as it’s image (i.e. wrap_content).

I tried giving the ImageView a layout_weight of 0.1 and the LinearLayout a layout_weight of 0.9 (and giving both of them a layout_height of 0dp), but then on larger screens the ImageView ends up being at the top of the layout. I would like the contents of the root LinearLayout to be centered.

So is it possible to make the ImageView shrink only if it needs to, such that the LinearLayout below it is always completely visible? I am trying to accomplish this witout creating multiple layout files for different screen sizes/resolutions.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/tab_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".messages.MessagesHomeFragment"
    >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:src="@drawable/elephant_large" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        >

        <Button
            android:id="@+id/button_send_voice_message"
            android:layout_width="239dp"
            android:layout_height="wrap_content"
            android:text="Send a Voice Message" />

        <Button
            android:id="@+id/button_send_sms_message"
            android:layout_width="239dp"
            android:layout_height="wrap_content"
            android:text="Send an SMS" />

        <Button
            android:id="@+id/button_view_messages"
            android:layout_width="239dp"
            android:layout_height="wrap_content"
            android:text="Manage Messages" />

        <Button
            android:id="@+id/button_invite_sms_recipients"
            android:layout_width="239dp"
            android:layout_height="wrap_content"
            android:text="Invite SMS Recipients" />
    </LinearLayout>

</LinearLayout>

Answer 1

I was able to accomplish what I was trying to do by using the layout below. The key was to set the root LinearLayout’s height to wrap_content and set the layout_weight of the ImageView to 1.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/tab_fragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/elephantImageView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:layout_marginBottom="20dp"
        android:src="@drawable/elephant_large"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        >

        <Button
            android:id="@+id/button_send_voice_message"
            android:layout_width="239dp"
            android:layout_height="wrap_content"
            android:text="Send a Voice Message" />

        ...
    </LinearLayout>
</LinearLayout>