I am attempting to create this layout in AXML:
However I am unsure of the easiest way to create this and avoid many nested Layout's. I am thinking to have an outer LinearLayout (horiz) with 2 RelativeLayouts for each column (then add the widgets in there).
So like this:
But with this current layout its not positioning correctly:
Can you suggest the easiest way to achieve this layout (ie, not involving many nested layouts) and why my code below isn't displaying correctly?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:background="#161615">
<!-- Listing Details Section -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5">
<Mvx.MvxImageView
android:id="#+id/listingIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl LlistingIcon"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="First name Last name"
android:layout_toRightOf="#+id/listingIcon" />
<TextView
android:id="#+id/datePosted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="2 days ago"
android:layout_toRightOf="#+id/listingIcon" />
</RelativeLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5">
<TextView
android:id="#+id/likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="13 likes"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="4 comments"
android:layout_alignParentLeft="true" />
<Mvx.MvxImageView
android:id="#+id/moreInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl MoreInfoIcon"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You should be able to accomplish this with the below layout (using a single RelativeLayout). You may need to adjust padding/margin to your needs to get exactly what you want. I haven't tested it but this should get you close.
<RelativeLayout
...>
<Mvx.MvxImageView
android:id="#+id/listingIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="use appropriate margin for your needs/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="First name Last name"
android:layout_toRightOf="#+id/listingIcon" />
<TextView
android:id="#+id/datePosted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="2 days ago"
android:layout_below="#+id/name" /> <!-- see this change -->
<Mvx.MvxImageView
android:id="#+id/moreInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl MoreInfoIcon"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:textSize="15dp"
android:text="13 likes"
android:layout_alignPToLeftOf="#id/moreInfo" /> <!-- changed -->
<TextView
android:id="#+id/comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="4 comments"
android:layout_toLeftOf="#id/moreInfo"
android:layout_below="#id/likes" />
</RelativeLayout>
You can actually achieve this with a single horizontal LinearLayout and three children.
Your first child would be a TextView with a compound drawable.
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/some_icon"
/>
The text can be either hardcoded or something you set dynamically, but you can use the power of Android's spans if you need different sections of the text to be styled differently. This way you avoid creating unnecessary TextViews.
Your second child would be another TextView, again with spans if you need to style content differently, and your third child an ImageButton.
This approach will require at most two layout passes to succeed. (One if you don't use weights. It may even still be one pass if you specify weight for only one child and give it a width of 0dp, but I can't quite remember).
A single relative layout could also give you what you want, but requires the definition of confusing constraints and requires two measure/layout passes.
Related
I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
The layout code is
<RelativeLayout
android:id="#+id/table_relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
<TextView
android:id="#+id/example_column1_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/column1_header"
android:text=""
android:paddingLeft="8dip"
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column2_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column2_header"
android:text=""
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column3_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column3_header"
android:paddingRight="8dip"
android:text=""
android:visibility="gone"
/>
</RelativeLayout>
However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)
<ScrollView
android:id="#+id/table_scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true"
>
...
</ScrollView>
This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?
Try with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
</LinearLayout>
<ScrollView
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scroll_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<rows>
</LinearLayout>
</ScrollView>
<RelativeLayout>
you don't want to do this with xml.
Because you simply can't reference views inside of an relativeLayout
from the outside and vice versa, to align things.
I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly.
That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.
calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts
This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.
Greets, Steve.
OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.
Thanks for your answers!
This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>
First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question
Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.
I've created this fragment named searchfragment. Below there is the layout XML file of the searchfragment. Unfortunatelly the design isn't that smooth as I want it to be.
Here's what I wanted it to look like:
First row: Welcoming text (that works)
Second row: Search input field (that works, too)
Thirt row (and here it gets complicated): There should be a text named "Search for" and then a Spinner with the item you can search for (e.g. name, year, price). Then there's the Search button. Next thing is that you can sort the output. Therefore there's a text with "Sort for", a Spinner with the critirion and a Sort button. Best case the search section should be align to the left and the sort for to the right, but still centered.
Forth row: Output field.
Now as the elements are all present on my device, they are not in the graphical layout of Eclipse. I've tried for hours now to get it working but it's kind of hard if you're not sseing your objects.
Long text - short task: Please help me optimise my design.
searchfragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:text="#string/welcome" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:hint="#string/edit_message" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="136dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
</LinearLayout>
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/showResults"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</ScrollView>
</LinearLayout>
I've added a photo of the current design. The space with the red frame around it is the third "row" and should be changed. The second spinner is (I don't know why) much too wide. It should be that wide as the first one. Then all the elements should be about the same heigth and the elements should be centered.
You're on the right track with your layout, but the reason your second Spinner is taking up so much room is that you've set it's layout_weight to 1, and as it's the only one with a layout_weight, it's taking up the rest of the space that's free.
If you want the items to take up a relative amount of space on the screen, then you could stick with using layout_weight and give all of your items that property.
For example, just for your third row you would get rid of the LinearLayout around your Spinner, change some of the layout_width properties and give all of your items a layout_weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
This is going to give all of your items an equal weighting, so the TextViews will be the same size as the Spinners which will be the same size as the Buttons. Play around with the layout_weight attribute to make them more relative, for example if you want the Buttons to be twice the size as the Spinners, set their layout_weight to 2.
I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.
The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.
you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>
I have problems getting some of my views aligned in a relative layout that I use inside a row of my listview.
Here is a screenshot from the layout builder in Eclipse, this is what I think it should look like:
(source: janusz.de)
The next image is from the emulator. Now the TestTestTest View is at the top and covers the name and distance Textviews.
(source: janusz.de)
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="4dip">
<ImageView android:id="#+id/logo" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:adjustViewBounds="true"
android:scaleType="centerInside" android:src="#drawable/icon"
android:layout_centerVertical="true" android:layout_alignParentLeft="true"
android:background="#color/green" />
<TextView android:id="#+id/distance" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Distance"
android:layout_alignParentRight="true" android:layout_alignParentTop="true"
android:paddingRight="4dip" android:background="#000000" />
<TextView android:id="#+id/name" android:layout_width="fill_parent"
style="#style/ListHeadText" android:layout_height="wrap_content"
android:text="Name"
android:layout_alignTop="#id/distance" android:layout_toRightOf="#id/logo"
android:layout_toLeftOf="#id/distance" android:gravity="clip_horizontal"
android:lines="1" android:paddingLeft="4dip" android:background="#color/red" />
<TextView android:id="#+id/number" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Number"
android:paddingRight="4dip" android:layout_alignRight="#id/distance"
android:background="#color/darkred" android:layout_below="#id/distance" />
<TextView android:id="#+id/subcategory" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Subcategory"
android:paddingLeft="4dip" android:layout_alignLeft="#id/name"
android:lines="1" android:gravity="clip_horizontal"
android:layout_below="#id/distance" android:background="#color/green" />
<TextView android:id="#+id/test" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="TestTestTest"
android:paddingLeft="4dip"
android:layout_alignParentBottom="true" android:gravity="bottom"
android:background="#color/red" />
Shouldnt align_parent_bottom put the view at the bottom of the cell in the list?
Try adding android:layout_alignParentLeft="true" as well; sometimes Views aren't displayed properly if it can't anchor the view with at least 2 points. Also, is this RelativeLayout used within a ListView? If so, you might find you have some difficulty getting it to look right. There was another question where someone was having a problem where the RelativeLayout looked right on its own, but not once it was included as part of a ListView. We didn't manage to figure out what went wrong so he had to use nested LinearLayouts instead.