 |
| Switch Layout List to Grid |
Berbicara tentang Switch Layout List to Grid, apa sih maksudnya? Maksudnya adalah kita dapat merubah tampilan List menjadi Grid dengan elemen yang sama hanya menggunakan RecyclerView. Jika kalian ingin SOURCE CODE Switch Layout List to Grid ini, silahkan kalian download melalui Github saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai😄.
Jika kalian ingin mencoba membuat Switch Layout List to Grid dengan RecyclerView, berikut saya berikan Video Tutorialnya :
Jangan lupa klik SUBSCRIBE ya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :
1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 19 ya.
2. Ubah isi MainActivity.java dan activity_main.xml menjadi seperti ini :
package com.azhar.switchlayout;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
import static com.azhar.switchlayout.ItemAdapter.SPAN_COUNT_ONE;
import static com.azhar.switchlayout.ItemAdapter.SPAN_COUNT_THREE;
/**
* Created by Azhar Rivaldi on 29/03/2018.
*/
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private ItemAdapter itemAdapter;
private GridLayoutManager gridLayoutManager;
private List- items;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
initItemsData();
gridLayoutManager = new GridLayoutManager(this, SPAN_COUNT_ONE);
itemAdapter = new ItemAdapter(items, gridLayoutManager);
recyclerView = (RecyclerView) findViewById(R.id.rv);
recyclerView.setAdapter(itemAdapter);
recyclerView.setLayoutManager(gridLayoutManager);
}
private void initItemsData() {
items = new ArrayList<>(4);
items.add(new Item(R.drawable.img1, "Image 1", 20, 33));
items.add(new Item(R.drawable.img2, "Image 2", 10, 54));
items.add(new Item(R.drawable.img3, "Image 3", 27, 20));
items.add(new Item(R.drawable.img4, "Image 4", 45, 67));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.meun_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.menu_switch_layout) {
switchLayout();
switchIcon(item);
return true;
}
return super.onOptionsItemSelected(item);
}
private void switchLayout() {
if (gridLayoutManager.getSpanCount() == SPAN_COUNT_ONE) {
gridLayoutManager.setSpanCount(SPAN_COUNT_THREE);
} else {
gridLayoutManager.setSpanCount(SPAN_COUNT_ONE);
}
itemAdapter.notifyItemRangeChanged(0, itemAdapter.getItemCount());
}
private void switchIcon(MenuItem item) {
if (gridLayoutManager.getSpanCount() == SPAN_COUNT_THREE) {
item.setIcon(getResources().getDrawable(R.drawable.ic_span_3));
} else {
item.setIcon(getResources().getDrawable(R.drawable.ic_span_1));
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E5E5E5">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
3. Buat ItemAdapter.java dan Item.java :
package com.azhar.switchlayout;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
/**
* Created by Azhar Rivaldi on 29/03/2018.
*/
public class ItemAdapter extends RecyclerView.Adapter {
public static final int SPAN_COUNT_ONE = 1;
public static final int SPAN_COUNT_THREE = 3;
private static final int VIEW_TYPE_SMALL = 1;
private static final int VIEW_TYPE_BIG = 2;
private List- mItems;
private GridLayoutManager mLayoutManager;
public ItemAdapter(List- items, GridLayoutManager layoutManager) {
mItems = items;
mLayoutManager = layoutManager;
}
@Override
public int getItemViewType(int position) {
int spanCount = mLayoutManager.getSpanCount();
if (spanCount == SPAN_COUNT_ONE) {
return VIEW_TYPE_BIG;
} else {
return VIEW_TYPE_SMALL;
}
}
@Override
public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
if (viewType == VIEW_TYPE_BIG) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_big, parent, false);
} else {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_small, parent, false);
}
return new ItemViewHolder(view, viewType);
}
@Override
public void onBindViewHolder(ItemViewHolder holder, int position) {
Item item = mItems.get(position % 4);
holder.title.setText(item.getTitle());
holder.iv.setImageResource(item.getImgResId());
if (getItemViewType(position) == VIEW_TYPE_BIG) {
holder.info.setText(item.getLikes() + " likes · " + item.getComments() + " comments");
}
}
@Override
public int getItemCount() {
return 30;
}
class ItemViewHolder extends RecyclerView.ViewHolder {
ImageView iv;
TextView title;
TextView info;
ItemViewHolder(View itemView, int viewType) {
super(itemView);
if (viewType == VIEW_TYPE_BIG) {
iv = (ImageView) itemView.findViewById(R.id.image_big);
title = (TextView) itemView.findViewById(R.id.title_big);
info = (TextView) itemView.findViewById(R.id.tv_info);
} else {
iv = (ImageView) itemView.findViewById(R.id.image_small);
title = (TextView) itemView.findViewById(R.id.title_small);
}
}
}
}
package com.azhar.switchlayout;
/**
* Created by Azhar Rivaldi on 29/03/2018.
*/
public class Item {
private int imgResId;
private String title;
private int likes;
private int comments;
public Item(int imgResId, String title, int likes, int comments) {
this.imgResId = imgResId;
this.title = title;
this.likes = likes;
this.comments = comments;
}
public int getImgResId() {
return imgResId;
}
public String getTitle() {
return title;
}
public int getLikes() {
return likes;
}
public int getComments() {
return comments;
}
}
4. Langkah yang terakhir buat layout item_big.xml dan item_small.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#FFFFFF"
android:orientation="horizontal">
<ImageView
android:id="@+id/image_big"
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:src="@drawable/img1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/title_big"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Image 1"
android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
<TextView
android:id="@+id/tv_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="20 likes · 33 comments"
android:textAppearance="@style/TextAppearance.AppCompat.Small" />
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#FFFFFF"
android:orientation="vertical">
<ImageView
android:id="@+id/image_small"
android:layout_width="match_parent"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:src="@drawable/img1" />
<TextView
android:id="@+id/title_small"
android:layout_width="match_parent"
android:layout_height="50dp"
android:padding="8dp"
android:text="Image 1"
android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
</LinearLayout>Jika semuanya sudah selesai bisa kalian RUN. Untuk file yang kurang seperti gambar yang ada di folder drawable, silahkan download di Github saya DISINI.
Kalau kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.
Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Switch Layout List to Grid dengan RecyclerView | Android Studio ini. Subscribe juga di blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Follow Instagram Admin @azhardvls_. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih...
