Tutorial Membuat Tampilan Aplikasi E-Commerce dengan Android Studio

Azhar Rivaldi    12/01/2019    Tutorial Android Studio    31 comments   

Baca Juga

Tutorial Membuat Tampilan Aplikasi E-Commerce

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Tampilan Aplikasi E-Commerce dengan Android Studio. Ini hanya sebagai template saja, untuk fungsi klik dari item yang tersedia di dalamnya belum ada. Jadi, silahkan kalian kembangkan lagi ya😁

Data-data yang saya tampilkan itu dari aplikasi Bukalapak berupa file JSON. File JSON tersebut berisi semua gambar-gambar yang akan ditampilkan di menu utama. Untuk Image Slider-nya saya ambil dari aplikasi Lazada. Jika kalian ingin langsung mengunduh Source Code-nya, silahkan langsung ke link Github saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

Untuk kalian yang ingin melihat hasil aplikasinya, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Tambahkan beberapa Library pada build.gradle :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'com.google.android.material:material:1.0.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
    implementation 'com.github.smarteist:autoimageslider:1.3.2'
    implementation 'com.github.bumptech.glide:glide:4.10.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'
}

2. Untuk Source Java-nya, kalian bisa lihat dibawah ini :

MainActivity.java
Sebagai Source yang memanggil semua Class untuk menampilkan data di menu utama. Coding-nya DISINI.

ItemGridAdapter.java
Sebagai adapter untuk menampilkan data dengan tampilan Grid. Coding-nya DISINI.

ProductAdapter.java
Sebagai adapter yang berisi semua produk yang ingin ditampilkan. Coding-nya DISINI.

SliderImageAdapter.java
Sebagai adapter pada Image Slider. Coding-nya DISINI.

CategoryModel.java
Sebagai model untuk menampilkan kategori yang tersedia. Coding-nya DISINI.

ProductModel.java
Sebagai model untuk menampilkan produk dari file JSON. Coding-nya DISINI.

Constant.java
Sebagai Class yang berisi kategori dan data yang akan dipanggil. Coding-nya DISINI.

3. Berikutnya adalah Source XML-nya, kalian bisa lihat dibawah ini :

activity_main.xml
Sebagai layout untuk menampilkan data di menu utama. Coding-nya DISINI.

content_main.xml
Sebagai layout yang include ke dalam activity_main.xml untuk menampilkan data. Coding-nya DISINI.

image_slider_myshop.xml
Sebagai layout yang menampilkan Image Slider. Coding-nya DISINI.

item_card.xml
Sebagai layout yang menampilkan data dalam bentuk List. Coding-nya DISINI.

item_grid.xml
Sebagai layout yang menampilkan data dalam bentuk Grid. Coding-nya DISINI.

item_product.xml
Sebagai layout yang menampilkan data produk dari adapter. Coding-nya DISINI.

main_header.xml
Sebagai layout yang include ke dalam activity_main.xml untuk menampilkan toolbar.xml dan Image Slider. Coding-nya DISINI.

main_image_slider.xml
Sebagai sama seperti image_slider_myshop.xml, layout ini menampilkan Image Slider. Coding-nya DISINI.

navigation_bar.xml
Sebagai layout yang berfungsi untuk membuat Tab yang berisi beberapa menu. Coding-nya DISINI.

product_horizontal.xml
Sebagai layout yang menampilkan data produk yang bisa di geser secara horizontal. Coding-nya DISINI.

toolbar.xml
Sebagai layout yang berfungsi untuk menampilkan Search dan menu Shop. Coding-nya DISINI.

4. Jika semua sudah selesai, kalian Run. Jika 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 Membuat Tampilan Aplikasi E-Commerce dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_