Develop Reference

Why does the text in ListView item disappear when scrolling?

I have ListView which contains items containing a View and a TextView:
chat_item.xml:
<?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="90dp"
android:id="#+id/chat_message_wrapper"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui">
<View
android:id="#+id/message_indicator"
android:layout_width="10dp"
android:layout_height="90dp"/>
<com.neopixl.pixlui.components.textview.TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/midnight_blue"
android:padding="14dp"
android:layout_centerVertical="true"/>
</RelativeLayout>
And this is getView() in my Adapter class:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if (view == null) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.chat_item, null);
}
ChatMessageItem item = getItem(position);
if(item != null) {
TextView messageTextView = (TextView) view.findViewById(R.id.message);
ViewGroup messageWrapper = (ViewGroup) view.findViewById(R.id.chat_message_wrapper);
View messageIndicatorView = view.findViewById(R.id.message_indicator);
if(messageTextView != null) {
messageTextView.setText(String.valueOf(item.getMessage()));
RelativeLayout.LayoutParams textParams = (RelativeLayout.LayoutParams)messageTextView.getLayoutParams();
RelativeLayout.LayoutParams indicatorParams = new RelativeLayout.LayoutParams(10, ViewGroup.LayoutParams.MATCH_PARENT);
RelativeLayout.LayoutParams messageWrapperParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 90);
if(item.getSender() == ChatMessageItem.Sender.ME) {
textParams.addRule(RelativeLayout.LEFT_OF, R.id.message_indicator);
indicatorParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
messageIndicatorView.setBackgroundColor(getContext().getResources().getColor(R.color.light_blue));
}
else if(item.getSender() == ChatMessageItem.Sender.OTHER) {
textParams.addRule(RelativeLayout.RIGHT_OF, R.id.message);
indicatorParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
messageIndicatorView.setBackgroundColor(getContext().getResources().getColor(R.color.silver));
}
messageTextView.setLayoutParams(textParams);
messageIndicatorView.setLayoutParams(indicatorParams);
messageWrapper.setLayoutParams(messageWrapperParams);
}
}
return view;
}
I added the following line to at least keep the height of the items constant, which used to also change (which will probably give me problems later, as the content is dynamic, but ok..)
RelativeLayout.LayoutParams messageWrapperParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 90);
The problem is when I scroll up and down more and more text disappears. messageIndicatorView does not disappear though, only the text disappears. If I keep scrolling enough, all text will disappear. What am I doing wrong and how can I fix it? Thanks. (I know I must use a ViewHolder for better performance, but I will do that when this problem is fixed)

The problem is that as the ListView recycles and reuses the views, conflicting rules are added to the RelativeLayout.LayoutParams instances for the #id/message TextView. In particular this happens whenever a view for a "ME" message is reused for an "OTHER" message, or vice-versa.
RelativeLayout.LayoutParams keeps a list of rules (actually an array by verb, so that you cannot add, say, two LEFT_OF rules -- but any other combination is possible, including problematic ones).
The easiest solution is to use a new RelativeLayout.LayoutParams object each time, by changing this line:
RelativeLayout.LayoutParams textParams =
(RelativeLayout.LayoutParams)messageTextView.getLayoutParams();
into:
RelativeLayout.LayoutParams textParams =
new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
There are other solutions, such as having different actual layouts for each kind of ListView item (via getItemViewType()) but it's probably overkill in this case. However if the differences between the two kinds of views were greater, it might be worth considering.

Prevent GridView reset scroll to top when element is tapped?

I have a GridView that is populated by all apps installed on the device. The user can select certain apps here. I want the selected apps to be opaque and non-selected to be partially transparent. I did this with the following:
public View getView(int position, View convertView, ViewGroup parent) {
LinearLayout linearLayout = new LinearLayout(mContext);
linearLayout.setOrientation(LinearLayout.VERTICAL);
linearLayout.setGravity(Gravity.CENTER_HORIZONTAL);
LinearLayout.LayoutParams layoutParamsText = new LinearLayout.LayoutParams(150, 90);
ImageView imageView = new ImageView(mContext);
TextView appLabel = new TextView(mContext);
final OurAppInfo info = (OurAppInfo) getItem(position);
if(!installedApplications.contains(info)){
AlphaAnimation alpha = new AlphaAnimation(0.4F, 0.4F);
alpha.setDuration(0);
alpha.setFillAfter(true);
linearLayout.startAnimation(alpha);
}
String appName = info.label;
if (appName.length() > 25) {
appName = appName.substring(0, 25);
appName = appName + "...";
}
appLabel.setText(appName);
appLabel.setTextColor(Color.BLACK);
appLabel.setGravity(Gravity.CENTER_HORIZONTAL);
appLabel.setTypeface(null, Typeface.BOLD);
imageView.setImageDrawable(info.drawableAppIcon);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(110, 110));
appLabel.setTextSize(15);
linearLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (installedApplications.contains(info)){
installedApplications.remove(info);
receiveUpdate(installedApplications, false, false);
} else {
installedApplications.add(info);
Collections.sort(installedApplications);
receiveUpdate(installedApplications, false, false);
}
}
});
appLabel.setLayoutParams(layoutParamsText);
linearLayout.addView(imageView);
linearLayout.addView(appLabel);
return linearLayout;
}
This is part of the GridAdapter extends BaseAdapter. The code works as expected, when I tap on an app it is either removed from or added to the list and according to transparency is set. However, whenever I tap on an element in the GridView, the view is reset and I am brought to the top of the scrollable GridView. Obviously, this isn't a problem for a small number of apps, but if you're selecting apps near the XYZ letters, every time you select one you are brought back to ABC. How can I prevent this from happening?

It looks like you're refreshing the adapter whenever you make changes that makes the grid go back to initial position. You could try saving and restoring the position before making any changes to the adapter.
//Before refreshing the adapter you get both X and Y position
int xPos = grid.getScrollX();
int yPos = grid.getScrollY();
Then you update your adapter.
After the adapter is recreated you restore the grid position:
grid.scrollTo(xPos, yPos);
You could also use (everytime possible) the method notifyDataSetChanged() instead of creating a new adapter.
Hope it helps.

Check all child views for automatic height or width.
I guess gridview calculates size of this views whenever you change data.
This was solution in my case.
In my case changed this:
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
To this:
<ImageView
android:id="#+id/image"
android:layout_width="100dp"
android:layout_height="100dp" />

ListView not showing images properly

i have a listview that shows images downloaded from internet and have a custom layout for each row of the listview as below :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#00f"
>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/wish"
android:gravity="center_vertical|center_horizontal"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:text="" />
</LinearLayout>
My getview method is as belows :
public View getView(int arg0, View arg1, ViewGroup arg2)
{
// TODO Auto-generated method stub
View v;
final TextView tv;
if(arg1 == null)
{ // if it's not recycled, initialize some attributes
LayoutInflater lf = (LayoutInflater) conn.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = lf.inflate(R.layout.layitem, arg2, false);
tv = (TextView) v.findViewById(R.id.textView1);
tv.setLayoutParams(new LinearLayout.LayoutParams(width, width / 2));
// tv.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
}
else
{
v = arg1;
tv = (TextView) v.findViewById(R.id.textView1);
}
if(arg0 < count)
{
Bitmap object = getImage(iurl[arg0]);
tv.setBackground(new BitmapDrawable(conn.getResources(), object));
tv.setText(texts[arg0]);
}
else
{
tv.setBackgroundResource(R.drawable.wish);
tv.setText("");
}
return v;
}
What i am trying to do is that my ListView has 20 rows and my no of records is less than 20.so the records fill up the rows and the rest have default background image.count is the actual no of records.
iurl is the array containing the name of images to obtain from server and texts is an array containing messages.
The problem is that arg0 does not go beyond 2 and all rows contain images indexed from 0 to 2 and when i scroll down that it changes image corresponding to the row number.
Can i put the correct image in the correct row at the first stance or it will only take up as it scrolls.
i am setting the width of the textview as per the width of the screen of the mobile.is it the right way to do .kindly update.

I think you should use an asyntask to get images from specific url on internet.
If you don't use thread to load images from internet, it will take a long time to load image and crash your programe

Have you overriden getCount() method? It should return the number of items that are in the data set represented by this Adapter.

Removing the extra padding in a GridView in android

I want to remove the extra padding that appears in a grid view. I have images of the size 128*128 which will be occupying cells in the grid. But somehow there is an extra space that gets added to the contents of the grid.
After some research, I was able to determine that I have to override the listSelector property of the grid view. Now here's my question - I know I have to specify something like an xml drawable here, but what to specify in that?? I tried using a shape drawable with padding and stroke set to 0dp to no avail.
The question is asked and answered here, but they haven't given what the drawable must contain.
Can some one help me with this. Thanks!
EDIT: Ok - here's a copy of the UI that I have. And the XML layout for the same is as follows:
<GridView android:id="#+id/GV_A2ZMenu" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:numColumns="4"
android:layout_gravity="top" android:stretchMode="columnWidth"
android:gravity="center" android:listSelector="#null" />
And I am using a BaseAdapter class to populate the gridView. Here's its code:
public class AtoZMenu extends BaseAdapter {
private static Context AppC;
private Integer[] MenuImg = { R.drawable.alphabet_a, R.drawable.alphabet_b,
R.drawable.alphabet_c, R.drawable.alphabet_d,
R.drawable.alphabet_e, R.drawable.alphabet_f,
R.drawable.alphabet_g, R.drawable.alphabet_h,
R.drawable.alphabet_i, R.drawable.alphabet_j,
R.drawable.alphabet_k, R.drawable.alphabet_l,
R.drawable.alphabet_m, R.drawable.alphabet_n,
R.drawable.alphabet_o, R.drawable.alphabet_p,
R.drawable.alphabet_q, R.drawable.alphabet_r,
R.drawable.alphabet_s, R.drawable.alphabet_t,
R.drawable.alphabet_u, R.drawable.alphabet_v,
R.drawable.alphabet_w, R.drawable.alphabet_x,
R.drawable.alphabet_y, R.drawable.alphabet_z };
public AtoZMenu(Context C) {
AppC = C;
}
public int getCount() {
return MenuImg.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView IV;
float density = AppC.getResources().getDisplayMetrics().density;
if (convertView == null) {
IV = new ImageView(AppC);
IV.setMaxHeight((int) (1));
} else {
IV = (ImageView) convertView;
}
IV.setImageResource(MenuImg[position]);
return IV;
}
}
Can you spot the mistake?
Note: In the end I ended up implementing a similar screen in a table layout which renders much better grids.

Yep, I've had the same problem. You want to set the listSelector to #null:
<!-- Setting the listSelector to null removes the 5px border -->
<GridView
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#null" />
Also, try the following:
myGridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
I see you can do this in the XML, but I didn't when I had this same problem; not sure why.
I also hard-coded the key height:
float density = getContext().getResources().getDisplayMetrics().density;
mKeyHeight = (int) (56 * density);
....
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageButton b = (ImageButton) convertView;
if (b == null) {
b = new ImageButton(getContext());
b.setMinimumHeight(mKeyHeight);
b.setBackgroundResource(R.drawable.btn_keyboard_key);
b.setOnClickListener(this);
}
}
Sorry about not giving a precise answer, so let me know if you still need help after that.

The correct answer is to set android:listSelector to #android:color/transparent, as user mvds said here.

I used a variation of Shawn's solution.. it looks nice on the Emulator.
1) Decide on the # of columns, I chose 4
2) Set the Column Width
float xdpi = this.getResources().getDisplayMetrics().xdpi;
int mKeyHeight = (int) ( xdpi/4 );
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setColumnWidth( mKeyHeight );// same Height & Width
3) Setup the image in your adapter's getView method
imageView = new ImageView( mContext );
// (xdpi-4) is for internal padding
imageView.setLayoutParams(new GridView.LayoutParams( (int) (xdpi-4)/2, (int) (xdpi-4)/2));
imageView.setScaleType( ImageView.ScaleType.CENTER_CROP );
imageView.setPadding(1, 1, 1, 1);
4) Layout
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="4"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:gravity="center"
android:listSelector="#null"
/>
<!--
android:columnWidth="90dp" Specified in code
android:stretchMode="columnWidth" no noticable change
-->
That's it.

Even I had the same problem.
Try this:
image.setLayoutParams(new GridView.LayoutParams(imageWidth , imageHeight));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);.
Add padding accordingly for the images.It worked for me.

I had a similar problem, though in my case there was a quite large padding area at the bottom of my GridView (it was filled with the background color).
I haven't seen the solution to my issue here, so I'll post it here in case it's helpful.
Besides setting:
android:listSelector="#null"
in my GridView, I also had to set:
android:fadingEdgeLength="0px"
Or, in Java:
GridView.setFadingEdgeLength(0);

Try to give padding in pixels like this
android:paddingLeft="5px"

When I scroll a listview with a custom adapter too fast up and down, getView() starts behaving oddly. Why?

I have a listview with a custom arrayadapter that handles about 15 strings. The style of each row alternates (between labels and values for those labels--for example row 1 could be "email address" and row 2 would be the actual email address). I'm changing the style of each row to alternate like this in the arrayadapter's getView() method. So if the item at the current position is a label, I'll change the styling from the default row style (which is what the values have applied to them). When the listview first loads, the styling is perfect and just how I want it to be. If I scroll the list slowly up or down, it stays that way. However, if I scroll the list fast up and down, the styling of the value rows starts changing to that of the label ones until all of the rows have the styling of a label row. Does anyone know why this would be happening? I've used custom adapters on other listviews in the app with no problems like this.
Edit: Found out that it also changes all of the rows to the label styling on portrait->landscape orientation changes. Doesn't do this on landscape->portrait changes. Below is the adapter I'm using. Am I missing something?
public class DetailsAdapter extends ArrayAdapter<String> {
private TextView text = null;
private String item = null;
public DetailsAdapter(Context context, int resource, int textViewResourceId, String[] objects) {
super(context, resource, textViewResourceId, objects);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
text = (TextView) super.getView(position, convertView, parent);
item = getItem(position);
if (item.equals("Name") || item.equals("Mobile") || item.equals("Home") || item.equals("Email") || item.equals("Address")) {
text.setBackgroundColor(0xFF575757);
text.setTextSize(15);
text.setTypeface(null, Typeface.BOLD);
text.setPadding(8, 5, 0, 5);
} else {
text.setPadding(15, 15, 0, 15);
}
return text;
}
#Override
public boolean isEnabled(int position) {
item = getItem(position);
if (item.equals("Name") || item.equals("Mobile") || item.equals("Home") || item.equals("Email") || item.equals("Address")) {
return false;
} else {
return true;
}
}
}

Android reuses views fairly aggressively, and it is quite possible that a view that was used as an email address row gets reused on a row that's supposed to display a label, and vice-versa.
As a result, you cannot rely on "default" values. Set your padding, typeface, text size and background color in all cases:
if (item.equals("Name") || item.equals("Mobile") || item.equals("Home") || item.equals("Email") || item.equals("Address")) {
text.setBackgroundColor(0xFF575757);
text.setTextSize(15);
text.setTypeface(null, Typeface.BOLD);
text.setPadding(8, 5, 0, 5);
} else {
text.setBackgroundColor(DEFAULT_BACKGROUND);
text.setTextSize(DEFAULT_TEXT_SIZE);
text.setTypeface(null, DEFAULT_TYPEFACE);
text.setPadding(15, 15, 0, 15);
}

Don't need to do anything. I too faced the same problem and solved it like this:
Just inside the getView method add a first line
convertView=null;
It wont redraw the view immediately destroyed but instead would create new ones each time based on your logic (even odd or whatever)