Develop Reference

How to add Imageview and Textview on Image?

I am using ListFragment and ArrayAdapter to show a Image view list using following list_view.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="200dp"/>
In my Adapter.getview I am using picasso to load the image:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (null == convertView) {
convertView = inflater.inflate(R.layout.list_view, parent, false);
}
Picasso
.with(context)
.load("http://i.imgur.com/rFLNqWI.jpg")
.fit()
.into((ImageView) convertView);
return convertView;
}
This is onActivityCreated method in Fragment class extended by ListFragment:
TestAdapter adapt = new TestAdapter(getActivity().getApplicationContext(), R.layout.list_view, pictures);
setListAdapter(adapt);
Above code is giving me a listview where I can see the images loading from picasso library. How can I add text and image on the image loaded by picasso in listview? Inshort like this:
You can see one text "Type text here" in left bottom corner and one icon on right top corner (not exactly in the corner)

You could implement a Picasso Transformation where you take the bitmap and then use the Canvas primitives to draw/render the text on top of the Bitmap and return the final bitmap.
Another approach would be to use a RelativeLayout with 3 sub-views: an ImageView which stretches to its parent (the RelativeLayout) so it becomes the overall background; and then a TextView for your text and finally another ImageView for your icon.

Create list_view.xml like this
<Relative layout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<EditText
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:text="Type your text"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:layout_height="200dp"/>
</Relative>

you can use ViewHolder to set TextView and image both, and then use it with picasso.
Here's the code snippet.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
ViewHolder holder;
if (row == null) {
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.titleTextView = (TextView) row.findViewById(R.id.grid_item_title);
holder.imageView = (ImageView) row.findViewById(R.id.grid_item_image);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}
GridItem item = mGridData.get(position);
holder.titleTextView.setText(Html.fromHtml(item.getTitle()));
Picasso.with(mContext).load(item.getImage()).into(holder.imageView);
return row;
}
For more details refer
http://javatechig.com/android/download-and-display-image-in-android-gridview

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();

Android custom ListView items (findViewById returns null)

I'm trying to populate custom ListView with this LazyAdapter class from this tutorial
I want to make list view items with custom design. Layout file list_row.xml is in my layouts file just like in the tutorial. This is a slightly modified getView function in LazyAdapter class:
public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
if(convertView==null)
//vi = inflater.inflate(R.layout.list_row, null); //EDITED
vi = inflater.inflate(R.layout.list_row, parent, false);
TextView title = (TextView)vi.findViewById(R.id.title); // title
TextView subtitle = (TextView)vi.findViewById(R.id.subtitle); // artist name
//ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image);
//This is not needed
//HashMap<String, String> post = new HashMap<String, String>();
HashMap<String, String> post;
post = data.get(position);
// Setting all values in listview
title.setText(post.get("title")); //the code crashes here
subtitle.setText(post.get("subtitle"));
//imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image);
return vi;
}
Well this code crashes at title.setText(), because the title is null. I read somewhere that this makes sense because this LazyAdapter is calling findViewById before setContentView or something..
So how do I have to do this? And how does this code work for that guy?
Update
This is the list_row.xml file:
<?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="#drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >
<!-- Title -->
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#040404"
android:typeface="sans"
android:textSize="14sp"
android:textStyle="bold"/>
<!-- Subtitle -->
<TextView
android:id="#+id/subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/subtitle"
android:textColor="#343434"
android:textSize="10sp"
android:layout_marginTop="1dip" />
</RelativeLayout>
To save space I'm only adding ListView xml from the main activity layout file:
<ListView
android:id="#+id/feedListView"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/volumeControl1">
</ListView>
Adapter code: http://pastebin.com/niC1yXiJ
And the stack trace: http://pastebin.com/myW8B0Xz

Try passing in the parent when you inflate your cell. Using this method:
public View inflate (int resource, ViewGroup root, boolean attachToRoot)
vi = inflater.inflate(R.layout.list_row, parent, false);

This was a hell of a ride (two sleepless nights). Thanks for all your help, somehow I fixed it! :)
Mostly thanks to this question Null pointer exception in getView() of custom Adapter I made new getView function:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = new ViewHolder();
View vi = convertView;
if (vi == null) {
LayoutInflater inflater = ((Activity)activity).getLayoutInflater();
vi = inflater.inflate(R.layout.list_row, null);
holder.title = (TextView) vi.findViewById(R.id.title);
holder.subtitle = (TextView) vi.findViewById(R.id.subtitle);
vi.setTag(holder);
} else {
holder = (ViewHolder) vi.getTag();
}
HashMap<String, String> post;
post = data.get(position);
holder.title.setText(post.get("title"));
holder.subtitle.setText(post.get("subtitle"));
return vi;
}
holder is just a simple class:
private class ViewHolder {
public TextView title;
public TextView subtitle;
}
I've done that and I also copied xml drawable files in all drawable folders (merged all). So one of this actions fixed it, but I'm not quite sure what..

If you get android.widget.AbsListView.obtainView(AbsListView.java:1408) exception than your returned View of getView() is probably null.So check first of all that you are not return null view.

Using customlistviews in android : Keep on getting list view = NULL

I am new to android and am trying to create two fragments and have it so you can slide between the two, one is a list and the otehr a grid. I had the list working when it when I was using an ArrayAdapter and had my EventListFragment extending ListFragment (if code is helpful let me know and ill post that part)
I am now trying to create a custom list view with multiline list items (let me know if there is an easier way and if i have simply overcomplicated the whole thing)
Here is my code:
Event List Fragment:
public class EventListFragment extends Fragment {
ArrayList<EventObject> eventObjects;
#Override
public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
eventObjects = ((EventsActivity)getActivity()).getEventObjects();
View view = inflater.inflate(R.layout.eventgrid ,container,false);
Listview listView = (ListView) view.findViewById(R.id.listView);
if (listView == null) {
System.out.println("asas");
}
listView.setAdapter(new MyCustomBaseAdapter(getActivity().getBaseContext(), eventObjects));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> a, View v, int position, long id) {
Object o = listView.getItemAtPosition(position);
EventObject fullObject = (EventObject)o;
System.out.println("asd");
}
});
return view;
}
}
The corresponding xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ListView
android:id="#+id/listView"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
</RelativeLayout>
The xml for the customgridrow:
<?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">
<TextView android:id="#+id/name"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#FFFF00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/cityState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
EDIT
The getView() from MyCustomBaseAdapter :
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.customgridrow, null);
holder = new ViewHolder();
holder.txtName = (TextView) convertView.findViewById(R.id.name);
holder.txtCityState = (TextView) convertView.findViewById(R.id.cityState);
holder.txtPhone = (TextView) convertView.findViewById(R.id.phone);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.txtName.setText(events.get(position).getName());
holder.txtCityState.setText(events.get(position).getDate());
holder.txtPhone.setText(events.get(position).getVenue());
return convertView;
}

From your comments
You are inflating the wrong layout
You should inflate the one that has listview and initialize the same.
Change
View view = inflater.inflate(R.layout.eventgrid ,container,false);
to
View view = inflater.inflate(R.layout.eventList ,container,false);

Every time you want to add an object to a list, you have to provide a view for the object. Android asks your list adapter, be it custom or system-defined, it asks the adapter what each list item is supposed to look like. This is where getView() comes into play.
public abstract View getView (int position, View convertView, ViewGroup parent):
Get a View that displays the data at the specified position in the data set.
If convertView is null, you will get an NPE.
Tutorials here: http://www.javacodegeeks.com/2013/06/android-listview-tutorial-and-basic-example.html

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