Membuat Tumpukan View dengan RecyclerView

Bismillah ...


coba memulai kembali membangkitkan blog ini, setelah hampir 2 tahun, blog ini telah mati suri.
setelah blog ini ditinggal sekian lama, maka saya mencoba menyelipkan code menggunakan github.

Kali ini saya ingin berbagi bagaimana caranya membuat View yang saling bertumpuk dengan menggunakan bantuan RecyclerView. Adapun contoh outputnya sebagai berikut :




untuk membuat tampilan seperti gambar diatas, hanya butuh copy class berikut :

	/*
	* Copyright (c) 2018, irsalshabirin
	*
	* Licensed under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at:
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on
	* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/
	/**
	* Created by irsalshabirin on 23/3/18.
	*/
	class OverlapItemDecoration extends RecyclerView.ItemDecoration {
	private int mHorizontalSpace = 0;
	private int mVerticalSpace = 0;
	/**
	* @param mHorizontalSpace the value can be either positive or negative
	* @param mVerticalSpace the value can be either positive or negative
	*/
	public OverlapItemDecoration(int mHorizontalSpace, int mVerticalSpace) {
	this.mHorizontalSpace = mHorizontalSpace;
	this.mVerticalSpace = mVerticalSpace;
	}
	@Override
	public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
	int position = parent.getChildAdapterPosition(view);
	boolean reverseLayout = false;
	if (parent.getLayoutManager() instanceof LinearLayoutManager) {
	reverseLayout = ((LinearLayoutManager) parent.getLayoutManager()).getReverseLayout();
	} else {
	return;
	}
	if (position != 0) {
	if (reverseLayout) {
	// mVerticalSpace must negative value
	// top left
	outRect.set(
	((position) * mHorizontalSpace),
	0,
	0,
	(mVerticalSpace + Math.abs(mHorizontalSpace))
	);
	// top right
	outRect.set(
	((position) * Math.abs(mHorizontalSpace)),
	0,
	0,
	(mVerticalSpace + Math.abs(mHorizontalSpace))
	);
	} else {
	// mVerticalSpace must negative value
	// TODO: 26/03/18 bottom left
	// bottom right
	outRect.set(
	((position) * Math.abs(mHorizontalSpace)),
	(mVerticalSpace + Math.abs(mHorizontalSpace)),
	0,
	0
	);
	}
	}
	}
	}

view raw OverlapItemDecoration.java hosted with ❤ by GitHub

dan di code anda tambahkan :

recyclerView.addItemDecoration(new OverlapItemDecoration(-12, -100));

-12 adalah jarak antara view secara horizontal
-100 adalah height dari object view

Semoga Bermanfaat