List items don't highlight uniformly when tapped - android

What would cause only a portion of a list view item to highlight when tapped?
I'm working on an Android app where the user navigates through a series of lists, and some of the list items don't highlight properly. The list items have an image on the left followed by text. If the text in the item mostly fills the row, the entire row highlights when tapped. If the text is short, however, then only part of the row highlights when tapped. I'd really like the entire row to highlight regardless of the length of the text. My list item layout looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:id="#+id/zoneIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="5dp">
</ImageView>
<TextView
android:id="#+id/itemtitle"
android:layout_width="fill_parent"
android:textColor="#color/listItemColor"
android:textSize="14sp"
android:layout_gravity="top|left"
android:layout_height="fill_parent"
android:padding="13dp"
android:textStyle="bold">
</TextView>
</LinearLayout>
I thought that setting the layout_width of the text view to fill_parent would cause the text view to fill the remainder of the item's width, and that the whole row should highlight. Is there something else I need to set to control the width of the overall item? What am I doing wrong?
Edit: I also have another problem which may be related: When I scroll the list (which normally has a white background), the area occupied by the list items turns black during the scrolling, and then appears normal again when scrolling stops. The black area is the same size as the area that would be highlighted (except that it's all the items rather than just one), which is to say that there are white spaces on the right side of some of the items while scrolling. I'd like to prevent the list from turning black while scrolling, but perhaps that's another question. I mention it because it makes me think that some list items aren't filling their parent, but I'm still not sure why.

The black background is controlled by android:cacheColorHint (XML) or ListView.setCacheColorHint (Java) -- it used for drawing a solid color underneath the list while scrolling for performance reasons.
The list item should highlight in full regardless of the size of the TextView since the LinearLayout fills the parent. However you should certainly change the height of the LinearLayout towrap_content` -- it doesn't make much sense for it to fill a parent since the height of a list (and therefore the maximum size of a list item) is unbounded.
The height of the TextView and ImageView should probably be set to wrap_content as well. See if those changes resolve your issue.

Related

Position textview below list & reposition it as size of list increases

In my layout, I have a textview which I need to be fixed at the top of the screen, a button to be fixed at the bottom of the screen.
Between these two, I have a list with a textview(with a drawable) below it. (please see image). I want the textview positioned below the list;i.e.; as list items grow, the textview should reposition itself. As I click on the textview, I add items to the list. I am able to achieve this, but as my list items increase, the textview goes below the list & is not visible. So what I see on screen is the top textview with the list below it & the bottom button. The textview to add items in list view is not visible, so I cannot add items to my list. I need that even if the list items increase, I want the list to be visible along with the textview.i.e.; as list items grow, the textview should reposition itself. I tried various approaches suggested with several combinations of linear & relative layouts & positioning techniques, but I am not able to achieve this.
Try this..
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="abc xyz"
android:gravity="center"
android:layout_alignParentTop="true" />
<ListView
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button"></ListView>
<TextView
android:layout_below="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Save"
android:id="#+id/button" />
</RelativeLayout>
You have to nest the layouts here. You could for example use a LinearLayout with vertical orientation as parent and place your textview and listview (or whatver you are using for your item list) inside the LinearLayout. Here's the idea:
-TopView: set to wrap content
-ListView: set to fill parent
-TextView: Set to wrap content
If I'm not mistaken this should set the top and bottom view to fixed sizes and make the ListView fill the remaining space.
You can try adding that button with image as footer to the listview it will work with less noumber of items when it exceed the screen hight remove footer and make the bottom layout visible(Have to add the same footer item in bottom layout also).

In Listview one row in bigger in size

In my listview one row was in bigger in size.
Initially all are in same width and height
After scrolling some time one row become bigger (see in below image)
now in Entertainment
Scrolling again that Gaming will become bigger
How to resolve?
It looks like your items are varying in height a little bit.
One of the standard things to do for a ListView is to use the Android Attribute listPreferredItemHeight which will provide a preferred item height for the device.
So. Your layout for the list items would look something like this:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center_vertical"
/>
This will give you a single TextView for each item, with the preferred system height.

How to make ListView and ImageView scrollable into LinearLayout?

I have LinearLayout compoment which contains ListView and ImageView.
According to the documentation layout area should be scrollable if element's height is bigger than LinearLayout's area.
But scroll is not available.
I can scroll only when listview contains a lot of elements. But in this case ImageView component is not visible at all.
Using ScrollView is not allowed because ListView has his own Scroll element.
Could you please advice what should I do?
Here is part of my xml file:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/top_header"
android:layout_above="#id/bottom_menu"
android:layout_weight="1"
android:id="#+id/sub_content_view">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/eventsListView"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="260dp"
android:id="#+id/empty_area"
android:adjustViewBounds="true"
android:background="#drawable/empty_area"
android:contentDescription="#string/contentDescription"/>
</LinearLayout>
If you ListView is not empty, you may register the ImageView as list footer, it then scrolls with the ListView. However, footers are not displayed if the list is empty, so you'd have to add the ImageView to the empty view as well.
First 2 comments than a possible solution
(1) ListView won't be scrollable when there's nothing in it. Instead it will display an empty view which you can set either programaticlly or with XML (usualy a text view that says something to the extent of "your list is empty").
(2) Your ImageView is set for a fixed height while your ListView is set to wrap_content. As a result, when your ListView contains enough elements that is is larger than the area of the screen it will push your ImageView out of view. As I have yet to see a LinearLayout or RelativeLayout suddnely become scrollable if there's more stuff on the screen than there is space (I just tried to make it happen) I'm not surprised by what you're describing.
You're right that using a ScrollView with a ListView as a child is disfavored. What I would try is - instead of putting both the ListView and ImageView in the same LinearLayout - separate the two. I don't know the rest of your XML but if you moved the ImageView out of that layout element you should be able to position it below the part containing the ListView such that - regardless of the size of the list - the ImageView will remain in the same place.
The suggestion above to use a footer may work, however, a footer is pinned to the bottom of the list. That means, if your list is really long, there will be a point at which the footer is not visible unless you scroll down far enough that it is exposed. If you want the image to remain visible all the time, e.g. have the list scroll behind the image, then you need to use a different approach.

Scrolling up and down the ListView loses the top and bottom items in the list - Screenshot attached

I have an activity with the following items:
Action bar (one imageview, one view and two imagebutton) displayed on top of the activity, and for the rest of the screen I have one ListView. This is all placed in main.xml layout. The list will always have 6 rows no more and the action bar is not visible on this activity.
The listview loses text/images from some rows when scrolling up and down.
Before scrolling (I had to hide the logo though, sorry)
Before scrolling http://img706.imageshack.us/img706/37/32572081.png
After scrolling down and up (note DGL Lookup text disappear)
after first scrolling http://img638.imageshack.us/img638/7334/4scrollup.png
After scrolling down and up again (note DGL Lookup is still not there and Hazard Classes graphic and text disappear too
scrolling again and again http://img839.imageshack.us/img839/4970/5scrolldownagain.png
If I keep scrolling up and down, rows might show up again and might disappear as well.
here is my 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:background="#FFF"
android:orientation="vertical" >
<include layout="#layout/action_bar" />
<ImageView
android:id="#+id/splashscreen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" >
</ImageView>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:textColor="#000" >
</ListView>
</LinearLayout>
Any quick help! I am very new to Android
#Frankenstein: Thanks for your help, you gave me the thread head and I followed it until the I got the solution.
The issue was that the listview display certain number of rows on a screen, and display more rows as you scroll up and down using getView method. The new rows displayed will normally take the style of the rows they are replacing.
So, if row1 has a different font style than others, then the row that will take it's place will inherit the same font style. What you may do, check if this is a different row that shouldn't inherit the style and then change the style to what you like.
Check this article http://android.amberfog.com/?p=296 which will explain what I just said in a technical way

How to show an icon in the middle of the screen for an empty listview?

As you can see the picture below that when there is no item in the list it shows nice icon in the middle of the screen with a text. I can get only a text shown if the listview is empty with this code in my custom layout :
<TextView android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:text="No data"/>
adding this element in my layout show a text when the list is empty. I would like to show an icon instead and also it should be in the middle of the screen. Instead of a textview if I use a imageView again it goes top of the screen. what is the best approach to this? I might be able to get it as I like using imageview and textview and both with android:id="#android:id/empty attribute. or is that possbile to have layout with the android:id="#android:id/empty attribute and place imageview and textview inside?
Sure, just use a layout. LinearLayout might work well in this case. You'll probably have to set the gravity to center. It seems you already had the right idea, I'm not sure why you didn't just try it out? You would have had it!

Categories

Resources