I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.
I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.
I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.
Related
I'm trying to build a LisView item that contains a LinearLayout with two TextView objects. The first object needs to be 70% of the screen width, and the other needs to be fixed at a 125dp width.
I am using the layout_weight attribute to tell the layout to make the first TextView scale appropriately, but I'm not able to get it working correctly. It looks fine in the preview box (Screenshot 1), but in the emulator the TextView on the left is always resized to just fit it's contents (Screenshot 2).
Does anyone know what's going on? I'm new to Android development, so this is just baffling me.
Thanks!
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:layout_weight="0"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
When providing a weight, width (or height for vertical layouts) has to be 0dp.
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:weightSum="10"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
Ok, so I've figured out the issue. Two things were incorrect. First, the answer from #user3249477 is correct that I needed to include the weightSum in the parent LinearLayout tag, and I also needed to set the width to 0dp for the text elements that should scale.
However, this still did not actually fix my problem. The actual problem was the parent ListView had it's width and height set to "wrap_content" instead of "fill_parent". I updated this and the layout started to work.
I will am accepting the answer from #user3249477 as he was correct but I also would appreciate it if anyone could up-vote this answer as it did allow the fix above to work.
Thanks!
I'm working on a ListView where each item has an image and some text. On my older phone, HTC Evo 4G, things came up exactly as expected. Image is nicely sized and text looks fine. Then I loaded the same app on my new phone, HTC One, and the images are so tiny they are useless. I know the HTC One has a significantly higher resolution, but I cannot figure out how to make each item in the ListView larger.
I'm not sure what to post, but I think the layout xml files are the issue.
Here's activity_main.xml:
<?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:orientation="vertical">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent" android:gravity="center_horizontal"
android:layout_marginTop="2dip" android:background="#669900">
<!--
Use layout_weight to stretch the EditText and compress the button.
To avoid text wrap, the editable text is forced to occupy only one
line
-->
<EditText android:layout_width="wrap_content"
android:typeface="normal"
android:layout_weight="1" android:lines="1" android:ellipsize="middle"
android:hint="#string/hint" android:id="#+id/search_key" android:layout_height="fill_parent" android:maxLines="1"></EditText>
<ImageButton android:layout_width="wrap_content" android:src="#drawable/ic_menu_search" android:adjustViewBounds="true"
android:layout_weight="0" android:id="#+id/btn_ok" android:layout_height="wrap_content"></ImageButton>
</LinearLayout>
<TextView android:layout_height="wrap_content" android:id="#+id/tweet_header"
android:gravity="right" android:layout_width="fill_parent" android:paddingRight="4dp"
android:background="#99cc33" android:textColor="#000000" android:textSize="21dp"></TextView>
<ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/tweet_list"></ListView>
</LinearLayout>
And the ListView is made up of this item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/created_at"
android:text="now"
android:textSize="10sp"
android:layout_below="#id/itemImage"
android:layout_alignParentRight="true"
android:textStyle="italic"
android:layout_width="wrap_content"></TextView>
<TextView
android:id="#+id/itemURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="itemURL"
android:visibility="invisible" />
</RelativeLayout>
So the app does this: It taps ebay for car data and presents the search results as line 1 with a picture, line 2 with the ebay item title. A hidden value is the URL so users can tap the ListView line and launch a web browser.
Looks like the wrap_content setting for the ImageView's layout_width and layout_height are the issue. When I switched that to numerical values, suddenly I saw it change size. Finally setting it to 100dp made the images viewable.
As an aside, I had a terrible time with ADS and the emulator. It consistently failed to re-load my updated app. Often complaining about the Package Manager and suggesting the some process was running. I little idea what was running and how to fix it. When I switched to loading the app straight to the phone, then it worked fine.
So, I think now I need to create a system that is proportional, and takes in to consideration the displaying devices resolution.
Problem is the Relative Layout width being wrap_content. Try changing that to match parent. then you would not have to go thru this ordeal
I'm new to android development... while making my application layout i want a button to remain at the very bottom of the screen while a scroll view is placed above it. I am unable to do this i was using the size of the scroll view as 430dp so that it works but when i change the orientation of the screen this does not work as 400dp is bigger than the screen.
how do i make it so that the button stays at the bottom irresepective of the screen orientation ?
:/
Set the ScrollView's layout_height to fill_parrent and layout_weight to 1 and the Button's height to wrap_content.
You could go with this
android:gravity="bottom"
This should always push your element to the bottom of its container.
But it'd more helpful if you'd post up your layout XML.
Here's a real world example of precisely what you're asking.
In this layout, I have a header at the top, a list view taking all the space below it and a button to clear (cancelled, failed, finished) elements of the list view, then right at the bottom I have a custom control showing a toolbar.
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:id="#+id/layout" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/browsePeerHeader"
android:layout_width="fill_parent" android:layout_height="70sp"
android:layout_marginBottom="2sp"
android:layout_gravity="top"
android:background="#drawable/background_barbed_wire"
>
<ImageButton
android:id="#+id/frostwire_sphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/icon"
android:layout_gravity="center_vertical"
android:layout_margin="3sp"
android:background="#00000000"/>
<TextView android:id="#+id/browsePeerTitle" android:textSize="30sp"
android:text="Downloads"
android:textColor="#ffffffff" android:textStyle="bold"
android:shadowColor="#ff000000"
android:shadowDx="1.0"
android:shadowDy="1.0"
android:shadowRadius="4.0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10sp"
android:gravity="left|center_vertical"/>
</LinearLayout>
<ListView android:id="#+id/ListViewTransfers"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:layout_marginBottom="2sp"
android:layout_weight="1"></ListView>
<Button android:id="#+id/ButtonClearFinished" margin="2sp"
android:layout_width="fill_parent" android:layout_height="wrap_content"
/>
<com.frostwire.android.views.FrostWireStatusBar
android:id="#+id/FrostWireStatusBar" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" /></LinearLayout>
Here's a screenshot
The trick is basically to have the list view use all the space left in the layout that contains it, you don't even have to tell it to fill_parent, just with android:layout_weight="1 it should work.
My project was working fine, when suddenly the text on my buttons was being displayed vertically. By which I mean instead of map_infobutton displaying
Info
it was displaying
I
n
with the f and o beyond the bounds of the button, even though I have specified height=wrap_content in the TableLayout containing the buttons.
It appears fine in the Layout tab in eclipse, and only appears vertical in the emulator (not tried on target hardware)
getPaddingLeft for one of the buttons returns 11 at various points in the code. Not sure where it gets that from, but the spacing looks bigger than that anyway. I did have three buttons and took one away, but the problem existed with both two and three buttons.
My layout is:
<?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">
<TextView
android:id="#+id/map_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="8px"
android:paddingBottom="8px"
android:gravity="center"
android:textColor="#color/header_foreground"
android:background="#color/header_background"
android:text="#string/map_header"/>
<TableLayout
android:id="#+id/map_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="4px"
android:paddingLeft="2px"
android:paddingRight="2px"
android:stretchColumns="*"
android:textColor="#color/footer_foreground"
android:background="#color/footer_background">
<TableRow>
<Button
android:id="#+id/map_infobutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_infobutton" />
<Button
android:id="#+id/map_selectbutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_selectbutton" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/map_selectiondetails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/map_footer"
android:orientation="horizontal"
android:gravity="center"
android:textColor="#color/main_foreground"
android:background="#color/main_background" >
<TextView
android:id="#+id/map_selectionname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectiondistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
</LinearLayout>
<SurfaceView
android:id="#+id/map_map"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_above="#id/map_selectiondetails"
android:layout_below="#id/map_header"
android:clickable="true"/>
</RelativeLayout>
Any ideas? Also if you have any comments on how I'm creating the layout, as I'm new to this and it seems like there are a lot of options available, but I'm trying to make it as simple as possible.
I had a similar problem.
I see that you have multiple buttons that you want to have the same width, so you specify the button's width as "0px" and the weight as "1". This is exactly what I did.
When I set the button text within the XML file, things look fine. However, I have one button that changes is text depending on whether a process is running or not. In my case, it is similar to the situation where a button toggles from "Start..." to "Stop..." After the text changes, it prints vertically and only the top one or two letters of each button are shown.
After reading your post, it occurred to me that, perhaps, the text was being set before the button width had been determined, and then not updated once the button width changes according to the "weight".
I modified it such that in each button, it now reads:
android:layout_width="fill_parent" instead of "0px"
In theory, this should have the same effect. However, in practice, the button width is adjusted before the text is updated. The behaviour is now correct.
Rob
I am using a list view in Android 1.5 to show a list of images and text next to the image. I am trying to vertically center the text but the text is at the top of the row instead of centered. Below is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<ImageView android:id="#+id/item_image" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:paddingRight="10dip"
android:src="#drawable/default_image" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_toRightOf="#id/item_image"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
/>
</RelativeLayout>
It seems strange that I need to set alignParentTop="true" when I'm trying to vertically center the text, but if I don't the text does not even show up. What am I doing wrong?
EDIT following the comments:
It turns out making this work with RelativeLayout isn't easy. At the bottom of the answer I've included a RelativeLayout that gives the effect wanted, but only until it's included in a ListView. After that, the same problems as described in the question occurred. This was fixed by instead using LinearLayout(s).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:orientation="horizontal">
<ImageView android:id="#+id/pickImageImage"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#drawable/icon"
android:scaleType="fitXY"
android:layout_marginRight="10dp"/>
<TextView android:id="#+id/pickImageText"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="left|center_vertical"
android:text="I'm the text"/>
</LinearLayout>
If you want to have two text boxes, you can nest a second orientation="vertical" and LinearLayout after the ImageView and then put the text boxes in there.
This works, but I have to admit I don't know why the RelativeLayouts didn't. For example, this blog post by Romain Guy specifically says that the RelativeLayout should. When I tried it, I never got it to quite work; admittedly I didn't do it exactly as he did, but my only changes were with some attributes of the TextViews, which shouldn't have made that much of a difference.
Here's the original answer:
I think you're confusing Android with all those somewhat contradictory instructions in RelativeLayout. I reformatted your thing to this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<ImageView android:id="#+id/item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dip"
android:src="#drawable/icon"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/item_image"
android:layout_centerVertical="true"
android:text="Blah!"/>
</RelativeLayout>
And that works fine. I removed many of your redundant android:layout_alignParentxxx because they weren't necessary. This view now comes up with the picture in the top left corner and the text vertically centered next to it. If you want the picture vertically centered as well, then you can't have the RelativeLayout be on android:layout_height="wrap_content" because it's trying to make itself no taller than the height of the picture. You'd have to specify a height, e.g. 80dp, and then set the ImageView to a fixed height like 60dp with android:scaleType="fitXY" to make it scale down to fit properly.
Was stuck on a similar issue for a while, but found this from CommonsWare:
"When you inflate the layout, use inflate(R.layout.whatever, parent, false), where parent is the ListView."
Works but only when you set the height of the row to a specific value (ie you can't use wrap_content).
Baseline directive would do it, but ImageView simply does not support baseline alignment as of today. You can work around this by creating a subclass of ImageView, override the getBaseline() method and return the height of the image.