Making dynamic layout for each row in ListView in android

Question

I have a xml file which contains basic layout for each row of ListView(which is a realtive layout and has TextView inside it).

I want to change the attributes of this layout for each row of ListView like different layout width and height of each row. I want to set the values of width and height dynamically.

Is there any way around to do this?

My xml file which I want to change, height and weight dynamically, for each view

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:id="@+id/item1"
    android:layout_width="wrap_content">
    <TextView
        android:id="@+id/text"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="text"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:textColor="#FF200010"
        android:background="#FFFCCCFF" />
</LinearLayout> 

And my full file is

package com.test.list;

import java.util.ArrayList;
import java.util.TreeSet;

import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;


public class MultipleItemsList extends ListActivity {

    private MyCustomAdapter mAdapter;

    public Context context =getApplicationContext();


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mAdapter = new MyCustomAdapter();
        for (int i = 1; i < 50; i++) {
            mAdapter.addItem("item " + i);
            if (i % 4 == 0) {
                mAdapter.addSeparatorItem("separator " + i);
            }
        }
        setListAdapter(mAdapter);
    }

    private class MyCustomAdapter extends BaseAdapter {

        private static final int TYPE_ITEM = 0;
        private static final int TYPE_SEPARATOR = 1;
        private static final int TYPE_MAX_COUNT = TYPE_SEPARATOR + 1;

        private ArrayList<String> mData = new ArrayList<String>();
        private LayoutInflater mInflater;

        private TreeSet<Integer> mSeparatorsSet = new TreeSet<Integer>();

        public MyCustomAdapter() {
            mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        public void addItem(final String item) {
            mData.add(item);
            notifyDataSetChanged();
        }

        public void addSeparatorItem(final String item) {
            mData.add(item);
            // save separator position
            mSeparatorsSet.add(mData.size() - 1);
            notifyDataSetChanged();
        }

        @Override
        public int getItemViewType(int position) {
            return mSeparatorsSet.contains(position) ? TYPE_SEPARATOR : TYPE_ITEM;
        }

        @Override
        public int getViewTypeCount() {
            return TYPE_MAX_COUNT;
        }

        @Override
        public int getCount() {
            return mData.size();
        }

        @Override
        public String getItem(int position) {
            return mData.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder = null;
            int type = getItemViewType(position);
            System.out.println("getView " + position + " " + convertView + " type = " + type);
            if (convertView == null) {
                holder = new ViewHolder();
                switch (type) {
                    case TYPE_ITEM:
                            convertView = mInflater.inflate(R.layout.item1,null);
                            Log.e("Ronak", "Here1");
                            TextView t= (TextView)convertView.findViewById(R.id.text);
                            t.setWidth(100);
                            t.setHeight(600);
                            t.setText("This is first type of view");
                            holder.textView = (TextView)convertView.findViewById(R.id.text);
                            Log.e("Ronak","reached here3");
                            break;
                    case TYPE_SEPARATOR:

                          convertView = mInflater.inflate(R.layout.item1, null);
                          TextView t2= (TextView)convertView.findViewById(R.id.text);
                            t2.setWidth(200);
                            t2.setHeight(500);
                            t2.setText("This is second type of view");
                          holder.textView = (TextView)convertView.findViewById(R.id.text);
                          break;
                }
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder)convertView.getTag();
            }
            holder.textView.setText(mData.get(position));
            return convertView;
        }

    }

    public static class ViewHolder {
        public TextView textView;
    }

}

Answer 1

Making dynamic layout for each row in ListView in android

Maybe @Arkde's answer could work but i i think it's little dirty solution.

What about to create one generic layout and update / change appearance due to provided conditions? (for example due to value in current row).

different layout width and height of each row

This can by easily achieved by an usage of "margins". By "margins" i think a creation of empty Views which will work as "margins" and will determine height of row for instance. And then due to mentioned condition(s) showing or hiding them¹.

What are advantages of generic layout?

• Easier, efficient and more human-readable solution
• You don't need to implement ViewType and ViewCount for Adapter
• One layout for each row with changeable appearance
• You don't need to change UI appearance from application logic in "hardcoded" way

¹ When visibility of View is assigned to View.GONE it won't take place in layout whereas View.VISIBLE takes place.

Example of "margin":

<LinearLayout>
   ...
   <View 
      android:id="@+id/upperMargin"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="@android:color/transparent"
   />

   ...

   <View 
      android:id="@+id/lowerMargin"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="@android:color/transparent"
   />
   ...
</LinearLayout>

Note: Suggested an usage of ViewHolder is very neat and effective approach if you want to increase perfomance of ListView.

I hope that my solution will help to solve your problem you're facing now.

Answer 2

You can implement a ViewHolder pattern for your adapter, and for each position, inflate your own layout.

To do that, override getView like this:

public View getView(int position, View convertView, ViewGroup parent) {            

   // A ViewHolder keeps references to children views to avoid unneccessary calls            
  // to findViewById() on each row.            
  ViewHolder holder;            
  // When convertView is not null, we can reuse it directly, there is no need            
  // to reinflate it. We only inflate a new View when the convertView supplied            
  // by ListView is null.            

  if (convertView == null) {                

    convertView = mInflater.inflate(R.layout.sample, null);   
    // Creates a ViewHolder and store references to the two children views                
    // we want to bind data to.               
   holder = new ViewHolder();                
   holder.name = (TextView) convertView.findViewById(R.id.text);               
   holder.icon = (ImageView) convertView.findViewById(R.id.icon);                
   convertView.setTag(holder);            
 } else {                
   // Get the ViewHolder back to get fast access to the TextView                
   // and the ImageView.
   holder = (ViewHolder) convertView.getTag();
 }             


  // Bind the data efficiently with the holder. 
  holder.name.setText(myElements.get(id)); 
  holder.icon.setImageBitmap( mIcon1 );

return convertView;
}  

Read more about this on the Android developer site here

EDIT:

To change the width and height of each row, you can use something like the following, for each row on bind data section :

RelativeLayout rl = (RelativeLayout) findViewById(R.id.yourId); 
rl.getLayoutParams().height = 100;
rl.getLayoutParams().width = 100;`