How to Change Text Color, Size and Font in a Dynamically Created ListView

Question

I am trying to make a to-do list using an EditText and a ListView. How can I change the text font, color and size? I have seen a couple answers using array adapters, but don't know how to apply them to dynamically created ListView items.

Here is what I have so far:

ActivityMain.xml

    <RelativeLayout
    android:id="@+id/AgendaRL"
    android:orientation="vertical"
    android:background="#3E2723"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/agenda"
        android:layout_width="370sp"
        android:layout_height="wrap_content"
        android:text="@string/agenda"
        android:textSize="40sp"
        android:textColor="#b7950b"
        android:layout_marginTop="12sp"
        android:layout_marginLeft="12sp"
        android:layout_marginStart="12sp"
        android:layout_marginBottom="0sp" />

    <View
        android:background="#b7950b"
        android:layout_below="@+id/agenda"
        android:layout_width="28sp"
        android:layout_height="36sp"/>

    <EditText
        android:id="@+id/aTask"
        android:layout_below="@+id/agenda"
        android:background="@drawable/ribbon"
        android:inputType="text"
        android:text="@string/Add_Task"
        android:textColor="#3E2723"
        android:maxLength="22"
        android:maxLines="1"
        android:layout_width="330sp"
        android:layout_height="36sp"
        android:textSize="28sp"
        android:layout_marginLeft="28sp"
        android:layout_marginStart="28sp"/>

    <Button
        android:id="@+id/Done"
        style="?android:attr/borderlessButtonStyle"
        android:layout_marginLeft="250sp"
        android:layout_marginStart="250sp"
        android:background="#b7950b"
        android:text="@string/Done"
        android:textColor="#3E2723"
        android:textSize="18sp"
        android:layout_below="@+id/agenda"
        android:layout_width="48sp"
        android:layout_height="36sp"
        android:onClick="DoneClick"/>

    <ListView
        android:id="@+id/LVAgenda"
        android:layout_below="@+id/aTask"
        android:divider="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

MainActivity.Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
       ListView LVAgenda = (ListView) findViewById(R.id.LVAgenda);
    arrayListAgenda = new ArrayList<String>();
    arrayAdapterAgenda = new ArrayAdapter<String>(this,      android.R.layout.simple_list_item_1, arrayListAgenda);
    LVAgenda.setAdapter(arrayAdapterAgenda);
}

public void DoneClick(View v){
    EditText aTask = (EditText)findViewById(R.id.aTask);
    String agenda = aTask.getText().toString().trim();

    if(agenda.isEmpty()){
        return;
    }

    arrayAdapterAgenda.add(agenda);
    aTask.setText("Add task");


}

Answer 1

As commonsware said you can use getView() of ArrayAdapter to do this.

I have implemented Facebook friend selector with ListAdapter. I will share the code. May be it helps. Please try.

First make a XML file in layout that defines the layout of each item of your 'to do list'. In my case it is a facebook profile image and a checked textbox. (There is also a spacer for alignment)

Facebook.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="wrap_content"
    android:orientation="vertical">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:paddingLeft="10dp"/>

        <CheckedTextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|right"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:checkMark="?android:attr/listChoiceIndicatorMultiple"
            android:textColor="@android:color/black"
            android:textStyle="bold" />

    </LinearLayout>
    <View
        android:id="@+id/spacer"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/white"/>
</LinearLayout>

Now prepare your data array. In my case it is custom class array where each element contains a facebook name, profilepic, and a boolean.

public class Item{
        public final String text;
        public final Drawable icon;
        public boolean isChecked;
        public Item(String text, Drawable icon, boolean ischeck) {
            this.text = text;
            this.icon = icon;
            this.isChecked = ischeck;
        }
        @Override
        public String toString() {
            return text;
        }
    }

I call the below code by passing friendsArray from another activity.

final Item[] items =   new Item[friendsArray.length];
    try {
        int a = 1;

        for (int i = 0; i < friendsArray.length; i++) {
            tsk = new DownloadImageTask();
            Bitmap bmp = (Bitmap) tsk.execute(new RaceActivity.FriendInfo[]{friendsArray[i]}).get();
            Resources res = getActivity().getResources();
            drawable = new BitmapDrawable(res, bmp);
            items[i] = new Item(friendsArray[i].name, drawable,false);
        }
    }
    catch(Exception ex)
    {
    }

Now your data array is prepared. You can pass this to ListAdapter(items in my case).

Its nice to understand the working of a List adapter. I created a scrollable List. What this logic does is it reuses the Views while scrolling.

 ListAdapter adapter = new ArrayAdapter<Item>(
                getActivity(),
                android.R.layout.select_dialog_item,
                android.R.id.text1,
                items){
            public View getView(int position, View convertView, ViewGroup parent) {
                View v = convertView;
                FaceBookHolder fb = new FaceBookHolder();
                if(convertView == null)
                {
                    LayoutInflater inflater = (LayoutInflater) getActivity().getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    v = inflater.inflate(R.layout.facebook,null);
                    fb.Name = (CheckedTextView) v.findViewById(R.id.name);
                    fb.img = (ImageView) v.findViewById(R.id.img);
                    fb.spacer = (View) v.findViewById(R.id.spacer);
                    fb.Name.setOnClickListener(new View.OnClickListener()
                    {
                        @Override
                        public void onClick(View v)
                        {
                            CheckedTextView cv = (CheckedTextView)v;
                            if(cv.isChecked())
                                cv.setChecked(false);
                            else
                                cv.setChecked(true);
                            for(int i =0;i< items.length; i++)
                            {
                                if(items[i].text == cv.getText())
                                {
                                     items[i].isChecked = cv.isChecked();
                                }
                            }
                        }
                    });
                    v.setTag(fb);
                }
                else
                    fb = (FaceBookHolder) v.getTag();
                Item itm = items[position];
                fb.Name.setText(itm.text);
                fb.img.setImageDrawable(itm.icon);
                fb.Name.setChecked(itm.isChecked);
                return v;
            }
        };

you get the view in getView(), so you can modify it however you want.(change color , font etc)

Hope it helps! cheers!