Hiding a Child item(ImageView) In ListView

Download Complete Android Studio Project by Clicking Here.

Important Things About Listview:

i. A List view Recycle it’s view. Meaning If your screen can only fit 5 items. But the total number of item you are about to display in listview is 100 .

ii. Android won’t load these 100 items into the listview when you set your adapter.

iii. Instead it first load the first five Items on the screen and when you scroll down , it fills the new data into the listview, Which improves performance and Memory.

ListView at First Load

Item 1

Item 2

Item 3

Item 4

Item 5

ListView When Scrolled

Item 3

Item 4

Item 5

Item 6

Item 7

Let’s say you scroll down to view Two more elements item 6 and 7. What happens here is the last two row will be updated with the new value item 6 and item 7..i.e handled by the adapter.

You have to sink this listview recycling mechanism, when you change the visibility of a child item. In order to do so you have to follow these two things.

i. you need to get the first visible position of a child in your listview and subtract it with position that you get from the listview.SetOnItemClickListener. And use the value that you get from subtracting both. for changing the item visibility.

Eg:

Int listposition=listview.getFirstVisiblePosition-position;

Listview.getchildAt(listposition).findViewById(R.id.item).setVisi bility(View.Gone).

ii. As the adapter loads data to listview, you have to check the child item visbibility inside your Adapter GetView method and set it’s visibility accordingly.

Let’s dive into the complete code:

1. 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"   
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
 <ListView  
     android:id="@+id/listview_for_layout"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:clickable="true"  
     android:listSelector="#FF009688"  
     android:background="#FFFFFF"  
     android:choiceMode="singleChoice"  
     android:scrollbars="vertical">  
 </ListView>  
 </RelativeLayout>

2. Layout_for_listview.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <ImageView  
     android:layout_width="wrap_content"  
     android:layout_alignParentLeft="true"  
     android:layout_alignParentStart="true"  
     android:paddingTop="10dp"  
     android:paddingLeft="10dp"  
     android:paddingRight="10dp"  
     android:paddingBottom="10dp"  
     android:visibility="invisible"  
     android:id="@+id/tick_mark"  
     android:src="@drawable/tick_mark"  
     android:layout_centerHorizontal="true"  
     android:layout_marginLeft="10dp"  
     android:layout_marginRight="10dp"  
     android:layout_height="wrap_content" />  
 <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:id="@+id/items"  
     android:layout_marginRight="10dp"  
     android:layout_marginEnd="10dp"  
     android:paddingBottom="10dp"  
     android:paddingRight="10dp"  
     android:paddingLeft="10dp"  
     android:paddingTop="10dp"  
     android:textAllCaps="true"  
     android:textAlignment="center"  
     android:layout_alignParentRight="true"  
     android:layout_alignParentEnd="true" />  
 </RelativeLayout>

3.MainActivity.Java:

 public class MainActivity extends AppCompatActivity {  
 public String[] itemValueArray={"item 1","item 2","item 3","item 4","item 5","item 6","item 7","item 8","item 9","item 10","item 11","item 12","item 13","item 14","item 15","item 16","item 17","item 18","item 19","item 20"};  
 static boolean[] tickMarkVisibileListPosition=new boolean[20];  
 //Allocating size for the Boolean set all element to Boolean.false by default. It is defined static, so that the same variable can be accessed from adapter class without creating object for MainActivity.Java.  
   public ListView listviewMain;  
   public int listPosition;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
   listviewMain=(ListView) findViewById(R.id.listview_for_layout);  
 listviewMain.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
       @Override  
  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
  listPosition = position - listviewMain.getFirstVisiblePosition();  
 if (listviewMain.getChildAt(listPosition).findViewById(R.id.tick_mark).getVisibility() == View.INVISIBLE)   
 {  
    listviewMain.getChildAt(listPosition).findViewById(R.id.tick_mark).setVisibility(View.VISIBLE);  
    tickMarkVisibileListPosition[position]=Boolean.TRUE;  
 }   
 else   
 {  
    listviewMain.getChildAt(listPosition).findViewById(R.id.tick_mark).setVisibility(View.INVISIBLE);  
     tickMarkVisibileListPosition[position]=Boolean.FALSE;  
 }  
   listviewMain.getChildAt(listPosition).setSelected(true);  
       }  
     });  
 CustomAdapterListview myadapter=new CustomAdapterListview(MainActivity.this,itemValueArray);  
 listviewMain.setAdapter(myadapter);  
   }

Note: tickMarkVisibileListPosition[position]=Boolean.True; In this particular line we are chaging the Boolean value of a array item to true. And this will be checked in Getview Method, to make the Imageview visible for a particular Child.

4.CustomAdapterListview.java:

 public class CustomAdapterListview extends BaseAdapter {  
 private String[] itemValues;  
 private LayoutInflater inflater;  
 public ViewHolder holder=null;  
 CustomAdapterListview(Context context,String[] values)  
   {  
     // this.tcontext=context;  
     this.itemValues=values;  
     this.inflater=LayoutInflater.from(context);  
 }  
  public int getCount() {  
     return itemValues.length;  
 }  
 @Override  
 public Object getItem(int position)  
 {  
    return position;  
 }  
 @Override  
 public long getItemId(int position)  
 {  
 return 0;  
 }  
 @Override  
 public View getView(int position, View convertView, ViewGroup parent)  
 {  
 if(convertView==null)  
 {  
       convertView=inflater.inflate(R.layout.layout_for_listview,null);  
       holder=new ViewHolder();  
       holder.tickMark=(ImageView) convertView.findViewById(R.id.tick_mark);  
       holder.itemDataView=(TextView)convertView.findViewById(R.id.items);  
       convertView.setTag(holder);  
     }  
     else  
 {  
       holder=(ViewHolder)convertView.getTag();  
     }  
 holder.itemDataView.setText(itemValues[position]);  
     if(MainActivity.tickMarkVisibileListPosition[position]==Boolean.TRUE)  
 /*Everytime adapter check whether the imageview at particular position have to be made visible or not.   
 */      
     {  
       holder.tickMark.setVisibility(View.VISIBLE);  
     }  
     else  
     {  
       holder.tickMark.setVisibility(View.INVISIBLE);  
     }  
     return convertView;  
     }  
     static class ViewHolder  
     {  
     TextView itemDataView;  
     ImageView tickMark;  
     }  
     }

That's how it's done.

My Android Blog

Search This Blog