Android: RecyclerView with Toolbar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="os_version">
        <item>Alpha</item>
        <item>Beta</item>
        <item>Cupcake</item>
        <item>Donut</item>
        <item>Eclair</item>
        <item>Frozen yogurt</item>
        <item>Ginger Bread</item>
        <item>Honeycomb</item>
        <item>Ice Cream Sandwich</item>
        <item>Jelly Bean</item>
        <item>Kitkat</item>
        <item>Lollipop</item>
        <item>Marshmallow</item>
    </string-array>

    <string-array name="os_sub_version">
        <item>Api Level 1.0</item>
        <item>Api Level 1.3</item>
        <item>Api Level 1.5</item>
        <item>Api Level 1.6</item>
        <item>Api Level 2.0</item>
        <item>Api Level 2.2</item>
        <item>Api Level 3.0 - 3.3</item>
        <item>Api Level 3.4</item>
        <item>Api Level 4.0.x</item>
        <item>Api Level 4.1.x - 4.2.x</item>
        <item>Api Level 4.4.x</item>
        <item>Api Level 5.x</item>
        <item>Api Level 6.0</item>
    </string-array>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--Indigo 500-->
    <color name="primary_500">#3F51B5</color>
    <!--Indigo 700-->
    <color name="primary_700">#303F9F</color>
    <!--Pink 500-->
    <color name="accent_500">#E91E63</color>
    <!--Pink 700-->
    <color name="accent_700">#C2185B</color>
    <color name="black_trans80">#14000000</color>


    <color name="blue_grey">#455A64</color>
    <color name="red">#F44336</color>
    <color name="pink">#E91E63</color>
    <color name="purple">#9C27B0</color>
    <color name="deep_purple">#673AB7</color>
    <color name="indigo">#3F51B5</color>
    <color name="blue">#2196F3</color>
    <color name="light_blue">#03A9F4</color>
    <color name="cyan">#00BCD4</color>
    <color name="teal">#009688</color>
    <color name="green">#4CAF50</color>
    <color name="light_green">#8BC34A</color>
    <color name="lime">#CDDC39</color>
    <color name="yellow">#FFEB3B</color>
    <color name="amber">#FFC107</color>
    <color name="orange">#FF9800</color>
    <color name="deep_orange">#FF5722</color>
</resources> 

Tahap selanjutnya memasukkan library yang dibutuhkan yaitu:

• appcompat-v7
• cardview-v7
• recyclerview-v7

Caranya, klik kanan di folder project, pilih Open module settings, selanjutnya ikuti langkah di gambar berikut ini :

    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:cardview-v7:23.1.0'
    compile 'com.android.support:recyclerview-v7:23.1.0'
 

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "net.zam.samplecard"
        minSdkVersion 14
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:cardview-v7:23.1.0'
    compile 'com.android.support:recyclerview-v7:23.1.0'
} 

Setelah proses diatas, lakukan sinkronisasi gradle dengan mengklik ikon Sync Project with Gradle Files

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#80000000"
        android:startColor="@android:color/transparent" />
</shape>

• activity_main.xml
• item_recycle.xml
• toolbar.xml
jika sudah ada file activiy_main.xml ganti saja isinya.

activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="net.zam.design.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/home_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false" />

    </FrameLayout>

    <include layout="@layout/toolbar" />

</RelativeLayout>

item_recycle.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/cardlist_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="@dimen/cardview_default_elevation"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:gravity="center_vertical"
        android:layout_height="?attr/listPreferredItemHeight"
        android:orientation="vertical">

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android version name"
            android:textColor="@color/primary_text_default_material_light"
            android:textSize="@dimen/abc_text_size_subhead_material" />

        <TextView
            android:id="@+id/listitem_subname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Test"
            android:paddingTop="3dp"
            android:textColor="@color/secondary_text_default_material_light"
            android:textSize="@dimen/abc_text_size_caption_material" />
    </LinearLayout>

</android.support.v7.widget.CardView>


 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_elevated"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <!-- Menambah effect shadow di toolbar -->
    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="@drawable/shadow" />


</LinearLayout>

• MainActivity.java 
• ItemController.java
• MyRecyclerAdapter.java 

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends AppCompatActivity {

    //Variable
    Toolbar toolbar;
    RecyclerView rv;
    MyRecyclerAdapter adapter;
    CardView cv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Layout
        setContentView(R.layout.activity_main);

        //Toolbar
        toolbar = (Toolbar) findViewById(R.id.toolbar_elevated);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }

        toolbar.setTitle("");

        //Cardview
        cv = (CardView) findViewById(R.id.cardlist_item);
        rv = (RecyclerView) findViewById(R.id.home_recyclerview);

        rv.setHasFixedSize(true);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setItemAnimator(new DefaultItemAnimator());

        //Adapter
        if (adapter == null) {
            adapter = new MyRecyclerAdapter(this);
            rv.setAdapter(adapter);
        }

        final Context context = this;
    }

    //Menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class ItemController extends RecyclerView.ViewHolder implements View.OnClickListener {

    //Variable
    CardView cardItemLayout;
    TextView title;
    TextView subTitle;

    public ItemController(View itemView) {
        super(itemView);

        //set id
        cardItemLayout = (CardView) itemView.findViewById(R.id.cardlist_item);
        title = (TextView) itemView.findViewById(R.id.listitem_name);
        subTitle = (TextView) itemView.findViewById(R.id.listitem_subname);

        //onClick
        itemView.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //tampilkan toas ketika click
        Toast.makeText(v.getContext(),
                String.format("Position %d", getAdapterPosition()),
                Toast.LENGTH_SHORT).show();
    }
}

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

import java.util.ArrayList;
import java.util.List;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter {

    Context context;
    List versionModels;

    public static List titleOs = new ArrayList();
    public static List osSubList = new ArrayList();

    //set item list
    public void setCardList(Context context) {
        String[] listArray = context.getResources().getStringArray(R.array.os_version);
        String[] subTitleArray = context.getResources().getStringArray(R.array.os_sub_version);
        for (int i = 0; i < listArray.length; ++i) {
            titleOs.add(listArray[i]);
            osSubList.add(subTitleArray[i]);
        }
    }

    public MyRecyclerAdapter(Context context) {
        this.context = context;
        setCardList(context);
    }


    public MyRecyclerAdapter(List versionModels) {
        this.versionModels = versionModels;

    }

    @Override
    public ItemController onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_recycle, viewGroup, false);
        ItemController viewHolder = new ItemController(view);
        return viewHolder;
    }


    @Override
    public void onBindViewHolder(ItemController versionViewHolder, int i) {
        versionViewHolder.title.setText(titleOs.get(i));
        versionViewHolder.subTitle.setText(osSubList.get(i));

    }

    @Override
    public int getItemCount() {
        return titleOs == null ? 0 : titleOs.size();
    }


}

Run project

Selesai