Convert multiple nested LineairLayouts to a single RelativeLayout

Question

First of all, I'm pretty bad at UI in general, that's why I need some help. Right now I have the following:

Explained with a Paint picture: enter image description here

Actual Screenshot of what I currently have: enter image description here

With the code that can be found at the bottom of this post. This is done with a few nested LineairLayouts and weights.

What I want now is the following: enter image description here

ImageButton (width and height are known / Image is set in xml)
TextView (height is known, width should fill between 1 and 3)
TextView (height is known, width (text) is not known yet)
EditText (height is known, width (text) is not known yet)
AutoCompleteTextView (height is known, width should fill between 4 and 9)
TextView (width and height are known / Text is set in xml)
Spinner (height is known, width should fill between 6 and 8)
ImageButton (width and height are known / Image is set in xml) This is the one I want to add now.
Space (width and height are both determined in-code to fill the empty spaces)

I know I'm probably able to figure out how to add this ImageButton with another nested LineairLayout and nested weight, but since the performance of my app isn't that great already and I'm currently trying to resolve a lot of performance issues, I think it's best to convert this list_item.xml to a single RelativeLayout.

So, how do I do this? I just plain suck at UI placement so I would appreciate all the help I can get. How to create a RelativeLayout with the result of the second Paint-image?

The current code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <!-- The TextViews -->
    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical" >

            <TextView
                android:id="@+id/tv_product_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:singleLine="true" />

        </LinearLayout>

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin" />

    </LinearLayout>

    <!-- The EditTexts -->
    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll1"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible" >

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:orientation="vertical"
            android:padding="0dp">

            <EditText
                android:id="@+id/et_result_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="number" />

            <TextView
                android:id="@+id/tv_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tags"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:padding="0dp"
            android:orientation="vertical">

            <AutoCompleteTextView
                android:id="@+id/actv_result_name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:ellipsize="end"
                android:inputType="text"
                android:singleLine="true" />

            <Spinner
                android:id="@+id/sp_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <!--<ImageButton
                android:id="@+id/btn_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@android:drawable/ic_menu_manage"
                android:contentDescription="@string/button_tags_content_description"
                android:background="@layout/transparent_background" />-->

        </LinearLayout>

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

EDIT 1:

After I've tried @AlexBalo suggestion it's close to working. It's only having trouble with the android:layout_leftOf="@id/left_ll".

PS: I have two different states for my Item: One unchecked/green check/red cross, which only shows the Views 1, 2 and 3. And one orange-yellow check, which is like the pictures provided.

Here is the result of AlexBalo's changes so far:

State unchecked / green check / red cross: enter image description here

State orange-yellow check: enter image description here

With the following code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/left_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_product_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/left_ll"
        android:layout_toLeftOf="@+id/right_ll"
        android:ellipsize="end"
        android:singleLine="true"
        android:layout_marginTop="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <EditText
        android:id="@+id/et_result_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_product_name"
        android:layout_toRightOf="@id/left_ll"
        android:inputType="number"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <AutoCompleteTextView
        android:id="@+id/actv_result_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_toRightOf="@id/et_result_amount"
        android:layout_below="@+id/tv_product_name"
        android:ellipsize="end"
        android:inputType="text"
        android:singleLine="true" />

    <TextView
        android:id="@+id/tv_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_result_amount"
        android:layout_toRightOf="@id/left_ll"
        android:text="@string/tags"
        android:gravity="center"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <Spinner
        android:id="@+id/sp_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/actv_result_name"
        android:layout_toRightOf="@id/tv_tags"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <LinearLayout
        android:id="@id/right_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <ImageButton
            android:id="@+id/btn_tags"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@android:drawable/ic_menu_manage"
            android:contentDescription="@string/button_tags_content_description"
            android:background="@layout/transparent_background"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

I'm also having some problems with getView being called a lot of times instead of only once on creation, but that is something for another question.

score 3 · Accepted Answer · answered Jul 22 '14 at 13:25

This is what you are expecting I think. Try the layout and tweek it to suite your needs:

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

    <!-- Left side -->

    <LinearLayout
        android:id="@+id/leftContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />

        <View
            android:id="@+id/space9left"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image1" />
    </LinearLayout>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview2" />

    <EditText
        android:id="@+id/edittext4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/textview2"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Edittext4" />

    <TextView
        android:id="@+id/autocompleteTextview5"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/edittext4"
        android:layout_below="@+id/textview2"
        android:text="autocompleteTextview5" />

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/edittext4"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview6" />

    <TextView
        android:id="@+id/spinner7"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/autocompleteTextview5"
        android:layout_toRightOf="@+id/textview6"
        android:layout_toLeftOf="@+id/rightContainer"
        android:text="Spinner7" />

    <!-- Right side -->
    <LinearLayout
        android:id="@+id/rightContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Textview3" />

        <View
            android:id="@+id/space9right"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_below="@+id/image1" />

        <ImageView
            android:id="@+id/image8"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />
    </LinearLayout>

</RelativeLayout>

Hope it helps.

Sorry for the late response, I couldn't get everything sorted out yesterday to test your code, but now I have merged it. The result can be found at Edit 1 of my main-post. Most works as I want, except for the `android:layout_leftOf="@id/left_ll"`. I did solve this thanks to axl_coder's help, and now the only thing left is the textView2 now having the correct size. It should fill in between Image1 and TextView3, but it looks like it has the same width as the Image. I've tried both `match_parent` and `wrap_content` as width, with the same results. In my code TextView2 is named `tv_product_name`. — Kevin Cruijssen, Jul 23 '14 at 11:14

score 0 · Answer 2 · answered Jul 22 '14 at 13:15

0

Once you have created your RelativeLayout avoid to use the different LinearLayout, because I don't think you need them, instead insert your view (textView) directly inside this relativeLayout specifyng their absolute position.

This is a brief example :

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="752dp"
      android:layout_height="336dp"
      android:background="@drawable/img_example_panel">

<TextView 
    android:id="@+id/textView1"
    android:layout_width="342dp"
    android:layout_height="39dp"
    android:layout_marginLeft="261dp"
    android:layout_marginTop="21dp"
    android:textSize="23sp"/>  

<TextView 
    android:id="@+id/textView2"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginLeft="21dp"
    android:layout_marginTop="21dp"
    android:background="#0000"/>

 <TextView 
    android:id="@+id/textView3"
    android:layout_width="226dp"
    android:layout_height="39dp"
    android:layout_marginLeft="388dp"
    android:layout_marginTop="72dp"
    android:textSize="23sp"/> 

 <TextView
    android:id="@+id/textView5"
    android:layout_width="243dp"
    android:layout_height="37dp"
    android:layout_marginLeft="56dp"
    android:layout_marginTop="150dp"
    android:textSize="22sp"
    android:paddingLeft="8dp"
    android:gravity="center_vertical"
    android:background="#0000"/>

 <TextView
    android:id="@+id/textView7"
    android:layout_width="243dp"
    android:layout_height="37dp"
    android:layout_marginLeft="423dp"
    android:layout_marginTop="150dp"
    android:textSize="22sp"/>

Of course the position is not relative to your layout, you have to adjust them;)

answered Jul 22 '14 at 13:15

axl coder

739
3
19

Sorry for the late response, I couldn't get everything sorted out yesterday to test your code, but now I have merged it. The result can be found at Edit 1 of my main-post. Most works as I want, except for the `android:layout_leftOf="@id/left_ll"`. – Kevin Cruijssen Jul 23 '14 at 08:27
1

Instead of use android:layout_leftOf="@id/left_ll" use absolute positioning, I mean that if you put a view (suppose it has a width of 100dp) with marginLeft 50dp you have to set marginLeft=150dp on the next view (50dp+100dp) to draw it next to the first one... – axl coder Jul 23 '14 at 08:38
So that means I have to do it in-code, since I also have margins in between the elements. So in code (for example the getView-method) I should add the marginLeft of those items to `image.getMeasuresWidth() + (2 * myMargin in px)`? – Kevin Cruijssen Jul 23 '14 at 08:58
You don't have to do it necessarily in code, you can do it in your XML simply calculating it;) – axl coder Jul 23 '14 at 09:19
If my Image-size would be constant across different screen-sizes yes, but they are wrap_content. I have, like it's advisable with Images, put different sized Images in the multiple drawable folders based on the screen-size. Anyway, thanks a lot so far. After some custom changes a lot is working as I want it now. Only problem that I still have is the TextView2 having an incorrect size. It should fill in between 1 and 3, but instead it's about the same size as 1. I've tried both with width `match_parent` and `wrap_content`, but it doesn't change width. It's the `tv_product_name` in my code. – Kevin Cruijssen Jul 23 '14 at 11:09
Woops.. :S All these comments were meant for @AlexBalo's answer lol.. My bad. Still thanks for tip for absolute positioning though. ;) – Kevin Cruijssen Jul 23 '14 at 11:12

Convert multiple nested LineairLayouts to a single RelativeLayout

2 Answers2

Linked