Working Multiple Layouts show in a GridView

Question

I'm developing an Android app to show gauges. There are different type of gauges (gauge1.xml, gauge2.xml like that). What i want to do is load different types of gauge layout xml file to main grid view using JSON Array.

Each Grid cell contains different layout according to JSON Object.

My JSON Object :

{"user1": [{"ui": "gauge", "id": "gauge1", "value": 69}, {"ui": 
    "gauge", "id": "gauge2", "value": 23}]}

Gauge1.xml

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

    <pl.pawelkleczkowski.customgauge.CustomGauge
        android:id="@+id/gauge1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="20dp"
        app:gaugePointStartColor="@color/md_red_500"
        app:gaugePointEndColor="@color/md_red_500"
        app:gaugePointSize="6"
        app:gaugeStartAngle="135"
        app:gaugeStrokeCap="ROUND"
        app:gaugeStrokeColor="@color/md_grey_400"
        app:gaugeStrokeWidth="10dp"
        app:gaugeStartValue="0"
        app:gaugeEndValue="1000"
        app:gaugeSweepAngle="270" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/gauge1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="18dp"
        android:text="256"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="18dp"
        android:text="Temp"
        android:textSize="20dp"
        android:textStyle="bold" />


</RelativeLayout>

How can i do it?

I'm using pkleczko's CustomGauge for gauge.

Nicola Gallazzi · Accepted Answer · 2017-11-10T08:25:58.570

In the getView method of your adapter, inflate the layout (gauge1.xml or gauge2.xml) accordingly to your needs. For example use a if on the gauge id.

Follow this steps:

define your adapter for the GridView extending base adapter
in the getView method retrieve the item at the position provided by the method
according to the item retrieved, inflate the correct layout

public class UsersAdapter extends BaseAdapter {

      private final Context mContext;
      private final User[] users;

      public UsersAdapter(Context context, User[] users) {
        this.mContext = context;
        this.users = users;
      }

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

      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
        User curUser = users[position];
        LayoutInflater inflater = LayoutInflater.from(context);
        ViewHolder holder;
        if (convertView == null) {
            holder = new ViewHolder();
            if (//curUser needs gauge1 layout//){
                convertView = inflater.inflate(R.layout.gauge1, parent, false);
                // do what you need with the layout gauge 1
            }else{
                convertView = inflater.inflate(R.layout.gauge2, parent, false);
                // do what you need with the layout gauge 1
            }   
        }
        return convertView;
      }

    }

score 1 · Answer 2 · answered Nov 10 '17 at 09:54

try to use Recycler view and change layout manager to grid format and make adapter like this:

Note: please dont go deep in my coding i am just giving you way to build.

public class SubCategoryAdapter extends RecyclerView.Adapter {

private final int VIEW_GRID = 1;
private final String[] listdata;
private Context context;
Gson gson;


public SubCategoryAdapter(Context context, String[] listdata) {
    this.context = context;
    this.listdata = listdata;
    gson = new Gson();
}


@Override
public int getItemViewType(int position) {

    if (isPositionItem(position)){
        return 1;
    }
    else {
        return 2;
    }
}

private boolean isPositionItem(int position) {

// define your condition here from your response

    if(position==0) {
        return true;
    }else{
        return false;
    }
}

@Override
public int getItemCount() {
    return listdata.length;
}


@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

      if (viewType == 1) {
        View v =  LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_bb_verticallist, parent, false);
        return new ViewHolder1(v);
    } else if (viewType == 2){
        View v =  LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_root_bb_gridlist, parent, false);
        return new ViewHolder2(v);
    }
    return null;


}


public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {

    if (holder instanceof ViewHolder) {
        if(position <= listdata.length) {

            switch (holder.getItemViewType()){

                case 1:
                    // your viewholder1
                    break;

                case 2:
                 // your view holder2
                    break;

            }

        }

    }

}

public class ViewHolder extends RecyclerView.ViewHolder {

    TextView title;
    RecyclerView recycler_childView;

    public ViewHolder(View itemView) {
        super(itemView);

        title = (TextView)itemView.findViewById(R.id.title);
        recycler_childView = (RecyclerView) itemView.findViewById(R.id.list);

    }
}

public class ViewHolder2 extends RecyclerView.ViewHolder {

    TextView title;
    RecyclerView recycler_childView;

    public ViewHolder(View itemView) {
        super(itemView);

        title = (TextView)itemView.findViewById(R.id.title);
        recycler_childView = (RecyclerView) itemView.findViewById(R.id.list);

    }
}

}

Working Multiple Layouts show in a GridView

2 Answers2