Develop Reference

Show textview on top of GridView for every n Imageviews like Gallery timeline

I am trying to build a layout as shown in the image where the Date(TextView) is shown above the images in GridView and the TextView appears multiple times in view .I am confused on how to implement it. I tried putting TextView in list item but in that case TextView is repeating for each row. Can anyone suggest how to go with this.Reference image attached.
main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvTimeline"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</LinearLayout>
list_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rlText">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:text="28 Feb"
android:layout_marginLeft="16dp"
android:layout_alignParentLeft="true"
android:id="#+id/tvDate"/>
</RelativeLayout>
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gvTest"
android:numColumns="3"
android:verticalSpacing="3dp">
</GridView>
gridview_item.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="116dp"
android:layout_height="116dp"
android:scaleType="fitXY"
android:id="#+id/ivTimeline"
android:src="#android:drawable/sym_def_app_icon"/>
List adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
ViewHolder holder;
if (view == null) {
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.list_item, parent, false);
holder = new ViewHolder();
holder.tvDate = (TextView) view.findViewById(R.id.tvDate);
holder.gvTimeline = (GridView) convertView
.findViewById(R.id.gvTest);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
holder.gvTimeline.setAdapter(new GridAdapter(imagesList));
return view;
}
public static class ViewHolder {
TextView tvDate;
GridView gvTimeline;
}
GridView Adapter :
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
ViewHolder holder;
if (view == null) {
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.gridview_item, parent, false);
holder = new ViewHolder();
holder.ivImage = (ImageView) view.findViewById(R.id.ivTimeline);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
holder.ivImage.setImageResource(getItem(position));
return view;
}
public static class ViewHolder {
ImageView ivImage;
}
Image which I am getting now :

OnPause method for GridView ListActivity - Android

There is a bit of a pattern used when displaying a ListView or GridView. Given the XML file and my first method shown, what will my corresponding second method be? How it is now, I am getting an exception that a RelativeLayout cannot be cast to an ImageView at this line of the second method shown: ImageView v = (ImageView) gridView.getChildAt(i); I know my gridView is a bunch of relativeLayouts but not sure how to access their drawables.
Here is myLayout.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="match_parent" >
<ImageView
android:id="#+id/icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:padding="8dp"
android:scaleType="fitCenter" />
</RelativeLayout>
ImageAdapter.getView()
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
ImageHelper ih = new ImageHelper();
if (convertView == null) {
convertView = mInflater.inflate(R.layout.mylayout, null);
holder = new ViewHolder();
holder.icon = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.icon.setImageBitmap(ih.decodeSampledBitmapFromImagePath(mList.get(position), 150, 150));
return convertView;
}
ViewGridView.OnPause()
#Override
protected void onPause() {
GridView gridView = (GridView) findViewById(R.id.gridviewViewOutfits);
int count = gridView.getCount();
for (int i = 0; i < count; i++) {
ImageView v = (ImageView) gridView.getChildAt(i);
if (v != null) {
if (v.getDrawable() != null) v.getDrawable().setCallback(null);
}
}
super.onPause();
}
Thanks

Try this
ImageView v = (ImageView)((ViewGroup)gridView.getChildAt(i)).getChildAt(0);

Why is my adapter's getView() executing infinite times?

In my app I have a GridView inside ViewPager.
I am not using anywhere match_parent or wrap_content. I am using values like 200dp or 150dp. So why is my getView() of GridView adapter is calling multiple times?
I searched a lot like here,
here, here, and here.
This is my adapter class.
public class CustomGridViewAdapter1 extends BaseAdapter {
ArrayList<Integer> list2 = new ArrayList<Integer>();
private LayoutInflater mInflater;
public CustomGridViewAdapter1(Context context, ArrayList<Integer> list2) {
mInflater = LayoutInflater
.from(context.getApplicationContext());
this.list2 = list2;
}
#Override
public int getCount() {
return 6;
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
try {
View hView = convertView;
if (convertView == null) {
hView = mInflater.inflate(R.layout.greeditem, null);
ViewHolder1 holder = new ViewHolder1();
holder.song_pic = (ImageView) hView.findViewById(R.id.pic1);
holder.name = (TextView) hView
.findViewById(R.id.tabletext1);
holder.layout = (LinearLayout) hView
.findViewById(R.id.bingo_rlayout1);
hView.setTag(holder);
}
ViewHolder1 holder = (ViewHolder1) hView.getTag();
imageLoader.DisplayImage(list1.get(position), holder.song_pic);
holder.name.setText(list.get(position));
if (list2.get(position) == 1) {
holder.layout.setBackgroundColor(getActivity()
.getResources().getColor(R.color.lightblue));
holder.name.setTextColor(getActivity().getResources().getColor(R.color.white));
}
return hView;
}
catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
And this is my XML 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" >
<GridView
android:id="#+id/gridView1"
android:layout_width="320dp"
android:layout_height="250dp"
android:layout_below="#+id/ticketText"
android:numColumns="2"
android:background="#fff"
android:listSelector="#android:color/white">
</GridView>
<TextView
android:id="#+id/scoreId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/ticketText"
android:layout_alignBottom="#+id/ticketText"
android:layout_alignParentRight="true"
android:layout_marginRight="32dp"
android:text="Score 1/6"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:id="#+id/ticketText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tablayout"
android:layout_marginLeft="16dp"
android:text="My Ticket #1"
android:textColor="#000000"
android:textSize="16sp" />
</RelativeLayout>

We need to check the null condition in getView(). Try with below code:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolderItem viewHolder;
/*
* The convertView argument is essentially a "ScrapView" as described is Lucas post
* http://lucasr.org/2012/04/05/performance-tips-for-androids-listview/
* It will have a non-null value when ListView is asking you recycle the row layout.
* So, when convertView is not null, you should simply update its contents instead of inflating a new row layout.
*/
if(convertView==null){
// inflate the layout
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
convertView = inflater.inflate(layoutResourceId, parent, false);
// well set up the ViewHolder
viewHolder = new ViewHolderItem();
viewHolder.textViewItem = (TextView) convertView.findViewById(R.id.textViewItem);
// store the holder with the view.
convertView.setTag(viewHolder);
}else{
// we've just avoided calling findViewById() on resource everytime
// just use the viewHolder
viewHolder = (ViewHolderItem) convertView.getTag();
}
// object item based on the position
ObjectItem objectItem = data[position];
// assign values if the object is not null
if(objectItem != null) {
// get the TextView from the ViewHolder and then set the text (item name) and tag (item ID) values
viewHolder.textViewItem.setText(objectItem.itemName);
viewHolder.textViewItem.setTag(objectItem.itemId);
}
return convertView;
}

What is wrong with LayoutInflator.Inflate method in the following code?

When the statement convertView = mInflater.inflate(R.layout.listitem_course, null); execute in the following overridden method of BaseAdapter the app stops. I dont know why.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Log.i(StudyManagerDataSource.LOG_TAG,
"CourseListAdapter -> getView called!");
if (convertView == null) {
Log.i(StudyManagerDataSource.LOG_TAG,
"CourseListAdapter -> Convet view is null called 1!");
convertView = mInflater.inflate(R.layout.listitem_course, null);
mViewHolder = new ViewHolder();
mViewHolder.courseNameTextView = (TextView) convertView
.findViewById(R.id.courseNameTextView);
convertView.setTag(mViewHolder);
} else {
mViewHolder = (ViewHolder) convertView.getTag();
}
Course mCourse = mCourses.get(position);
mViewHolder.courseNameTextView.setText(mCourse.getCourseName());
Log.i(StudyManagerDataSource.LOG_TAG,
"CourseListAdapter -> getView executed!");
return convertView;
}
The code for listitem_course is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/courseNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
</LinearLayout>

You should use this to inflate your item:
mInflater.inflate(R.layout.listitem_course, parent, false);
EDIT:
The parent is the ViewGroup in which your inflated view will be inserted, in your case, the parent argument from the getView() method..

gridview with image and text android

I successfully created a gridview populated with images. Now, what I want to do is put a text below the image.
This is the screenshot of my app so far.
http://i203.photobucket.com/albums/aa266/paulocarabuena_bucket/screen-2.png
Here is my getView method in my imageadapter class..
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(this.context);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(this.thumbs[position]);
return imageView;
}
Here is the onCreate method of my main activity
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.launchFullScreen();
this.setContentView(R.layout.main);
this.grids = (GridView) this.findViewById(R.id.elements);
ImageAdapter adapter = new ImageAdapter(this);
this.grids.setAdapter(adapter);
this.grids.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
}
});
}
Thanks in advance. :)

Instead of Directly using Image View , you should inflate a view as below :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget44"android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_x="201px"
android:layout_y="165px"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:gravity="center_horizontal"
android:textColorHighlight="#656565">
</TextView>
</LinearLayout>
And your Adapter should be like this :
public class ImageAdapter extends BaseAdapter{
Context mContext;
public static final int ACTIVITY_CREATE = 10;
public ImageAdapter(Context c){
mContext = c;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return 5;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View v;
if(convertView==null){
LayoutInflater li = getLayoutInflater();
v = li.inflate(R.layout.icon, null);
TextView tv = (TextView)v.findViewById(R.id.icon_text);
tv.setText("Profile "+position);
ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
iv.setImageResource(R.drawable.icon);
}
else
{
v = convertView;
}
return v;
}
}

You can do it using an XML, that defines the GridView cell:
image.xml
<?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:orientation="vertical"
android:gravity="center_horizontal"
>
<ImageView
android:id="#+id/image"
android:layout_marginBottom = "10dp"
android:src="#drawable/cell_sfondo"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
Then in your getView():
if(convertView == null) {
view = inflater.inflate(R.layout.image, null);
}
else
view = convertView;
ImageView image = (ImageView)view.findViewById(R.id.image);
image.setImageResource(this.thumbs[position]);

Paresh Mayani have a really good and simple example. This helped me a lot.
http://www.technotalkative.com/android-gridview-example/

You can create a layout for your image and text in each cell of the grid layout. And I suggest inflating the layout from an xml. You can try to do something like this:
//Use a viewHolder to optimize the list
ViewHolder holder = null;
if (convertView == null) {
//Create a new view holder to optimize the loading of elements in list
holder = new ViewHolder();
convertView = LayoutInflater.from(this.context).inflate(R.layout.my_custom_xml,null) ;
holder.imageView = (ImageView)convertView.findViewByID(R.id.my_image_view);
holder.textView = (TextView)convertView.findViewByID(R.id.my_text_view);
convertView.setTag(holder);
} else {
holder = (ViewHolder)convertView.getTag();
}
//Bind data to the row
//Set the position in holder
holder.position = position;
//Set the image for each row
holder.imageView ...
//Set the text for each row
holder.textView.setText()...
//And the viewholder looks like this
private class ViewHolder{
//The position of this row in list
private int position;
//The image view for each row
private ImageView imageView;
//The textView for each row
private TextView textView;
}
And now you can simply create my_custom_xml which contain the text and image view:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width= "fill_parent"
android:layout_height = "wrap_content"
android:orientation= "vertical">
<ImageView
android:id = "#+id/my_image_view"
android:layout_width = ....
android:layout_height = ...
/>
<TextView
android:id = "#+id/my_text_view"
android:layout_width = ....
android:layout_height = ....
/>
</LinearLayout>

Instead of taking dynamic imageview,you can inflate layout having textview under imageview in adapter as:
if(convertView==null){
inflater=(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
holder=new Holder();
convertView=inflater.inflate(R.layout.gridinflater, null);
holder.imageView=(ImageView) convertView.findViewById(R.id.img);
holder.textView=(TextView) convertView.findViewById(R.id.txt);
convertView.setTag(holder);
}
else {
holder = (Holder) convertView.getTag();
}
where gridInflater is layout having textview under imageview in Relative Layout as parent.
public static class Holder {
public ImageViewProgress imageView;
public TextView textView;
}