I am trying to make a listview in Xamarin with 3 columns, having 1 imageview and 2 textviews. The imageview should be aligned to the left (working), the first textview should be in the middle, all aligned under each other, so that all first letters align. and the 3rd column should be all the way on the right and this is not working, the value of the 3rd column is directly set behind the text of the 2nd column.
The text should be centered verticaly in the row, but this is also not
working although the android:gravity="center_vertical" is set.
My code :
Listview with everything wrong displayed as shown :
Try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_item_menu"
android:layout_width="fill_parent"
android:layout_height="50dip">
<ImageView
android:id="#+id/layout_item_menu_image"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="#drawable/menu_image" />
<TextView
android:id="#+id/layout_item_menu_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/layout_item_menu_image"
android:layout_marginRight="20dp"
android:text="TEXT 2"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/layout_item_menu_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/layout_item_menu_image"
android:layout_toLeftOf="#id/layout_item_menu_text2"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:text="TEXT 1"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
Since there is problems with posting your code sample, I'll post this layout that may be adapted to your situation
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip">
<Button
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
<RelativeLayout
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"/>
<TextView
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/tv_text1"
android:gravity="right"/>
</RelativeLayout>
</RelativeLayout>
Related
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the 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="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
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 have a listview with a custom adapter in which I have 3 textviews, two are next to each other and one is below the others. The problem I am running into though, is when the first textview extends, it pushes the other textview off the screen.
I have not been able to successfully get this to work, here is an example of what's happening:
As you can see when the first textview gets too long, it then pushes the other text off the screen. I would like it so it wraps but the date textview is also showing. It should also be functional in horizontal view.
Here's the listview adapter code:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="left"
android:layout_gravity="left" />
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="right"
android:layout_gravity="right" android:width="60sp" android:layout_toRightOf="#+id/liName" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
</RelativeLayout>
I am assuming that the text view being pushed is the liDate one.
You need to put this one before the liName in your layout and set the width to "wrap_content" and align it right. Then you lace the liName to the left of it with "fill_parent" width
So it would look like this:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:width="60sp"
android:layout_alignParentRight="true" />
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/liDate" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
Hope this is what you meant
The key was using "#+id/" for the first textview instead of "#id/"
This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/listEventTypeText"
android:layout_toLeftOf="#+id/listEventDateText"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/listEventDateText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/listEventTypeText"
/>
</RelativeLayout>
I have been having problems creating a relative layout in XML for a list item to be used for a series of items in a ListView. I have tried for hours and am tearing my hair out trying to get it to look how I want but cannot get everything to appear in the correct spot and not overlap or mis-align. I can get the first image and next two textviews in place but cannot get the last textview and imageview.
I have attached a wireframe style image of how I am trying for it to look and was wondering if someone could help me out?
The ImageView on the right is a set icon of the full height of the row with padding around it?
The two TextViews take up the majority of the width. The Address textview has the possibility of the text being long so it may need to get truncated if it runs out of space, or ideally have the font size shrink?
The next TextView will just hold a small string of max 5 characters.
The last ImageView is a small arrow to imply that this list item is clickable for more infomation. It needs to be centred like shown.
I would like if the icon, last textview, and last image always be in the same place/alignment down the list.
If someone could offer some assistance on this I would be so grateful.
Cheers guys
For anyone interested I managed to get this working. I know how much of a pain it is to go searching for an answer to a problem and it was never completely resolved.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/Icon"
android:layout_margin="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/topLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="20dip"
android:text="Name" />
<TextView
android:id="#+id/bottomLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_below="#+id/topLine"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="15dip"
android:text="Address" />
<TextView
android:id="#+id/distance"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:lines="1"
android:textColor="#color/blacktext"
android:textSize="12dip"
android:text="100m" />
<ImageView
android:id="#+id/arrow"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/redarrow"/>
</RelativeLayout>
I've done something similar (except the image on left)
It might help you:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/TextView01"
android:id="#+id/LinearLayout01"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_weight="1"
android:paddingRight="8dip"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout01"
android:orientation="vertical">
<TextView
android:text="#string/Birthday"
android:id="#+id/txtTitlevalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"></TextView>
<TextView
android:text="1960-01-01"
android:id="#+id/txtSubvalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-4dip"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="10"
android:textAppearance="?android:attr/textAppearanceSmall"></TextView>
</LinearLayout>
<TextView
android:text="2"
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
<TextView
android:text="weeks"
android:id="#+id/txtUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
</LinearLayout>
<!-- <View
android:background="#drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:clickable="true"
android:focusable="true"
android:layout_below="#+id/LinearLayout01" /> -->
</LinearLayout>
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.