Left aligning images in LinearLayout using gravity or linear_gravity in XML

Question

First off, this is not a duplicate question, to best of my ability I've tried all (there are many) similar questions. Solutions to such problems appear to be very subjective, specific to a given scenario.

My layout currently appears as follows. Black boxes are images (logo and body, respectively), colours represent each layout:

My XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:padding="0px"
    android:layout_margin="0px"
    android:orientation="vertical">

    <LinearLayout
        android:layout_weight="16"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFF"
        android:gravity="top|center"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/logo"
            android:layout_gravity="top|center" />
    </LinearLayout>

    <LinearLayout
        android:layout_weight="4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00F"
        android:gravity="bottom|left"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/body"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/body"
            android:layout_gravity="bottom|left" />
    </LinearLayout>

</LinearLayout>

Here you can see I have a parent linear layout, split into two children linear layouts. This is because I need the images to be positioned differently within that part of the page.

In a nutshell, I need logo to be vertically aligned to the top, and body horizontally aligned to bottom-left.

Now, a few things that I've tried:

• Using RelativeLayout rather than Linear
• Switching gravity with layout_gravity for both LinearLayout and ImageView, along with combinations of excluding each
• Fairly confident match_parent for width and height is what I want, but I have tried different combinations with wrap_content

What I've come to understand:

• gravity:top requires the parent view use orientation:horizontal
• gravity:left requires the parent view use orientation:vertical
• gravity applies to the children of the view
• linear_gravity applies how the child aligns with it's parent
• Using the same value for gravity on the parent and linear_gravity on the child might have the same effect (when using one instead of the other)?

Hopefully this is enough information. I'm having a very difficult time wrapping my head around how these layouts work.

Thank you SO much for the help!

Answer 1

I think your problem is you are setting dimensions of the image views to match_parent. I would use a RelativeLayout as it seems to be the most efficient in your case (pseudo-XML-code):

RelativeLayout (width=match_parent, height=match_parent)
  ImageView (width=wrap_content, height=wrap_content, 
             alignParentTop=true, centerHorizontal=true)
  ImageView (width=wrap_content, height=wrap_content, 
             alignParentBottom=true, alignParentLeft=true)

You don't need any gravity setting here. You might want to play with the scaleType attribute depending on your image sizes.