Buat kalian yang sudah pernah mengenal ListView mungkin pernah mendengar RecylerView, yap! RecyclerView adalah pengembangan dari ListView. Untuk kalian yang belum mengenal RecylerView, kamu bisa bukan link ini goo.gl/pc83fS. Ok baiklah, kita langsung saja tutorial tentang pembuatan RecycleView menggunakan dependency injection ButterKniffe, dan untuk lebih lengkap mengenai ButterKnife kamu bisa mempelajari di sini goo.gl/BnD5Un.
1. Pertama - tama, buat new project di Android Studio.
2. Add library RecyclerView dan ButterKnife.
tambahkan ;
compile 'com.android.support:recyclerview-v7:23.0.1'
compile 'com.jakewharton:butterknife:7.0.1'
3. Sync gradle.
4. Buat layout untuk activity RecyclerView dan beri nama dengan act_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#455866"> <LinearLayout android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/actMain_inputData" android:layout_weight="1" android:textColor="#FFFFFF" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/actMain_btnAdd" android:text="Simpan" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> <android.support.v7.widget.RecyclerView android:layout_margin="10dp" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/recyclerview"/> </LinearLayout>
5. Buat kembali untuk row untuk RecycleView, beri nama row_list.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/txtName" android:layout_margin="10dp" android:textColor="#DEE7EE" android:textStyle="bold" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <View android:layout_width="fill_parent" android:layout_height="0.3dp" android:background="#15acdd" /> </LinearLayout>
6. Buat kelas adapter RecyclerView, beri nama RecyAdapter.java
package com.adriesavana.recyclerviewandbutterknifeexample.adapter; 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.TextView; import com.adriesavana.recyclerviewandbutterknifeexample.R; import java.util.List; import butterknife.Bind; import butterknife.ButterKnife; /** * Created by Adrie on 10/5/15. */ public class RecyAdapter extends RecyclerView.Adapter<RecyAdapter.ViewHolder> { private final Context ctx; private List<String> model; @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int position) { View view = LayoutInflater.from(ctx).inflate(R.layout.row_list, viewGroup, false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder viewHolder, int position) { viewHolder.txtData.setText(model.get(position)); } @Override public int getItemCount() { return model.size(); } class ViewHolder extends RecyclerView.ViewHolder { @Bind(R.id.txtName)TextView txtData; public ViewHolder(View itemView) { super(itemView); ButterKnife.bind(this, itemView); } } public RecyAdapter(Context context, List<String> data) { this.ctx = context; this.model = data; } }
Untuk melakukan injection view menggunakan Butterknife perhatikan code ini.
class ViewHolder extends RecyclerView.ViewHolder { @Bind(R.id.txtName)TextView txtData; public ViewHolder(View itemView) { super(itemView); ButterKnife.bind(this, itemView); } }
Fungsi ini untuk mengikat object view dengan activity
ButterKnife.bind(this, itemView);
Untuk mendeklarasikan properti view di dalam activity, sama seperti :
TextView txtData = (TextView)findViewById(R.id.txtName);
@Bind(R.id.txtName)TextView txtData;
7. Buat kelas activity dengan nama MainActivity.java
package com.adriesavana.recyclerviewandbutterknifeexample.activity; import android.app.Activity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.widget.EditText; import com.adriesavana.recyclerviewandbutterknifeexample.R; import com.adriesavana.recyclerviewandbutterknifeexample.adapter.RecyAdapter; import java.util.ArrayList; import java.util.List; import butterknife.Bind; import butterknife.ButterKnife; import butterknife.OnClick; /** * Created by Adrie on 10/5/15. */ public class MainActivity extends Activity { @Bind(R.id.actMain_inputData)EditText inputData; @Bind(R.id.recyclerview)RecyclerView recyclerview; private List<String> models; private RecyAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act_main); ButterKnife.bind(this); initComponent(); } private void initComponent() { models = new ArrayList<>(); adapter = new RecyAdapter(this, models); recyclerview.setLayoutManager(new LinearLayoutManager(this)); recyclerview.setAdapter(adapter); } @OnClick(R.id.actMain_btnAdd) public void clickBtnAdd() { if (!inputData.getText().toString().equals("")) { models.add(inputData.getText().toString()); adapter.notifyDataSetChanged(); inputData.setText(""); } } }
8. Tambahkan activity pada Manifest.
<activity android:name=".activity.MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.adriesavana.recyclerviewandbutterknifeexample"> <application android:allowBackup="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:theme="@style/AppTheme"> <activity android:name=".activity.MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
Setelah step-step diatas selesai, Running aplikasi. Maka hasil aplikasi setelah kita Run project adalah seperti gambar di bawah ini.
Kalian juga dapat langsung checkout code diatas di https://github.com/adrie4mac/recyclerViewAndButterKnifeSample
Mungkin baru ini yang bisa saya sampaikan, cukup sekian dan terima kasih.