Android: Possible/Smart way to setup custom list items? (Or convenient way to setup re-used layouts)

Question

Overview

As UI getting more complicated -- but still some-part-repeated at the same time, the include view component (or RecyclerView with Adapter in java) might be the best solution. However, since these parts are static and specific, I wonder if there's a way to build these UI in xml-only / editor-previewable style?

---

Example

Below is a more elaborated question: I want to build a Setting Page, with items like this:

layout should be a list, filled with items -- each one has icon, text, and a arrow.

How can I do it?

On my first thought, I use include.

Step 1

I build a layout for single item names item_option_standard.xml (below is a simplified version):

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/background_light">

    <ImageView
        android:id="@+id/itemIcon" />

    <TextView
        android:id="@+id/itemTitle" />

    <TextView
        android:id="@+id/itemSubtitle" />

    <ImageButton
        android:id="@+id/itemNext" />

    <View
        android:id="@+id/divider" />
</android.support.constraint.ConstraintLayout>

Step 2

and re-use this by putting include in my ScrollView :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include
            android:id="@+id/optMyCash"
            layout="@layout/item_option_standard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <include
            android:id="@+id/optHistory"
            layout="@layout/item_option_standard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <include
            android:id="@+id/optAnnouncement"
            layout="@layout/item_option_standard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        
        <!-- and so on... -->
        
    </LinearLayout>
</ScrollView>

In editor this is showed like:

Step 3

The last step is to modify content step to step. I wrote a helper function:

public static void SetupOption(@NonNull View itemView, @DrawableRes int iconId, @NonNull String itemTitle, View.OnClickListener onClickListener) {
    ImageView iconView = itemView.findViewById(R.id.itemIcon);
    iconView.setImageResource(iconId);
    TextView titleView = itemView.findViewById(R.id.itemTitle);
    titleView.setText(itemTitle);
    itemView.setOnClickListener(onClickListener);
}

and use this in my OnCreate :

SetupOption(view.findViewById(R.id.optMyCash), R.drawable.ic_my_cash, getString(R.string.title_my_cash), onClickListener);
SetupOption(view.findViewById(R.id.optHistory), R.drawable.ic_history, getString(R.string.title_history), onClickListener);
SetupOption(view.findViewById(R.id.optAnnouncement), R.drawable.ic_announce, getString(R.string.title_announce), onClickListener);
// and so on...

Question

Is there any alternative way to do "Step 3"? Especially, is there a chance to do that in xml / more static / editor-previewable way? The method beyond cannot be previewed in editor, and it's hard-to-view, hard-to-maintain (and some kind inefficient?)

Answer 1

You have to dynamically add the view. and just set the tag to the view which you want to use for click event and in the click event, you will get a view and just get the tag to differentiate the click event. see here
- If you getting ERROR or something wrong then please comment down below.