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:
Actual Screenshot of what I currently have:
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:
- 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:
State orange-yellow check:
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.
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.
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;)
来源：https://stackoverflow.com/questions/24888041/convert-multiple-nested-lineairlayouts-to-a-single-relativelayout