Creating a custom Recycler list View with Various UI components in one list item

Question

I have a created a list view using the recycler view for the Item list.Each list has movie names having these fields :

Price (text view - values ranging from 20-100)
Genere (radio button - U/A or spinner)
Availability (text view, values ranging from 10-1000)
duration (spinner - 1/2/3/4 hours or drop down)
Documentary ( radio button - true,false)
feature1 (some UI element to take input values)
feature2 (some UI element to take input values)
feature3(some UI element to take input values)

Each list item may or may not have all the fields. If i implement it using the recycler view each list will have these fields . How can I customize it to make these fields VISIBLE and GONE depending on the Movie types.

This is my text_row_item.xml :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="85dp"
        android:layout_height="28dp"
        android:ems="10"
        android:inputType="numberDecimal" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberDecimal" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</FrameLayout>

This is my recycler_view_frag.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--<RadioGroup-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:gravity="center_horizontal"-->
        <!--android:orientation="horizontal"-->
        <!--android:checkedButton="@+id/linear_layout_rb">-->
        <!--<RadioButton android:id="@+id/linear_layout_rb"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:text="@string/linear_layout_manager"/>-->
    <!--</RadioGroup>-->

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <!--<RadioGroup-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:gravity="center_horizontal"-->
        <!--android:orientation="horizontal"-->
        <!--android:checkedButton="@+id/linear_layout_rb">-->
        <!--<RadioButton android:id="@+id/linear_layout_rb"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:text="@string/linear_layout_manager"/>-->
    <!--</RadioGroup>-->

</LinearLayout>

This is activity_main.xml :

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/sample_main_layout">

    <ViewAnimator
          android:id="@+id/sample_output"
          android:layout_width="match_parent"
          android:layout_height="0px"
          android:layout_weight="1">

        <ScrollView
              style="@style/Widget.SampleMessageTile"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

            <TextView
                  style="@style/Widget.SampleMessage"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:paddingLeft="@dimen/horizontal_page_margin"
                  android:paddingRight="@dimen/horizontal_page_margin"
                  android:paddingTop="@dimen/vertical_page_margin"
                  android:paddingBottom="@dimen/vertical_page_margin"
                  android:text="@string/intro_message" />
        </ScrollView>

        <fragment
              android:name="com.example.android.common.logger.LogFragment"
              android:id="@+id/log_fragment"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

    </ViewAnimator>

    <View
          android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="@android:color/darker_gray" />

    <FrameLayout
          android:id="@+id/sample_content_fragment"
          android:layout_weight="2"
          android:layout_width="match_parent"
          android:layout_height="0px" />

</LinearLayout>

But i am gettign some wierd GUI as attached :

What part to look for the correction?

score 0 · Answer 1 · answered Jun 02 '18 at 04:01

In this way, you may solve it.

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
   private ArrayList<Movie> movies;
    public MyAdapter (ArrayList<Movie> movies) {
       this.movies=movies;
     }
class ViewHolder0 extends RecyclerView.ViewHolder {
    ...
    public ViewHolder0(View itemView){
    ...
    }
}

class ViewHolder1 extends RecyclerView.ViewHolder {
    ...
    public ViewHolder1(View itemView){
    ...
}

@Override
public int getItemViewType(int position) {
   if(movies.get(position).getType()=="brand1"){
      return 0;

    }
    else{
     return 1;

    }

}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
     switch (viewType) {
         case 0: return new ViewHolder0(...);
         case 1: return new ViewHolder1(...);
         ...
     }
}

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
    switch (holder.getItemViewType()) {
        case 0:
            ViewHolder0 viewHolder0 = (ViewHolder0)holder;
            ...
            break;

        case 1:
            ViewHolder1 viewHolder1 = (ViewHolder1)holder;
            ...
            break;
    }
}

}

Creating a custom Recycler list View with Various UI components in one list item

1 Answers1