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.

Membuat list dengan RecylerView dan dependency injection ButterKniffe

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.


About Author

Adriyadi Savana

Seorang programmer ingin menjadi sukses.


Comment & Discussions

    Please LOGIN before if you want to give the comment.