Menampilkan Data Menggunakan RecyclerView (Firebase) Part 1

Hello sobat, pada part 1 ini saya akan memberikan tutorial bagaimana cara menampilkan data di recyclerview dengan menggunakan firebase real time database ini adalah salah satu fitur dari firebase, Jadi firebase real time databases merupakan sebuah NoSQL databases yang dapat diakses secara real time oleh user dan hebatnya lagi dapat menyimpan data secara lokal tanpa terkoneksi internet atau lebih jelasnya secara ofline, kemudian saat terkoneksi internet atau dalam keadaan online akan melakukan sync atau singkronisasi data, untuk lebih memahaminya lagi saya akan memberikan langkah-langkah dalam pembuatan aplikasi ini.

Firebase

Membuat akun firebase, daftar disini

Jika sudah melakukan pendaftar buat aplikasi baru untuk langkah-langkahnya dapat sobat baca pada dokumentasi firebase disini

Gradle

Menambahkan library firebase dan pendukung lainnya pada gradle aplikasi

    compile 'com.android.support:design:25.3.1' 
    compile 'com.firebase:firebase-client-android:2.4.0' 
    compile 'com.jakewharton:butterknife:7.0.1' 
    compile 'com.google.firebase:firebase-core:9.2.1' 
    compile 'com.google.firebase:firebase-database:9.2.1' 
    compile 'com.android.support:cardview-v7:25.3.1'

Manifest

Menambahkan uses permission pada manifest

<uses-permission android:name="android.permission.INTERNET" /> 

Design Layout

Membuat design layout dengan struktur

• Masukan code xml pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 
 
    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true" 
        android:background="?attr/colorPrimary" 
        android:elevation="6dp" 
        android:minHeight="?attr/actionBarSize" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
 
    <android.support.design.widget.TabLayout 
        android:id="@+id/tab_layout" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/toolbar" 
        android:background="?attr/colorPrimary" 
        android:elevation="6dp" 
        android:minHeight="?attr/actionBarSize" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 
 
    <android.support.v4.view.ViewPager 
        android:id="@+id/pager" 
        android:layout_width="match_parent" 
        android:layout_height="fill_parent" 
        android:layout_below="@id/tab_layout" /> 
</RelativeLayout> 

• Masukan code xml pada fragmen_siswa.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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="match_parent" 
    android:orientation="vertical" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 
 
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:alpha="0.2" 
        android:background="@color/colorAccent" /> 
 
    <android.support.v7.widget.RecyclerView 
        android:id="@+id/rvSiswa" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" /> 
 
</RelativeLayout>

• Terakhir masukan code xml pada model.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 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:layout_marginBottom="8dp" 
    android:layout_margin="10dp" 
    app:cardCornerRadius="5dp" 
    app:cardElevation="3dp"> 
 
    <RelativeLayout 
        android:padding="20dp" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 
 
        <RelativeLayout 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_centerInParent="true"> 
 
            <TextView 
                android:textColor="@android:color/black" 
                android:id="@+id/NIS" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:text="NIS" /> 
 
            <TextView 
                android:layout_marginTop="10dp" 
                android:id="@+id/NAMA" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:layout_below="@id/NIS" 
                android:text="NAMA" /> 
 
        </RelativeLayout> 
    </RelativeLayout> 
</android.support.v7.widget.CardView>

Package Java

Membuat package dari setiap class dengan struktur