Sunday, August 9, 2020

Tutorial Membuat Aplikasi Komik dengan Android Studio

Tutorial Membuat Aplikasi Komik dengan Android Studio
Tutorial Membuat Aplikasi Komik dengan Android Studio
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Komik dengan Android Studio.

Mungkin ini perdana saya membagikan tutorial membuat aplikasi komik sederhana ya, karena setelah saya telusuri di Google belum ada yang membuatkan tutorial serupa. Mungkin ada, tapi saya tidak menemukannya. Oh ya, untuk datanya saya ambil dari API yang dibuat oleh Febry Ardiansyah. Jadi, jika kalian rasa tutorial ini fiturnya kurang bisa kalian tambahkan dengan API lainnya dengan klik link Github-nya DISINI.

Disini saya hanya menampilkan Daftar Komik berdasarkan Page/Halaman, menampilkan Image Slider Komik Populer, menampilkan Genre Komik, menampilkan Detail Komik dan menampilkan Chapter yang berisi gambar-gambar layaknya komik sungguhan. Untuk kamu yang ingin langsung mencobanya, silahkan unduh melalui Github saya SOURCE CODE DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

Jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, 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. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya. Ingat, jangan langsung Run atau Copy Paste Source Code dari saya, pasti akan terjadi error jika beda versi Gradle dan beda versi Android Studionya.

2. Kemudian kamu import library Fast Android Networking untuk Rest API, CardSlider, ArcLayout dan Library CurveBottomBar ke gradle:
Source : build.gradle

3. Kamu tambahkan Permission Internet ke AndroidManifest.xml:
Source : AndroidManifest.xml

4. Buat Class Utama untuk menampilkan daftar komik yang kita ambil dari API dan beberapa menu Tab. Buat activity_main.xml, main_toolbar.xml dan MainActivity.java.
Source : activity_main.xml, main_toolbar.xml dan MainActivity.java

5. Buat Class Detail untuk menampilkan detail komik beserta jumlah chapter berdasarkan list komik yang kita klik di Class Utama. Buat activity_detail.xml, DetailGenreActivity.java dan DetailPopulerActivity.java
Source : activity_detail.xml, DetailGenreActivity.java dan DetailPopulerActivity.java

6. Buat Class List untuk menampilkan komik berdasarkan Genre. Buat activity_list_genre.xml dan ListGenreActivity.java.
Source : activity_list_genre.xml dan ListGenreActivity.java

7. Buat Class untuk menampilkan Chapter yang berisi gambar berdasarkan button yang kita pilih di menu Detail. Buat activity_chapter.xml dan ChapterActivity.java.
Source : activity_chapter.xml dan ChapterActivity.java

8. Buat Class Fragment untuk menampilkan Genre Komik. Buat fragment_genre.xml dan GenreFragment.java.
Source : fragment_genre.xml dan GenreFragment.java

9. Buat Class Fragment yang kedua untuk menampilkan daftar komik dengan Image Slider juga. Buat fragment_home.xml, main_header.xml dan HomeFragment.java
Source : fragment_home.xml, main_header.xml dan HomeFragment.java

10. Buat Class Adapter untuk menampilkan data ke Class Detail. Buat list_item_chapter.xml dan AdapterChapter.java.
Source : list_item_chapter.xml dan AdapterChapter.java

11. Buat Class Adapter untuk menampilkan data ke Class Fragment Genre. Buat list_item_genre.xml dan AdapterGenre.java.
Source : list_item_genre.xml dan AdapterGenre.java

12. Buat Class Adapter untuk menampilkan data ke Class Chapter. Buat list_item_detail_chapter.xml dan AdapterImageChapter.java.
Source : list_item_detail_chapter.xml dan AdapterImageChapter.java

13. Buat Class Adapter untuk menampilkan daftar komik ke Class Fragment Home dan List Genre. Buat list_item_komik.xml, AdapterKomik.java dan AdapterListGenre.java
Source : list_item_komik.xmlAdapterKomik.java dan AdapterListGenre.java

14. Buat Class Adapter Slider untuk menampilkan data ke Class Fragment Home. Buat list_item_slider.xml dan AdapterSlider.java.
Source : list_item_slider.xml dan AdapterSlider.java

15. Buat Class Model sebagai Class POJO. Buat ModelChapter.java, ModelGenre.java, ModelKomik.java dan ModelSlider.java.
Source : ModelChapter.java, ModelGenre.java, ModelKomik.java dan ModelSlider.java

16. Buat Folder Utils dan buat beberapa Class sebagai pelengkap dan konverter. Karena cukup banyak, langsung saja kalian Copy Paste DISINI.

17. Buat XML untuk Tab Menu. Buat menu_navigation.xml :
Source : menu_navigation.xml

18. Yang terakhir buat Class Api untuk mengambil endpoint. Buat ApiEndpoint.java :
Source : ApiEndpoint.java

19. Selesai dan coba 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.

Untuk hasilnya, nanti akan seperti ini :
Tutorial Membuat Aplikasi Komik dengan Android Studio
Tutorial Membuat Aplikasi Komik dengan Android Studio
Tutorial Membuat Aplikasi Komik dengan Android Studio
Tutorial Membuat Aplikasi Komik dengan Android Studio
Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Komik 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_

16 comments

  1. yg mau liat n download aplikasi bisa ke playstore melalui link di bawah ini. Thx for Bro Azhar

    https://play.google.com/store/apps/details?id=com.lhs.bacamanga

    ReplyDelete
  2. Gagal menampilkan data kenapa ya gan?

    ReplyDelete
  3. ada tulisan
    'com.github.IslamKhSh:CardSlider:1.0.1'
    saat di build kenapa ya itu hu?

    ReplyDelete
  4. misalkan manga nya udh update di aplikasi ny juga auto update apa harus update manual?

    ReplyDelete
  5. bikin yang versi terbaru dong bang dan cara masukkn komik kita sendiri hasil buatan kita sendiri

    ReplyDelete
    Replies
    1. maaf itu terlalu kompleks, mending saya buat jasa

      Delete
  6. bagian <com.akshay.library.CurveBottomBar kok ga bisa ya bang? merah dianya

    ReplyDelete

Silahkan tinggalkan komentar jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan. Gunakan bahasa yang bijak dan santun. Terima Kasih.
EmoticonEmoticon