Android XML Layout - ImageView taking all space

Question

This is my first post on Stackoverflow. My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout. The first LinearLayout contains a simple ImageView, and the second one contains three buttons.

My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed. I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value. Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?

The XML file is :

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/linearMainCreateTape"
 android:layout_height="match_parent"
 android:layout_width="match_parent"
 android:orientation="horizontal"
 tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageView"
            android:src="@drawable/highresoltape1"/>
    </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button1"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button2"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button3"/>

        </LinearLayout>
    </LinearLayout>

Answer 1

For anyone having this issue, there is a quick solution for that.

In your imageView XML add the following property:

android:adjustViewBounds="true"

for. eg

<ImageView
        android:adjustViewBounds="true"
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"/>

If you are using a Constraint Layout, don't forget to add the constraints.

Answer 2

You could use android:layout_weight in order to define how much space should be taken by the layouts:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/linearMainCreateTape"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:orientation="horizontal"
  tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageView"
            android:src="@drawable/highresoltape1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button2"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button3"/>

    </LinearLayout>
</LinearLayout>

In the example above both inner layouts have the same weight, so they bot fill 50% of the height.

If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.