ListView con filas personalizadas

En este tutorial voy a enseñar como hacer un listView personalizado como podrán haber visto en Proyecto turismo (ver). Ahí también pueden encontrar el código, pero acá solo explicaré este detalle, que es menor.
Recordemos que todo entra por lo ojos, y que tenga un buen aspecto nuestra app es fundamental.

Recomiedo ver -> Animación entre activities. Multilenguaje, ActionBar ir atrás (que son los que nombre en el videotutorial)

La idea es pasar de ListView como estos ->

A ListView personalizados como estos ->

Realmente hay mucha diferencia, parece un boton 3D.
Vuelvo a repetir, todo entra por los ojos.
Empezemos...

Para ello necesitamos agregar en la carpeta "drawable"

post_border_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
        <solid android:color="#cccccc" />
    </shape></item>
    <item><shape>
        <gradient android:angle="270" android:endColor="#ccc" android:startColor="#fff" />
        <corners android:radius="2dp" />
    </shape></item>

</selector>

post_border_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
        <solid android:color="#cccccc" />
    </shape></item>
    <item><shape>
        <gradient android:angle="90" android:endColor="#f5f5f5" android:startColor="#fff" />
    </shape></item>

</selector>

Una vez ya agregado lo anterior pasamos a la carpeta "layout" agregamos el siguiente xml

list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#f0f0f0"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/post_border_style"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/box_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/post_background_style"
            android:orientation="horizontal" >

            <LinearLayout
                android:id="@+id/single_post_circuito_linearbox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:orientation="horizontal"
                android:padding="5dp" >

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.3">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:id="@+id/imagen_single_post_circuito"
                        android:src="@drawable/circuitochico_plaza"
                        android:scaleType="centerCrop" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.7">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:text="Plaza 25 de Mayo"
                        android:id="@+id/tv_titulo_single_post_circuito"
                        android:layout_marginLeft="5dp"
                        android:textColor="#ff000000" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:text="Es la plaza principal de la ciudad de San Juan y es donde se encuentra el kilómetro 0 de la provincia."
                        android:id="@+id/tv_contenido_single_post_circuito"
                        android:layout_marginLeft="5dp"
                        android:textColor="#ff868686" />

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Ya terminamos con los archivos xml
Pasamos a la carpeta de java, utilizaremos el ListViewAdapter aprendido en ListView con Imagenes (ver)

ListViewAdapter

public class ListViewAdapter extends BaseAdapter {
        // Declare Variables
        Context context;
        int[] imagenes;
        String[] titulos;
        String[] contenido;
        LayoutInflater inflater;

        public ListViewAdapter(Context context, int[] imagenes, String[] titulos, String[] contenido ) {
            this.context = context;
            this.imagenes = imagenes;
            this.titulos = titulos;
            this.contenido = contenido;
        }

        @Override
        public int getCount() {
            return titulos.length;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

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

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

            // Declare Variables
            ImageView imgImg;
            TextView txtTitle;
            TextView txtContenido;

            //http://developer.android.com/intl/es/reference/android/view/LayoutInflater.html
            inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View itemView = inflater.inflate(R.layout.single_post_circuito, parent, false);

            // Locate the TextViews in listview_item.xml
            imgImg = (ImageView) itemView.findViewById(R.id.imagen_single_post_circuito);
            txtTitle = (TextView) itemView.findViewById(R.id.tv_titulo_single_post_circuito);
            txtContenido = (TextView) itemView.findViewById(R.id.tv_contenido_single_post_circuito);

            // Capture position and set to the TextViews
            imgImg.setImageResource(imagenes[position]);
            txtTitle.setText(titulos[position]);
            txtContenido.setText(contenido[position]);

            return itemView;
        }
    }