How to populate a CustomListView with two different layouts for its items?

Question

What my app should do

I would like to populate a ListView from two different tables (TABLE_GROUPS and TABLE_PASSWORDS) from SQLite database.

First I display all groups one after another with the following custom item layout (custom_listview_single_item_group.xml). => This works fine!

After the groups has been loaded to the same ListView I want to add all passwords to the lower part of my ListView with the following custom item layout (custom_listview_single_item_password.xml).

What my problem is

I do not know how I can change the single item layout for the passwords after all groups has been added to the listview with its own single item layout.

What my question is

What is the best way to populate the listview with two different single item layouts?

Visualized

Left: How it looks now

Right: How it should look

Code - ShowItems.java

public void showItemsListView(){

    GridView gridShowItems = (GridView)findViewById(R.id.gridShowItems);
    ListView listShowItems = (ListView) findViewById(R.id.listItems);

    //getAllGroupNamesFromDB(columnIndex)
    String[] strArrGroupNames = new String[getAllDataFromColumn("GROUPS",1).size()];
    String[] strArrGroupImageNames = new String[getAllDataFromColumn("GROUPS",4).size()];
    strArrGroupNames = getAllDataFromColumn("GROUPS",1).toArray(strArrGroupNames);
    strArrGroupImageNames = getAllDataFromColumn("GROUPS",4).toArray(strArrGroupImageNames);

    listShowItems.setVisibility(View.VISIBLE);
    gridShowItems.setVisibility(View.GONE);

    listShowItems.setAdapter(new CustomLVAdapterShowItems(this, strArrGroupNames, strArrGroupImageNames));

    listShowItems.setLongClickable(true);

    listShowItems.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        public void onItemClick(AdapterView<?> listView, View itemView, int position, long id) {
            Log.v("Clicked position",""+ position);
        }
    });

    listShowItems.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
        @Override
        public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int position, long id) {

            //Set Edit-Options to GONE and display default titlebar
            setTitleBarMode(2);

            if (itemsRow != null) {
                itemsRow.setBackgroundResource(R.color.color_blue_listviewgridview);
            }

            //Set background color to selected item
            itemsRow = arg1;
            itemsRow.setBackgroundColor(Color.GREEN);

            TextView txtGroupName = (TextView)itemsRow.findViewById(R.id.txtTypeName);

            //Save itemName to sharedPreferences for editoptions
            selectedIconPrefs = getApplicationContext().getSharedPreferences("selectedIconPrefs", MODE_PRIVATE);
            SharedPreferences.Editor editor = selectedIconPrefs.edit();
            editor.putString("selectedIconPrefs", txtGroupName.getText().toString().trim());
            editor.commit();

            return true;
        }
    });
}


public ArrayList<String> getAllDataFromColumn(String tableName, int columnIndex) {
        ArrayList<String> strings = new ArrayList<String>();
        String query = String.format("SELECT * FROM "+tableName);
        Cursor c = db.getReadableDatabase().rawQuery(query, null);

        if (c.moveToFirst())
            do {
                strings.add(c.getString(columnIndex));
            } while (c.moveToNext());

        return strings;
    }

Code - CustomLVAdapterShowItems

public class CustomLVAdapterShowItems extends BaseAdapter {

    String [] strItemNames;
    Context context;
    String [] strImageNames;
    private static LayoutInflater inflater=null;

    public CustomLVAdapterShowItems(Context contextshowgroups, String[] listGroupNames, String[] listGroupImages) {

        strItemNames=listGroupNames;
        context=contextshowgroups;
        strImageNames=listGroupImages;
        inflater = ( LayoutInflater )context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return strItemNames.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    public class Holder{
        TextView txtViewItemName;
        ImageView imgItem;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Holder holder=new Holder();
        View rowView;
        rowView = inflater.inflate(R.layout.custom_listview_single_item_group, null);
        holder.txtViewItemName =(TextView) rowView.findViewById(R.id.txtTypeName);
        holder.imgItem =(ImageView) rowView.findViewById(R.id.imgTypeIcon);
        holder.txtViewItemName.setText(strItemNames[position]);
        holder.imgItem.setImageBitmap(BitmapFactory.decodeFile(strImageNames[position]));

        // load image
        try {
            Drawable d = Drawable.createFromStream(context.getAssets().open(strImageNames[position]+".png"), null);
            holder.imgItem.setBackground(d);
        }

        catch(IOException ex) {
            Log.d("IOException: ", ""+ex);
            return null;
        }

        return rowView;
    }
}

Code - activity_showitems.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="spicysoftware.com.passremember.ShowItems">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#095C9B"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <RelativeLayout
            android:id="@+id/toolBarTv"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <ImageView
                android:id="@+id/imgBack"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="16dp"
                android:layout_toEndOf="@+id/editTextSearch"
                android:background="@drawable/ic_arrow_back_white_48dp"
                android:visibility="gone"
                fab:srcCompat="@drawable/ic_arrow_back_white_48dp" />

            <TextView
                android:id="@+id/txtAppName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="16dp"
                android:fontFamily="sans-serif-smallcaps"
                android:text="@string/app_name"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/editTextSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="16dp"
                android:layout_toStartOf="@+id/imgSearch"
                android:fontFamily="sans-serif-smallcaps"
                android:hint="Search..."
                android:inputType="text"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textSize="16sp"
                android:visibility="gone" />

            <ImageView
                android:id="@+id/imgTiles"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignTop="@+id/imgMenu"
                android:layout_marginLeft="16dp"
                android:layout_toStartOf="@+id/imgMenu"
                android:background="@drawable/appswhite" />

            <ImageView
                android:id="@+id/imgEdit"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignTop="@+id/imgMenu"
                android:layout_marginLeft="16dp"
                android:layout_toStartOf="@+id/imgMenu"
                android:background="@drawable/ic_edit_white_48dp"
                android:visibility="gone" />


            <ImageView
                android:id="@+id/imgMenu"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:background="@drawable/ic_more_vert_white_48dp" />

            <ImageView
                android:id="@+id/imgDelete"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:background="@drawable/ic_delete_white_48dp"
                android:visibility="gone" />

            <ImageView
                android:id="@+id/imgSearch"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_toStartOf="@+id/imgTiles"
                android:background="@drawable/ic_search_white_48dp" />

        </RelativeLayout>


    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:id="@+id/toolBarTvTwo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/toolbar">

        <GridView
            android:id="@+id/gridShowItems"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:background="@android:color/transparent"
            android:horizontalSpacing="6dp"
            android:numColumns="3"
            android:clickable="true"
            android:verticalSpacing="6dp"
            android:visibility="gone" />

        <RelativeLayout
            android:id="@+id/rLayoutScrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ListView
                android:id="@+id/listItems"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="16dp"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:dividerHeight="8dp" />

            <com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/multiple_actions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                fab:fab_addButtonColorNormal="#095C9B"
                fab:fab_addButtonColorPressed="@color/white_pressed"
                fab:fab_addButtonPlusIconColor="@color/half_black"
                fab:fab_labelStyle="@style/menu_labels_style"
                android:layout_marginBottom="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginEnd="16dp">

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/flbtnNewGroup"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_icon="@drawable/ic_folder_open_white_48dp"
                    fab:fab_colorNormal="#095C9B"
                    fab:fab_title="@string/group"
                    fab:fab_colorPressed="@color/white_pressed"/>

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/flbtnNewPassword"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_icon="@drawable/ic_description_white_48dp"
                    fab:fab_colorNormal="#095C9B"
                    fab:fab_title="@string/strpassword"
                    fab:fab_colorPressed="@color/white_pressed"/>

            </com.getbase.floatingactionbutton.FloatingActionsMenu>

        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

Code - custom_listview_single_item_group.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/customlistviewitem"
    android:elevation="1dp"
    android:orientation="horizontal">


    <ImageView
        android:id="@+id/imgTypeIcon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/mail"
        android:scaleType="fitXY" />

    <RelativeLayout
        android:id="@+id/rLayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:layout_toEndOf="@+id/imgTypeIcon">


        <ImageView
            android:id="@+id/imgArrowRight"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="16dp"
            android:background="@drawable/arrowright" />

        <TextView
            android:id="@+id/txtTypeName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:fontFamily="sans-serif-smallcaps"
            android:text="Gruppe"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtGroupCountFiles"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/txtTypeName"
            android:fontFamily="sans-serif-smallcaps"
            android:text="0 Entries"
            android:textColor="@android:color/white"
            android:textSize="12sp" />
    </RelativeLayout>

</RelativeLayout>

Code - custom_listview_single_item_password.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/customlistviewitem"
    android:elevation="1dp"
    android:orientation="horizontal">


    <ImageView
        android:id="@+id/imgTypeIcon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/mail"
        android:scaleType="fitXY" />

    <RelativeLayout
        android:id="@+id/rLayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:layout_toEndOf="@+id/imgTypeIcon">

        <TextView
            android:id="@+id/txtTypeName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:fontFamily="sans-serif-smallcaps"
            android:text="Gruppe"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold" />

    </RelativeLayout>

</RelativeLayout>

Answer 1

You'll find life much easier if you upgrade to a RecyclerView, here's a great answer if you were to do so: https://stackoverflow.com/a/26245463/3009199

If you want to stick with ListView here's a tutorial: http://android.amberfog.com/?p=296

You need to be looking at when he introduces

 @Override
    public int getItemViewType(int position) {

Then your adapter will do this:

switch (type) {
                case TYPE_ITEM:
                    convertView = mInflater.inflate(R.layout.item1, null);
                    break;
                case TYPE_SEPARATOR:
                    convertView = mInflater.inflate(R.layout.item2, null);
                    break;

In short the only complication is getting the code to know which row should be which. This could be as simple as position > 4 or whatever. If it's more complicated you may want to change your adapter to use an object rather than a simple string and each object can tell the adapter it's row type.