0

I would like a layout to appear like the below:

layout

I understand that this must be done using weights and a combination of either LinearLayouts, TableLayouts or GridLayouts.

Regarding the image, all items are centred horizontally unless specified otherwise.

Any help is greatly appreciated.

I am finding it difficult to convert items from taking up a percentage of the screen to weights. From what I have read so far, it seems that I will need multiple layers of nesting different layouts but I was hoping it could be done easily with GridLayout functionality.

This is what I have so far:

<?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="@drawable/bg_repeat"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:orientation="horizontal" >

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="8"
        android:contentDescription="@string/c_d"
        android:src="@drawable/img" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3" >

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="8"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/edit1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:ems="10"
            android:inputType="text" >
        </EditText>

        <EditText
            android:id="@+id/edit2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:ems="10"
            android:inputType="text" />

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_margin="1dp"
            android:clickable="true"
            android:text="@string/btn" >
        </Button>
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>

<Space
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="bottom"
    android:layout_weight="1" >

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:text="@string/btn2" >
    </Button>

    <Button
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:text="@string/btn2" >
    </Button>
</LinearLayout>

</LinearLayout>

I merged the two images into 1. If this could be done more efficiently, I would love to hear about it.

5
  • Easiest way is just to write layout by yourself. Like inherit from ViewGroup and implement onLayout(). With tons of LinearLayouts your xml will be like mess. Apr 1, 2014 at 17:51
  • Your onLayout() will be looking like this gist.github.com/rongi/9919963 Apr 1, 2014 at 18:23
  • In your example, where are the variables 'bigImageView' and 'smallImageView' initialized? Should I initialize them in an XML file or create them in the view? Apr 1, 2014 at 19:12
  • Try using layout_margin for spacing and setting the background image of a linear layout for imageview B. Between Space, weights and margins you should be able to get the look you want.
    – Dave S
    Apr 1, 2014 at 21:49
  • @BillShakespeare It doesn't really matter. But most convenient way is to define them in xml with "merge" root. Then in constructor of your custom layout just inflate them in. More gists btw gist.github.com/rongi/9931789 Apr 2, 2014 at 10:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.