set header and content horizontally in recyclerview android

Question

I am trying to add layout like below image using recyclerView with two layouts. I want the output like below image .

Main activity have framelayout, I need three fragment pictures, videos and documents used fragment class.

My codes are below

Fragmentpictures

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/media_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"></android.support.v7.widget.RecyclerView>

</RelativeLayout>

UploadButtonLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn_upload"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:scaleType="centerCrop"/>

</RelativeLayout>

ImageviewLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/image_thumbnail"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:scaleType="centerCrop"
        android:src="@drawable/avatar" />
</RelativeLayout>

Adapter class

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.sirajmalayil.celeps.R;

import java.util.ArrayList;
import java.util.List;
import model.Pictures;
import interfaceClass.onActivityResult;

/**
 * Created by Siraj Malayil on 07-08-2018.
 */

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder>{

    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;

    private Context context;
    private List<Pictures> listPictures = new ArrayList<>();
    private onActivityResult activityResult;

    public ImageAdapter(Context context, List<Pictures> listPictures, onActivityResult activityResult) {
        this.context = context;
        this.listPictures = listPictures;
        this.activityResult = activityResult;
    }

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

        if (viewType == TYPE_HEADER){
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.upload_layout,parent,false);
            return new UploadViewHolder(view);
        }
        else if (viewType == TYPE_ITEM){
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.gallery_thumbnail,parent,false);
            return new ViewHolder(view);
        }
        throw new RuntimeException("there is no type that matches type "+viewType+" , please check and make sure your using types");

    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if (holder instanceof UploadViewHolder){
            ((UploadViewHolder) holder).btnImgUpload.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "toasted!", Toast.LENGTH_SHORT).show();
                }
            });
        }
        else if (holder instanceof ViewHolder){
            holder.uploadedImge.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "toasted me too!", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return listPictures.size() + 1;
    }

    @Override
    public int getItemViewType(int position) {
        if (isPositionHeader(position)){
            return TYPE_HEADER;
        }
        return TYPE_ITEM;
    }

    private boolean isPositionHeader(int position) {
        return position == 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private ImageView uploadedImge;

        public ViewHolder(View itemView) {
            super(itemView);
            uploadedImge = (ImageView) itemView.findViewById(R.id.image_thumbnail);
        }
    }

    private class UploadViewHolder extends ViewHolder {

        private Button btnImgUpload;

        public UploadViewHolder(View view) {
            super(view);

            btnImgUpload = (Button) view.findViewById(R.id.btn_upload);
        }
    }
}

PicturesFragment class

public class PicturesFragment extends Fragment{

    private ImageButton btnUpload;
    private GridView gridView;
    private RecyclerView recyclerView;
    private static final int RESULT_LOAD_IMAGE=99;
    private List<Pictures> arrayListPictures = new ArrayList<>();
    private ArrayList<String> imagesArray;
    ImageAdapter mAdapter;
    private onActivityResult activityResult;


    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_pictures,container,false);

        recyclerView = (RecyclerView) rootView.findViewById(R.id.media_recycler);
        //btnUpload = (ImageButton) rootView.findViewById(R.id.btn_upload);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        ImageAdapter mAdapter = new ImageAdapter(getActivity(),arrayListPictures,activityResult);
        recyclerView.setAdapter(mAdapter);

        activityResult = new onActivityResult() {
            @Override
            public void onClick() {
                Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(intent,RESULT_LOAD_IMAGE);
            }
        };

        /*btnUpload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(intent,RESULT_LOAD_IMAGE);
            }
        });*/

        //GridView gridView = (GridView) rootView.findViewById(R.id.grid_view);
        //gridView.setAdapter(new GridAdapter(getContext(),activityResult));


        return rootView;
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && data !=null)
        {
            Uri imageUri = data.getData();
            String[] filePathColumn = {MediaStore.Images.Media.DATA};
            Cursor cursor = getActivity().getContentResolver().query(imageUri,filePathColumn,null,null,null);
            cursor.moveToFirst();
            int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
            String picturePath = cursor.getString(columnIndex);
            Log.d("Log","picturePath: "+picturePath);
            cursor.close();

        }
    }

above in my code showing only upload button layout, here I need when I click the button pick the images and showing the image view, I am using recyclerView to show the images, but the problem i cant set images and upload button correctly in one row like above picture, please cross check my code and give a better solution to get UI like above

Answer 1

Add your Adapter like this

public class SOGridAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final int HEADER = 0;
private static final int ROW = 1;

private Context context;
private List<Pictures> imageslist;


public SOGridAdapter(Context context, List<Pictures> imageslist) {
    this.context = context;
    this.imageslist = imageslist;
}

@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    if (viewType == HEADER)
        return new UploadHolder( LayoutInflater.from(context).inflate(R.layout.row_upload, parent, false));
    else return new ImageHolder( LayoutInflater.from(context).inflate(R.layout.row_image, parent, false));
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    switch (getItemViewType(position)) {
        case HEADER:
            ((UploadHolder) holder).itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                   //your clicklistener to call openGallery intent
                }
            });
            break;
        case ROW:
            ((ImageHolder) holder).ivImage.setImageURI(Uri.parse(imageslist.get(position-1).getImageUri()));
            break;
    }
}

@Override
public int getItemCount() {
    return imageslist.size() + 1;
}


@Override
public int getItemViewType(int position) {
    return position == 0 ? HEADER : ROW;
}

class UploadHolder extends RecyclerView.ViewHolder {
    public UploadHolder(View itemView) {
        super(itemView);
    }
}

class ImageHolder extends RecyclerView.ViewHolder {
    ImageView ivImage;

    public ImageHolder(View itemView) {
        super(itemView);
        ivImage = itemView.findViewById(R.id.ivImage);
    }
}

}

In your fragment

  public void openGallery() {
    Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(intent, RESULT_LOAD_IMAGE);
}

 @Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == RESULT_LOAD_IMAGE && resultCode == Activity.RESULT_OK) {
        Pictures pictures = new Pictures(data.getData().toString());
        picturesList.add(pictures);
        soGridAdapter.notifyDataSetChanged();

    }
}

Hope this will help you.....