Create CustomAdapter for listView with different row layouts - android

I want to add different rows to a ListView. In first row I want to show a textView. In second Two imageViews and third row Single textView. Then a list of text with icon. I know this is possible using custom CustomAdapter. But not understanding how to proceed.
My CustomAdapter :
public class CustomList extends ArrayAdapter<String>
{
private final Activity context;
private final String[] web;
private final Integer[] imageId;
public CustomList(Activity context,
String[] web, Integer[] imageId) {
super(context, R.layout.drawer_list_item, web);
this.context = context;
this.web = web;
this.imageId = imageId;
}
#Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.drawer_list_item, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
ImageView imageView = (ImageView) rowView.findViewById(R.id.drawer_imgIcom);
txtTitle.setText(web[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}

In your drawer_list_item xml file create all the elements you need, text, images etc, positioned as desired. Then in the getView() after the inflate, simple hide and show these elements as desired based on the position.
Remember to hide and show, because Android will re-use the views.
Also you should consider using a viewHolder as this will improve performance.

try this code in getview(),
#Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.drawer_list_item, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
ImageView imageView = (ImageView) rowView.findViewById(R.id.drawer_imgIcom);
ImageView imageView1 = (ImageView) rowView.findViewById(R.id.drawer_imgIcom1);
if(position == 0)
{
txtTitle.setText(web[position]);
imageView.setvisibility(View.GONE);
imageView1..setvisibility(View.GONE);
}
else if(Position == 1){
txtTitle.setText(web[position]);
imageView.setvisibility(View.Visible);
imageView1..setvisibility(View.Visible);
imageView.setImageResource(imageId[position]);
imageView1.setImageResource(imageId1[position]);
}else
{
txtTitle.setText(web[position]);
imageView.setvisibility(View.GONE);
imageView1..setvisibility(View.GONE);
}
return rowView;}
and then corresponding views use in your xml layouts.

First you need your custom view (this contains the Views that you need for your purpose)
example:
<?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/photo"
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#android:color/holo_blue_light"
android:contentDescription="#string/cd_pr_photo"
android:scaleType="centerCrop" />
<!--Invisible divider so we can put our views just in the
right place :) -->
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/photo" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/divider"
android:layout_margin="10dp"
android:text="#string/sample_title"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold|italic" />
<ImageButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/divider"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:background="#android:drawable/ic_menu_share"
android:contentDescription="#string/cd_the_sharebutton" />
</RelativeLayout>
Once you have decided your layout you extend ArrayAdapter in your CustomAdapterClass.
Example:
#Override
public View getView(int position, View v, ViewGroup parent) {
//In case we don't have an inflated view, inflate.
if (v == null) {
v = View.inflate(getContext(), R.layout.custom_puertorico_layout, null);
}
//The domain object with data.
PuertoRico p = getItem(position);
//Photo of Puerto Rico
final ImageView photo = (ImageView) v.findViewById(R.id.photo);
photo.setImageDrawable(p.getPicture());
//Given Title
TextView title = (TextView) v.findViewById(R.id.title);
title.setText(p.getTitle());
//Extra stuff...
ImageButton share = (ImageButton) v.findViewById(R.id.share);
return v;
}
This easy example and the full code can be found at https://github.com/JRSosa/PRPics
Hope it Helps.

Related

android - No Scrolling on Custom Spinner Items

I am creating a custom spinner in my application. The items are displaying perfectly, but the issue is, the list items are not getting scrolled.
Please refer the image below. In the image below, I am using plenty of countries but not being able to scroll for other country options.
This is my complete spinner code below:
main_activity.xml
<android.support.percent.PercentRelativeLayout
android:id="#+id/layoutSpinner"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_spinner_countrycode"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
app:layout_widthPercent="25%">
<Spinner
android:id="#+id/spCountryCode"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.percent.PercentRelativeLayout>
MainActivity.java:
Spinner spCountryCode = (Spinner) findViewById(R.id.spCountryCode);
CountryCodeAdapter countryCodeAdapter = new CountryCodeAdapter(LoginScreenActivity.this, modelList);
spCountryCode.setAdapter(countryCodeAdapter);
CountryCodeAdapter.java:
public class CountryCodeAdapter extends ArrayAdapter<CountryCodeModel> {
Activity activity;
List<CountryCodeModel> itemList;
LayoutInflater inflater;
public CountryCodeAdapter(Activity activity, List<CountryCodeModel> itemList) {
super(activity, R.layout.country_code_spinner_layout, itemList);
this.activity = activity;
this.itemList = itemList;
inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#NonNull
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = inflater.inflate(R.layout.country_code_spinner_layout, parent, false);
ImageView imgFlag = (ImageView) itemView.findViewById(R.id.imgFlag);
TextView lblCountryName = (TextView) itemView.findViewById(R.id.lblCountryName);
TextView lblCountryCode = (TextView) itemView.findViewById(R.id.lblCountryCode);
Picasso.with(activity).load(itemList.get(position).getStrCountryFlagUrl()).into(imgFlag);
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) imgFlag.getLayoutParams();
lp.addRule(RelativeLayout.CENTER_IN_PARENT);
imgFlag.setLayoutParams(lp);
//lblCountryName.setText(itemList.get(position).getStrCountryName());
lblCountryName.setVisibility(View.GONE);
//lblCountryCode.setText("(" + itemList.get(position).getStrCountryCode() + ")");
lblCountryCode.setVisibility(View.GONE);
return itemView;
}
#Override
public View getDropDownView(int position, #Nullable View convertView, #NonNull ViewGroup parent) {
View itemView = inflater.inflate(R.layout.country_code_spinner_layout, parent, false);
ImageView imgFlag = (ImageView) itemView.findViewById(R.id.imgFlag);
TextView lblCountryName = (TextView) itemView.findViewById(R.id.lblCountryName);
TextView lblCountryCode = (TextView) itemView.findViewById(R.id.lblCountryCode);
Picasso.with(activity).load(itemList.get(position).getStrCountryFlagUrl()).into(imgFlag);
lblCountryName.setText(itemList.get(position).getStrCountryName());
lblCountryCode.setText(itemList.get(position).getStrCountryCode());
return itemView;
}
}
Also, I have also tried, countryCodeAdapter.setDropDownViewResource(R.layout.country_code_spinner_layout);, just before spCountryCode.setAdapter(countryCodeAdapter);, but still no success.
Also, if you want to see my custom spinner layout, here is it.
country_code_spinner_layout.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="#dimen/countryCodeSpinnerDropDownHeight">
<ImageView
android:id="#+id/imgFlag"
android:layout_width="#dimen/countryCodeSpinnerImageSize"
android:layout_height="#dimen/countryCodeSpinnerImageSize"
android:layout_marginLeft="#dimen/countryCodeSpinnerMarginLeft"
android:layout_centerVertical="true"/>
<com.base.silpre.Font_TextViewOpenSans_SemiBold
android:id="#+id/lblCountryName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgFlag"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/countryCodeSpinnerMarginLeft"
android:textSize="#dimen/countryCodeSpinnerTextsSize"
android:textColor="#android:color/black"/>
<com.base.silpre.Font_TextViewOpenSans_Italic
android:id="#+id/lblCountryCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/lblCountryName"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/countryCodeSpinnerMarginLeft"
android:textSize="#dimen/countryCodeSpinnerTextsSize"
android:textColor="#android:color/black"/>
</RelativeLayout>
Please revert back if anyone has a solution for scrolling the custom spinner.
Try wrap_content for height
`< Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>`

How to implement list view with two parallel imageview in a row

Well I do not know what should be the proper title for the question , but my problem is quite amazing, do not know is it possible or not. Here is my question
I have series of images and I want to set them in a ListView. following is a ListView row Xml.(named anim_list_row)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
>
<ImageView
android:layout_width="0dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:id="#+id/iv_dummy_left"
android:layout_marginLeft="5dp"
android:layout_weight="50"/>
<ImageView
android:layout_width="0dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:id="#+id/iv_dummy_right"
android:layout_weight="50"
android:layout_marginRight="5dp"/>
</LinearLayout>
in this you can see that I want to set the 2 different images in two different let say left and right ImageView. Following is my adapter class
public class MListAdapter extends BaseAdapter {
private Context context;
private ArrayList<AnimListItems> mAnimListItems;
public MListAdapter(Context context, ArrayList<AnimListItems> mAnimListItems){
this.context = context;
this.mAnimListItems = mAnimListItems;
}
#Override
public int getCount() {
return mAnimListItems.size();
}
#Override
public Object getItem(int position) {
return navDrawerItems.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater)
context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.anim_list_row, null);
}
ImageView imgIconLeft = (ImageView) convertView.findViewById(R.id.iv_dummy_left);
ImageView imgIconRight = (ImageView) convertView.findViewById(R.id.iv_dummy_right);
//TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
imgIconLeft.setImageResource(navDrawerItems.get(position).getIcon());
//if I do not do +1 here it sets same image to both left and right ImageView
imgIconRight.setImageResource(navDrawerItems.get(position+1).getIcon());
// txtTitle.setText(navDrawerItems.get(position).getTitle());
return convertView;
}
}
so here is problem this list view is working but it is assigning the same images to both ImageView in the row. and if I do +1 as following
imgIconRight.setImageResource(navDrawerItems.get(position+1).getIcon())
then it helps in changing the image view at right side in the row, but the 2nd row repeat the image in its first imageview (I mean the image in the left ImageView of the 2nd row is same as the image in right ImageView of first row.)
So what is a solution of
Repeating images in a rows.
And How can I get each ImageView id and its resourceid of the image so that I can come to know which image has been clicked. And then I can able to set that image into another activity's ImageView. I mean I wanted to know which image has been clicked by the user , so I want to set same image in the ImageView of other activity.
Hello If you want to user one single array then i have made one demo example for your problem quickly i think it will help you.
MainActivity.java
public class MainActivity extends ActionBarActivity {
Item item;
ArrayList<Object> obj = new ArrayList<Object>();
MListAdapter adapter;
ListView lv;
int[] arrEnabledImageIds = new int[] { R.drawable.ic_launcher,
R.drawable.ic_delete_icon, R.drawable.ic_delete_icon,
R.drawable.ic_launcher, R.drawable.ic_delete_icon,
R.drawable.ic_launcher };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.listView1);
for (int i = 0; i < arrEnabledImageIds.length; i++) {
Item itemInfo = new Item();
itemInfo.image1 = arrEnabledImageIds[i];
i++;
itemInfo.image2 = arrEnabledImageIds[i];
obj.add(itemInfo);
}
adapter = new MListAdapter(this, R.layout.row, obj);
lv.setAdapter(adapter);
}
}
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Item.java
public class Item implements Serializable {
public static final long serialVersionUID = 1L;
public int image1;
public int image2;
}
row.xml
<?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="horizontal" >
<ImageView
android:id="#+id/ivLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ivRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
MListAdapter.java
public class MListAdapter extends ArrayAdapter<Object> {
private Context context;
int resId;
private ArrayList<Object> mAnimListItems;
public MListAdapter(Context context, int textViewResourceId,
ArrayList<Object> mAnimListItems) {
super(context, textViewResourceId, mAnimListItems);
this.resId = textViewResourceId;
this.context = context;
this.mAnimListItems = mAnimListItems;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(resId, null);
}
ImageView imgIconLeft = (ImageView) convertView
.findViewById(R.id.ivLeft);
ImageView imgIconRight = (ImageView) convertView
.findViewById(R.id.ivRight);
// TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
Item item = (Item) mAnimListItems.get(position);
imgIconLeft.setImageResource(item.image1);
// if I do not do +1 here it sets same image to both left and right
// ImageView
imgIconRight.setImageResource(item.image2);
// txtTitle.setText(navDrawerItems.get(position).getTitle());
return convertView;
}
}
try to use two different array/arraylist to store left and rightside images seprately.
settag as l+position for left image
settag as r+position for right image
you can identify the clicked image by
imgIconLeft.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if(v.getTag.toString().contains("l"){
// then it's a left button.
String position=v.getTag.toString().subString(1,v.getTag.toString().length()-1);
// to get position
}
});

findViewByID returning null on BaseAdapter

I started using fragments to develop a new app, one of the fragments is a ListFragment,
when I use the adapter I made to show the list's rows I get some null from some findViewById that I use on the getView() method.
The structure is:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fragment_container">
</FrameLayout>
</RelativeLayout>
frag_detail.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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/list"
android:layout_gravity="center"/>
</LinearLayout>
detail_list_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"
android:id="#+id/detailItemLayout" >
<ImageButton
android:layout_width="64dp"
android:layout_height="64dp"
android:id="#+id/imgIcon"
android:layout_below="#+id/txtTitle"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="txtTitle"
android:id="#+id/txtTitle"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="label1"
android:id="#+id/label1"
android:layout_below="#+id/imgIcon"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
DetailFragment class
public class DetailFragment extends ListFragment {
private Context context;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.frag_detail,container,false);
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
MonsterDataSource ds = new MonsterDataSource(context);
List<Monster> lsMonster = ds.getAllMonsters();
//ListView lsView = (ListView)this.getActivity().findViewById(R.id.lsDetail);
MonsterListAdapter adapter = new MonsterListAdapter(context,lsMonster);
//lsView.setAdapter(adapter);
setListAdapter(adapter);
}
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
context = activity.getApplicationContext();
}
}
And the MonsterListAdapter class
public class MonsterListAdapter extends BaseAdapter {
static class ViewHolder {
private TextView txtTitle;
private ImageView imgIcon;
private TextView txtHealth;
}
private Context context;
private LayoutInflater inflater;
private List<Monster> data;
private ViewHolder holder;
public MonsterListAdapter(Context c, List<Monster> data){
context = c;
this.data = data;
inflater = (LayoutInflater)c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
/*Basic BaseAdapter Methods*/
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
if (view == null) {
view = inflater.inflate(R.layout.menu_list_item, null);
holder = new ViewHolder();
/*Those Guys get null*/
RelativeLayout layout = (RelativeLayout)view.findViewById(R.id.detailItemLayout);
holder.txtTitle = (TextView) view.findViewById(R.id.txtTitle);
holder.imgIcon = (ImageView) view.findViewById(R.id.imgIcon);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
Monster monster = data.get(i);
holder.txtTitle.setText(monster.name);
holder.imgIcon.setImageResource(monster.imgResID);
holder.txtHealth.setText(monster.health);
return view;
}
}
In case anyone asking, I'm trying to retrieve the relative layout to add some controls dynamically after.
Thanks
You posted the XML for detail_list_item.xml but in your code you inflate menu_list_item.xml.
detail_list_item.xml contains all of the IDs you are trying to find so it appears you have accidentally inflated the wrong View in getView
Additionally, you should remove your ViewHolder as a member variable and place it as a local variable in the getView method. You are reusing that variable for multiple views at the same time which means you have the potential for modifying the wrong views at different positions (data going to the wrong positions, etc).
public View getView(int i, View view, ViewGroup viewGroup) {
ViewHolder holder;
...
...//all of your other code here
}
Try without affecting "view"
RelativeLayout layout = (RelativeLayout)findViewById(R.id.detailItemLayout);
holder.txtTitle = (TextView) findViewById(R.id.txtTitle);
holder.imgIcon = (ImageView) findViewById(R.id.imgIcon);
Edit This works for me... My texviews nbCommentaires and Comment give NullPointerException if i inflate View to them... I thought you get the same issue...
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.comment_row, null);
}
v.setTag(position);
Commentaires o = Global_reco.CommRecos.get(position);
if (o != null) {
TextView nom = (TextView) v.findViewById(R.id.nom_com);
TextView com = (TextView) v.findViewById(R.id.com);
ImageView photo = (ImageView) v.findViewById(R.id.profile_com);
TextView nbCommentaires = (TextView) findViewById(R.id.nb_commentaires);
TextView Comment = (TextView)findViewById(R.id.nbre_comment);
photo.setTag(position);

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;
}

android grid view display caption below each grid

I want to display some text below each grid image.
Please see my code below.
Please help me in finding why its not working
I am getting the images properly displayed but no text
if i try to display text within image its coming
so it should be something with the layout defined. but i am not able to debug
adaptor code :
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.griditems, null);
holder = new ViewHolder();
holder.text1 = (TextView) convertView
.findViewById(R.id.grid_item_text);
Log.i(TAG, holder.text1.toString());
holder.image = (ImageView) convertView
.findViewById(R.id.grid_item_image);
// if it's not recycled, initialize some attributes
holder.image.setImageResource(gridItemIds[position]);
holder.text1.setText(gridTitles[position]);
//holder.image.setScaleType(ImageView.ScaleType.FIT_XY);
// holder.image.setPadding(20, 20, 20, 20);
convertView.setLayoutParams(new GridView.LayoutParams(Utils
.getLayoutParameter(), Utils.getLayoutParameter()));
holder.image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
}
});
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
return convertView;
}
static class ViewHolder {
TextView text1;
ImageView image;
}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/GridItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<ImageView android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<TextView android:id="#+id/grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#000000"
>
</TextView>
</LinearLayout>
gridview :
<?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/text1view" android:textStyle="bold"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="center_horizontal" android:background="#drawable/title_bar"
/>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:verticalSpacing="50dip"
android:horizontalSpacing="10dp" android:numColumns="3"
android:stretchMode="columnWidth"
android:layout_below="#+id/text1view"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="#drawable/home_bg"
/>
</LinearLayout>
I used your xml but with a simple array adapter that I wrote and everything work perfectly, try to replace your adapter with mine and let me know, thanks.
class ItemsAdapter extends ArrayAdapter<String> {
public ItemsAdapter(Context context, List<String> list) {
super(context, R.layout.griditems, list);
}
#Override
public View getView(final int position, View row, final ViewGroup parent) {
final String item = getItem(position);
ItemWrapper wrapper = null;
if (row == null) {
row = getLayoutInflater().inflate(R.layout.griditems, parent, false);
wrapper = new ItemWrapper(row);
row.setTag(wrapper);
} else {
wrapper = (ItemWrapper) row.getTag();
}
wrapper.refreshData(item);
return row;
}
}
static class ItemWrapper {
TextView text;
ImageView img;
public ItemWrapper(View row) {
text = (TextView) row.findViewById(R.id.grid_item_text);
img = (ImageView) row.findViewById(R.id.grid_item_image);
}
public void refreshData(String item) {
img.setImageResource(R.drawable.image_1);
text.setText(item);
}
}
Also try using RelativeLayout too, placing the TextView underneath the ImageView by using
android:layout_below="#id/grid_item_image"
It'll place it underneath the image, however, if you have the option to use the Graphical Layout, dragging it where you want it in conjunction with the image will set all the parameters for you instead of typing them out.

Categories

Resources