Develop Reference

What could this empty spacing under my listview item be?

I extended the ArrayAdapter to inflate my own custom layout (it doesn't do too much else and the implementation is fairly straightforward). But I noticed there's this hairline of empty space between my listview items:
https://www.evernote.com/l/AM8w6ffsaQhGNJreixsY5fOwDbzTEL7Z73E
I've tried setting the height of the listview item as opposed to using wrap_content, there's no margin anywhere, and I'm setting the background color of the root view of the listview item so I'm having a hard time trying to figure out why that empty space is being added.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.event_row, parent, false);
holder = new ViewHolder();
holder.time = (TextView) convertView.findViewById(R.id.clock_event_time);
holder.title = (TextView) convertView.findViewById(R.id.clock_event_title);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
ClockEvent clockEvent = mClockEvents.get(position);
holder.time.setText(
ClockUtil.halfHourIndexToHourString(clockEvent.getStartHalfHourIndex())
+ " - " +
ClockUtil.halfHourIndexToHourString(clockEvent.getEndHalfHourIndex())
);
holder.title.setText(clockEvent.getTitle());
convertView.setBackgroundColor(clockEvent.getColor());
return convertView;
}
And here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:background="#color/flatui_blue_1"
android:padding="12dp"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical">
<com.compscieddy.foraday.ui.ForadayTextView
android:id="#+id/clock_event_time"
android:layout_height="wrap_content"
android:background="#drawable/rounded_white_outline"
app:fontface="montserrat_light"
android:paddingTop="2dp"
android:paddingBottom="2dp"
tools:text="7:00 - 8:00"
android:textSize="11sp"
style="#style/EventTimeTextView"/>
<com.compscieddy.foraday.ui.ForadayTextView
android:id="#+id/clock_event_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Early Morning Jog"
android:textColor="#android:color/white"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>

Since it's a ListView this probably is its divider. See dividerHeight, you can set it in xml or java to remove the divider.
android:dividerHeight="0dp"
// or
listView.setDividerHeight(0);

Ah - what a noob, I forgot the default styling of a dividerHeight exists. Solved by setting android:dividerHeight to 0dp. Also could have added a style/theme.

ListView items drawn on top of each other when scrolling (Android)

In a fragment, I have a ListView that has a custom ParseQueryAdapter<T>. The problem may not have anything to do with Parse, although I'm not sure.
As I was testing my app, I noticed something very strange. When I would scroll down my ListView, all the visible ListView items would be drawn on top of the next ListView item as seen in the second image below.
The list initialized properly as such:
As you can see, in my list item layout, I have an ImageView (ParseImageView to be specific) and a TextView. The TextView now displays some notes (don't mind the ID user_name_text_view) and the ImageView displays a placeholder blank profile picture.
When I scrolled down, the list looked like:
Here's my list view layout named fragment_post_view_list_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/post_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Here's my list item layout named list_item_post_view:
<?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="wrap_content">
<com.parse.ParseImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:background="#drawable/com_facebook_profile_picture_blank_square" />
<TextView
android:id="#+id/user_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/icon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/link_blue" />
</RelativeLayout>
Here's my adapter named PostViewListViewAdapter:
public class PostViewListViewAdapter extends ParseQueryAdapter<Post> {
// call superclass with a query to populate list view
public PostViewListViewAdapter(Context context, final String[] postsObjectIds) {
super(context, new ParseQueryAdapter.QueryFactory<Post>(){
public ParseQuery<Post> create() {
ParseQuery<Post> query = Post.getQuery();
query.whereContainedIn("objectId", Arrays.asList(postsObjectIds));
return query;
}
});
}
// this is similar to getView method in an adapter
#Override
public View getItemView(Post post, View v, ViewGroup parent) {
if(v == null) {
v = View.inflate(getContext(), R.layout.list_item_post_view, null);
}
super.getItemView(post, v, parent);
TextView usernameTextView = (TextView) v.findViewById(R.id.user_name_text_view);
usernameTextView.setText(post.getNotes()); // some string
return v;
}
}
How can I fix this problem?
Is this an issue with XML or Java?
I was following the two tutorials from Parse and the example from the Parse docs:
MealSpotting
Parse Query Adapter
I set the adapter and ListView here:
View rootView = inflater.inflate(R.layout.fragment_post_view_list_view, container, false);
mPostsObjectIds = SOME_STRING[];
PostViewListViewAdapter adapter = new PostViewListViewAdapter(getActivity(), mPostsObjectIds);
ListView listView = (ListView) rootView.findViewById(R.id.post_list_view);
listView.setAdapter(adapter);
I've tried getting rid of the ParseImageView in my list item layout, but my TextViews still draw on top of each other when I scroll.
Edit:
I forgot to mention that the list items display on top of each other after an orientation change.
I tested this on my Galaxy S5 (Android version 4.4.2 and Parse 1.4.1).
In my Activity, I show the Fragment here (called PostViewListViewFragment):
getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();

Try below layout :
<?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"
android:orientation="vertical" >
<ListView
android:id="#+id/post_list_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
</ListView>
</RelativeLayout >

Make Sure your adapter like this:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View rowView = convertView;
// reuse views
if (rowView == null) {
LayoutInflater inflater = context.getLayoutInflater();
rowView = inflater.inflate(R.layout.rowlayout, null);
// configure view holder
ViewHolder viewHolder = new ViewHolder();
viewHolder.text = (TextView) rowView.findViewById(R.id.TextView01);
rowView.setTag(viewHolder);
}
// fill data
ViewHolder holder = (ViewHolder) rowView.getTag();
String s = names[position];
holder.text.setText(s);
return rowView;
}
}
PS:You should watch this Google IO video about Listview,and here is the slides.

First create a ViewHolder class
static class ViewHolder {
protected TextView usernameTextView;
}
Then change your getItemView method like below
public View getItemView (Post post, View convertView , ViewGroup parent)
{
ViewHolder viewHolder = null;
if (convertView == null)
{
LayoutInflater inflator = context.getLayoutInflater();
convertView = inflator.inflate(R.layout.list_item_post_view, null);
viewHolder = new ViewHolder();
viewHolder.usernameTextView = (TextView)convertView.findViewById(R.id.user_name_text_view);
convertView.setTag(viewHolder);
convertView.setTag(R.id.user_name_text_view, viewHolder.usernameTextView);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.usernameTextView.setText(post.getNotes()); // some string
return convertView;
}

The problem seems to be in your list item layout -
Change it to 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="wrap_content">
<com.parse.ParseImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/user_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/icon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/link_blue" />
</RelativeLayout>
Probably you have extra background for each list item set that is causing such effect.
Alter and watch.
Hope this gives you idea!

Try changing your list view layout height to match_parent.

Credit to #VedPrakash for helping me fix this.
In case it helps anyone, I fixed the problem by replacing the fragment not adding it. So I changed this line from:
getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();
to:
getSupportFragmentManager().beginTransaction().replace(android.R.id.content, new PostViewListViewFragment()).commit();

Change the divider height of listview dynamically?

This question has been asked here a link
Also I want to clarify the question
I have 10 List Items in a Listview
I want to have the deviderheight of each List Items differently like for first Item it should be setDividerheight(2) for 2nd setDividerheight(4) like this..
I have made a custom Adapeter in which I am setting my Layout Like
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);
if(position ==2)
{
if (v != convertView && v != null) {
ViewHolder holder = new ViewHolder();
// TextView tv = (TextView) v.findViewById(R.id.artist_albums_textview);
// holder.albumsView = tv;
convertView = mInflater.inflate(R.layout.jazz_artist_list_item, null);
holder.albumsView = (TextView)convertView.findViewById(R.id.artist_albums_textview);
// lv.setDividerHeight(8);
v.setTag(holder);
}
}
else
{
if (v != convertView && v != null) {
ViewHolder holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.jazz_artist_list_item, null);
holder.albumsView = (TextView)convertView.findViewById(R.id.artist_albums_textview);
// lv.setDividerHeight(2);
v.setTag(holder);
}
}
}
but this seems not working properly.
Any idea on above this as how to set the divider height of Listview dynamically
Regards,
Laxmikant

//set Divider as you like
listView.setDivider((Drawable) getResources().getDrawable(R.drawable.orange));
//then set the height dynamically
listView.setDividerHeight(1);
in your Activity which has the ListView. Not the Adapter class.
If you what exactly what you wrote in the question. Do this:
let each listView Item layout contain a TextView and a View(divider after each item), then depending on the position parameter you get in the getView() method change the Height of the View.
ListView Item 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:padding="5dp" >
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/logo"
android:padding="5dp"
android:textSize="14dp" >
</TextView>
<View
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#id/label"
android:background="#drawable/orange" />
</RelativeLayout>
now in the adapter class your ViewHolder contains the TextView and also the View.
so,
Holder.View = (View)convertView.findViewById(R.id.view);
if(position == 0){
(Holder.View).setHeight(2);
}
and so on.

A slight tweak to above got it working for me (no setHeight() method in View?), thanks:
Holder.View = (View)convertView.findViewById(R.id.view);
if(position == 0){
(Holder.View).getLayoutParams().height = *your desired height e.g. 20*;
}

Android - how to align list view items to be nicely spaced left and right align?

I am trying to add an image to my ListView to make it look more like a button. I would like the images to be a little smaller, maybe 60% of current. And the images to lign up nicely on the right in a column. Here is a screen of what I currently have:
and here is my list view xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp"
android:layout_width="match_parent"
android:drawableRight="#drawable/arrow_button"
>
</TextView>
any idea what I am doing incorrectly?
The ListView that contains this TextView is defined like this:
One note, the way I create and work with my Lists is with the ListAdapter, using code like this:
Question q = new Question ();
q.setQuestion( "This is a test question and there are more than one" );
questions.add(q);
adapter = new ArrayAdapter<Question>( this, R.layout.questions_list, questions);
setListAdapter(adapter);
Thanks!

Ahh. You are doing the correct thing using a compound drawable. Not sure if there is a better way to maybe have the spacing in your compound drawable expand, but I know this'll work.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="10dp"
android:textSize="16sp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<View
android:layout_height="64dip"
android:layout_width="64dip"
android:background="#drawable/arrow_button"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
Basically just pointing out using the align parent right and left. You may want to add some margins or padding to them. Also make sure to vertically center your elements.

With the comment and advice that Frank Sposaro gave, you will be able to position your views correctly.
For your next problem, I advice you to make your own adapter similar to this:
private class CustomAdapter extends ArrayAdapter<Question> {
private LayoutInflater mInflater;
public CustomAdapter(Context context) {
super(context, R.layout.row);
mInflater = LayoutInflater.from(context);
}
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.row, null);
holder = new ViewHolder();
holder.text = (TextView) convertView.findViewById(R.id.mTextView);
holder.image = (ImageView) convertView.findViewById(R.id.mImage);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//Fill the views in your row
holder.text.setText(questions.get(position).getText());
holder.image.setBackground... (questions.get(position).getImage()));
return convertView;
}
}
static class ViewHolder {
TextView text;
ImageView image;
}
In your onCreate:
ListView mListView = (ListView) findViewById(R.id.mListView);
mListView.setAdapter(new CustomAdapter(getApplicationContext(), questions));
Another example for a ListView with an Adapter can be found here

Android: alternate background color in a TableLayout inside a ListView

I'm trying to display a set of data in a Grid style, using a TableLayout inside a ListView. What I want is to display each row with a different color (two colors alternatively). It works well when using a normal LinearLayout in the ListView, but for whatever reason when using a TableLayout I end up having all rows having the same background, which I think is the last one set.
For this, I am using a BaseAdapter, and in the getView function I have something like:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.list, parent, false);
holder = new ViewHolder();
holder.from = (TextView) convertView.findViewById(R.id.from);
holder.to = (TextView) convertView.findViewById(R.id.to);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
if(position%2==0) {
convertView.setBackgroundColor(R.color.cell_background);
}
//alternate background
else {
convertView.setBackgroundColor(R.color.cell_background_alternate);
}
// Bind the data efficiently with the holder.
holder.from.setText(list.get(position)[0]);
holder.to.setText(list.get(position)[1]);
return convertView;
}
Now in my main.xml for the activity, I just have a ListView. In the list.xml used to inflate the list, I have:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"/>
<TextView android:id="#+id/to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"/>
</TableRow>
</TableLayout>
Also, another problem is that the columns are not aligned: it just takes as much space as it needs for every row, every columns, when a TableLayout should align all columns. The only workaround that I came up with was to set a minimal width for the columns, but that's not pretty. Any reason why it does not work here?
Edit 21/06:
As you can see on the picture, the columns are not aligned (row 2 and 3 are but it's obviously because they have the same data inside).

try replacing
convertView = mInflater.inflate(R.layout.list, parent, false);
with
convertView = mInflater.inflate(R.layout.list, null);
and for table cell aligning issue can you give an example snapshot bcos I did not get what u trying to accomplish.

I have also faced same problem of alignment of table header and table row having data but after lot of efforts i found the only way to get rid of this problem is to give fix size to all the columns