Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio

maswijaba.my.id

maswijaba.my.id - Assalamualaikum wr.wb. Puji syukur kita bisa dipertemukan lagi di kesempatan kali ini, semoga semuanya sehat-sehat ya. Pada kesempatan kali ini saya akan membahas bagaimana Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio.


Tutorial sederhana ini dirasa bisa membantu kalian untuk membuat aplikasi Android, walaupun tidak sempurna dan bisa dikatakan sederhana mudah-mudahan bermanfaat untuk kalian yang ingin belajar tentang Android dan tentunya gratis.

Aplikasi ini di desain dengan sedemikian rupa dan pastinya untuk pemula sangat mudah untuk mempelajarinya. Aplikasi E-Commerce ini merupakan template dari aplikasi Bukalapak yang berupa file JSON. File JSON berupa gambar-gambar yang akan tampil di menu utama.

Sedangkan image slider dari aplikasi Lazada.

Aplikasi ini sangat disarankan untuk membuat tugas Android sebagai referensi kalian untuk tugas-tugas mobile, buat tugas akhir atau skripsi juga tidak apa-apa asalkan kalian memperbaharuinya (tambahkan yang belum ada).

Selanjutnya kita masuk ke cara pengaplikasiannya dengan mengikuti step-step di bawah ini.

1. Buat Project Lalu tambahkan Libary 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. Buat desainnya berupa file berekstensi .xml 

Buat dan isi skripnya seperti dibawah ini.

activity_main.xml (berfungsi menampilkan data di menu utama)
<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

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

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

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

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

            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/colorPrimary"
            app:fabAlignmentMode="center"
            app:fabCradleRoundedCornerRadius="50dp"
            app:hideOnScroll="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="55.0dip"
                android:layout_gravity="bottom"
                android:orientation="horizontal">

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

            </LinearLayout>

        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:elevation="4dp"
            android:tint="@android:color/white"
            app:fabSize="normal"
            app:layout_anchor="@+id/navigation"
            app:srcCompat="@drawable/ic_menu" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</LinearLayout>
content_main.xml (berfungsi menampilkan data coding dari activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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_below="@+id/main_header"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/mainLinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" />

</androidx.core.widget.NestedScrollView>
image_slider_myshop.xml (berfungsi menampilkan image slider)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="vertical">

    <ImageView
        android:id="@+id/iv_auto_image_slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <ImageView
        android:id="@+id/iv_gif_container"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="bottom|start"
        android:layout_margin="50dp" />

    <FrameLayout
        android:id="@+id/fl_shadow_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/bg_overlay">

        <TextView
            android:id="@+id/tv_auto_image_slider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="25dp"
            android:padding="6dp"
            android:textColor="#FFF"
            android:textSize="18sp" />

    </FrameLayout>

</FrameLayout>
item_card.xml (untuk menampilkan data dalam bentuk list)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#00000000" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/cardTextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:text="Gaya Hidup"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#454545"
            android:textStyle="bold" />

        <View
            android:layout_width="35dp"
            android:layout_height="3dp"
            android:layout_marginLeft="5dp"
            android:background="#ED2626" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/cardListView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:overScrollMode="never" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="Lihat Semua &gt;"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#4CCC14"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>
item_grid.xml (untuk menampilkan data berbentuk grid)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:orientation="horizontal"
    android:paddingLeft="5dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

    <ImageView
        android:id="@+id/itemcardImageView1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:antialias="true"
        android:src="@drawable/ic_cat1" />

    <TextView
        android:id="@+id/itemcardTextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="7dp"
        android:layout_toRightOf="@id/itemcardImageView1"
        android:text="Produk Lainnya"
        android:textSize="20sp" />

    <View
        android:id="@+id/itemcardView1"
        android:layout_width="1dp"
        android:layout_height="35dp"
        android:layout_alignParentRight="true"
        android:background="#CECECE" />

</RelativeLayout>
item_product.xml (untuk menampilkan data produk dari adapter)
<?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="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#FFFFFF">

        <com.loopj.android.image.SmartImageView
            android:id="@+id/itemproductImageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp" />

        <TextView
            android:id="@+id/itemproductTextViewDisc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|end"
            android:layout_margin="10dp"
            android:background="@drawable/box_discount"
            android:padding="5dp"
            android:text="25%"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#FFFFFF" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#FFFFFF"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:id="@+id/itemproductTextViewName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:maxLines="2"
            android:minLines="2"
            android:text="Raspberry Pi 3 Quad-Core 1GB RAM"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#3E3E3E" />

        <TextView
            android:id="@+id/itemproductTextViewPrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rp 540.000"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#E53D0C"
            android:textStyle="bold" />


        <TextView
            android:id="@+id/itemproductTextViewPold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rp 610.000"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#919191" />

        <RatingBar
            android:id="@+id/itemproductRatingBar1"
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:backgroundTint="@android:color/black"
            android:numStars="5"
            android:progressTint="#ffd700"
            android:rating="0"
            android:secondaryProgressTint="#FFF6B0"
            android:stepSize="0.5" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/ic_store_black" />

                <TextView
                    android:id="@+id/itemproductTextViewStore"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="Elektron Robotic"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#2F2F2F" />

            </LinearLayout>

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>
main_header.xml (untuk menampilkan toolbar.xml dan image slider)
<?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:id="@+id/main_header"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/greeting_img"
        android:layout_width="match_parent"
        android:layout_height="180dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/shape"
            android:gravity="center"
            android:orientation="vertical" />

    </FrameLayout>

    <TextView
        android:id="@+id/greeting_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="14dp" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/greeting_text"
        android:layout_alignParentBottom="true">

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

    </RelativeLayout>

</RelativeLayout>
main_image_slider.xml (untuk menampilkan image slider)
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mpm_slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/appBarLayout"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    app:cardCornerRadius="10sp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <com.smarteist.autoimageslider.SliderView
        android:id="@+id/imageSlider"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:sliderAnimationDuration="600"
        app:sliderAutoCycleEnabled="true"
        app:sliderCircularHandlerEnabled="true"
        app:sliderIndicatorAnimationDuration="600"
        app:sliderIndicatorGravity="right|bottom"
        app:sliderIndicatorMargin="15dp"
        app:sliderIndicatorOrientation="horizontal"
        app:sliderIndicatorPadding="3dp"
        app:sliderIndicatorRadius="2dp"
        app:sliderIndicatorSelectedColor="#5A5A5A"
        app:sliderIndicatorUnselectedColor="#FFF"
        app:sliderScrollTimeInSec="4"
        app:sliderStartAutoCycle="true" />

</androidx.cardview.widget.CardView>
navigation_bar.xml (untuk membuat tab berisi beberapa menu)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="55.0dip"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:id="@+id/nav_home"
        android:layout_marginTop="2dp"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:tint="@color/colorWhite"
            android:layout_width="36.0dip"
            android:layout_height="36.0dip"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_home" />

        <TextView
            android:text="Home"
            android:layout_gravity="center"
            android:textSize="10sp"
            android:textColor="@color/colorWhite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_marginTop="2.0dip"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:tint="@color/colorWhite"
            android:id="@+id/nav_history"
            android:layout_width="36.0dip"
            android:layout_height="36.0dip"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_feed" />

        <TextView
            android:text="Feeds"
            android:layout_gravity="center"
            android:textSize="10sp"
            android:textColor="@color/colorWhite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0.0dip"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="invisible" />

    <LinearLayout
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_marginTop="3.0dip"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:tint="@color/colorWhite"
            android:id="@+id/nav_help"
            android:layout_width="34.0dip"
            android:layout_height="34.0dip"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_notification" />

        <TextView
            android:text="Notification"
            android:layout_gravity="center"
            android:textSize="10sp"
            android:textColor="@color/colorWhite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_marginTop="3.0dip"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:tint="@color/colorWhite"
            android:id="@+id/nav_profile"
            android:layout_width="34.0dip"
            android:layout_height="34.0dip"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_account" />

        <TextView
            android:text="Profile"
            android:layout_gravity="center"
            android:textSize="10sp"
            android:textColor="@color/colorWhite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</LinearLayout>
product_horizontal.xml (untuk menampilkan data produk yang bisa digeser)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#00000000" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/producthorizontalTextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:text="Gaya Hidup"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#454545"
            android:textStyle="bold" />

        <View
            android:layout_width="35dp"
            android:layout_height="3dp"
            android:layout_marginLeft="5dp"
            android:background="#ED2626" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/producthorizontalRecyclerView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:overScrollMode="never" />

    </LinearLayout>

</LinearLayout>
toolbar.xml (untuk menampilkan search dan menu)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <RelativeLayout
                android:id="@+id/mainactivityRelativeLayout1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/search_box"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:padding="5dp">

                <EditText
                    android:id="@+id/search_box"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:drawableRight="@drawable/ic_search"
                    android:drawableTint="@color/colorPrimary"
                    android:ems="10"
                    android:hint="  Cari Apa?"
                    android:nextFocusLeft="@id/search_box"
                    android:nextFocusUp="@id/search_box"
                    android:singleLine="true"
                    android:textColorHint="@color/colorPrimary"
                    android:textSize="18sp" />

            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>

    </LinearLayout>

</FrameLayout>

3. Buat desainnya berupa file berekstensi .java

MainActivity.java (berfungsi untuk menampilkan data di menu utama)
package com.wijaba.myshop.activities;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.graphics.drawable.DrawableCompat;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.wijaba.myshop.R;
import com.wijaba.myshop.adapter.ItemGridAdapter;
import com.wijaba.myshop.adapter.ProductAdapter;
import com.wijaba.myshop.adapter.SliderImageAdapter;
import com.wijaba.myshop.model.CategoryModel;
import com.wijaba.myshop.model.ProductModel;
import com.wijaba.myshop.util.Constant;
import com.smarteist.autoimageslider.IndicatorAnimations;
import com.smarteist.autoimageslider.IndicatorView.draw.controller.DrawController;
import com.smarteist.autoimageslider.SliderAnimations;
import com.smarteist.autoimageslider.SliderView;

import org.json.JSONArray;
import org.json.JSONObject;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    SliderView sliderMyshop;
    TextView greetText;
    private LinearLayout llroot;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = findViewById(R.id.toolbar);
        sliderMyshop = findViewById(R.id.imageSlider);
        greetText = findViewById(R.id.greeting_text);

        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        llroot = findViewById(R.id.mainLinearLayout1);

        loadjson(llroot, "Terlaris", 0, 25);
        for (String cardtitle : Constant.cards.keySet()) {
            View card = getLayoutInflater().inflate(R.layout.item_card, null);
            RecyclerView rv = card.findViewById(R.id.cardListView1);
            rv.setNestedScrollingEnabled(false);
            TextView tv = card.findViewById(R.id.cardTextView1);
            tv.setText(cardtitle);
            Map<Integer, String> cats = Constant.cards.get(cardtitle);
            List<CategoryModel> datacat = new ArrayList<CategoryModel>();
            for (int ic : cats.keySet()) {
                datacat.add(new CategoryModel(ic, ic, cats.get(ic), false));
            }
            rv.addItemDecoration(new SimpleDividerItemDecoration(this));
            rv.setAdapter(new ItemGridAdapter(datacat));
            rv.setLayoutManager(new GridLayoutManager(this, 2));

            llroot.addView(card);
        }
        loadjson(llroot, "Produk Terbaru", 26, 0);

        final SliderImageAdapter sliderImageAdapter = new SliderImageAdapter(this);
        sliderImageAdapter.setCount(4);
        sliderMyshop.setSliderAdapter(sliderImageAdapter);
        sliderMyshop.setIndicatorAnimation(IndicatorAnimations.WORM); //set indicator animation by using SliderLayout.IndicatorAnimations. :WORM or THIN_WORM or COLOR or DROP or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP!!
        sliderMyshop.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
        sliderMyshop.setIndicatorSelectedColor(Color.WHITE);
        sliderMyshop.setIndicatorUnselectedColor(Color.GRAY);
        sliderMyshop.startAutoCycle();
        sliderMyshop.setOnIndicatorClickListener(new DrawController.ClickListener() {
            @Override
            public void onIndicatorClicked(int position) {
                sliderMyshop.setCurrentPagePosition(position);
            }
        });

        greeting();

    }

    private void greeting() {
        Calendar calendar = Calendar.getInstance();
        int timeOfDay = calendar.get(Calendar.HOUR_OF_DAY);

        if (timeOfDay >= 0 && timeOfDay < 12) {
            greetText.setText(getString(R.string.salam_pagi));
        } else if (timeOfDay >= 12 && timeOfDay < 15) {
            greetText.setText(getString(R.string.salam_siang));
        } else if (timeOfDay >= 15 && timeOfDay < 18) {
            greetText.setText(getString(R.string.salam_sore));
        } else if (timeOfDay >= 18 && timeOfDay < 24) {
            greetText.setText(getString(R.string.salam_malam));
        }
    }

    private void loadjson(LinearLayout root, String title, int startpos, int endpos) {
        try {
            Resources res = getResources();
            InputStream in_s = res.openRawResource(R.raw.bldata);
            byte[] b = new byte[in_s.available()];
            in_s.read(b);
            View v = getLayoutInflater().inflate(R.layout.product_horizontal, null);
            RecyclerView rv = v.findViewById(R.id.producthorizontalRecyclerView1);
            TextView tv = v.findViewById(R.id.producthorizontalTextView1);
            tv.setText(title);
            List<ProductModel> pdata = new ArrayList<ProductModel>();
            JSONArray jdata = new JSONObject(new String(b)).getJSONArray("products");
            for (int i = startpos; i < (endpos == 0 ? jdata.length() : endpos); i++) {
                JSONObject p = jdata.getJSONObject(i);
                String name = p.getString("name");
                long price = p.getLong("price");
                long oprice = price - 1000;
                String store = p.getString("seller_name");
                String img = p.getJSONArray("images").getString(0);
                float rating = Float.parseFloat(p.getJSONObject("rating").getString("average_rate") + "f");
                pdata.add(new ProductModel(name, store, price, oprice, img, rating, 10));
            }
            rv.setAdapter(new ProductAdapter(pdata, this));
            rv.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));
            rv.setNestedScrollingEnabled(false);
            rv.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, true));
            rv.scrollToPosition(rv.getAdapter().getItemCount() - 1);
            root.addView(v);
        } catch (Exception e) {
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration {
        private Drawable mDivider;

        public SimpleDividerItemDecoration(Context context) {
            mDivider = context.getResources().getDrawable(R.drawable.line_divider);
        }

        @Override
        public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
            int left = parent.getPaddingLeft();
            int right = parent.getWidth() - parent.getPaddingRight();
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
                int top = child.getBottom() + params.bottomMargin;
                int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    }

    public static Drawable setTint(Drawable d, int color) {
        Drawable wrappedDrawable = DrawableCompat.wrap(d);
        DrawableCompat.setTint(wrappedDrawable, color);
        return wrappedDrawable;
    }
}
ItemGridAdapter.java (berfungsi untuk menampilkan data dengan tampilan grid)
package com.wijaba.myshop.adapter;

import android.annotation.SuppressLint;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import com.wijaba.myshop.R;
import com.wijaba.myshop.model.CategoryModel;

import java.util.List;

public class ItemGridAdapter extends RecyclerView.Adapter<ItemGridAdapter.Holdr> {
    List<CategoryModel> data;

    public ItemGridAdapter(List<CategoryModel> data) {
        this.data = data;
    }

    @SuppressLint("InflateParams")
    @Override
    public Holdr onCreateViewHolder(ViewGroup p1, int p2) {
        return new Holdr(LayoutInflater.from(p1.getContext()).inflate(R.layout.item_grid, null));
    }

    @Override
    public void onBindViewHolder(Holdr holdr, int pos) {
        CategoryModel cat = data.get(pos);
        holdr.title.setText(cat.title);
        holdr.ic_cat.setImageResource(cat.icres);
        if (pos % 2 == 1) {
            holdr.divider.setVisibility(View.GONE);
        } else holdr.divider.setVisibility(View.VISIBLE);
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    public class Holdr extends RecyclerView.ViewHolder {
        TextView title;
        ImageView ic_cat;
        View divider;

        public Holdr(View view) {
            super(view);
            title = view.findViewById(R.id.itemcardTextView1);
            ic_cat = view.findViewById(R.id.itemcardImageView1);
            divider = view.findViewById(R.id.itemcardView1);
        }
    }
}
ProductAdapter.java (berisi semua produk yang ingin ditampilkan)
package com.wijaba.myshop.adapter;

import android.content.Context;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RatingBar;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import com.wijaba.myshop.R;
import com.wijaba.myshop.model.ProductModel;
import com.loopj.android.image.SmartImageView;

import java.text.NumberFormat;
import java.util.ArrayList;
import java.util.List;

public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.Holdr> {
    List<ProductModel> data = new ArrayList<ProductModel>();

    private float mWidth, mHeight;

    public ProductAdapter(List<ProductModel> data, Context ctx) {
        this.data = data;
        DisplayMetrics dm = ctx.getResources().getDisplayMetrics();
        mWidth = dm.widthPixels / ctx.getResources().getDimension(R.dimen.grid_width);
        mHeight = dm.heightPixels / ctx.getResources().getDimension(R.dimen.grid_height);
    }

    @Override
    public Holdr onCreateViewHolder(ViewGroup p1, int p2) {
        return new Holdr(LayoutInflater.from(p1.getContext()).inflate(R.layout.item_product, null));
    }

    @Override
    public void onBindViewHolder(Holdr holdr, int pos) {
        ProductModel cat = data.get(pos);
        holdr.name.setText(cat.name);
        holdr.img.setImageUrl(cat.img);
        holdr.store.setText(cat.store);
        holdr.price.setText(_priceFormat("" + cat.price));
        holdr.priceold.setText(_priceFormat("" + cat.price_old));
        holdr.priceold.setPaintFlags(holdr.priceold.getPaintFlags() | android.graphics.Paint.STRIKE_THRU_TEXT_FLAG);
        holdr.ratingbar.setRating(cat.rating);
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    public class Holdr extends RecyclerView.ViewHolder {
        TextView name, price, priceold, discount, store;
        SmartImageView img;
        RatingBar ratingbar;

        public Holdr(final View view) {
            super(view);
            view.post(new Runnable() {
                @Override
                public void run() {
                    ViewGroup.LayoutParams lp = view.getLayoutParams();
                    lp.height = (int) mHeight;
                    lp.width = (int) mWidth;
                    view.setLayoutParams(lp);
                }
            });
            name = view.findViewById(R.id.itemproductTextViewName);
            price = view.findViewById(R.id.itemproductTextViewPrice);
            priceold = view.findViewById(R.id.itemproductTextViewPold);
            discount = view.findViewById(R.id.itemproductTextViewDisc);
            store = view.findViewById(R.id.itemproductTextViewStore);
            img = view.findViewById(R.id.itemproductImageView1);
            ratingbar = view.findViewById(R.id.itemproductRatingBar1);
        }
    }

    private static String _priceFormat(String s) {
        double parsed = Double.parseDouble(s);
        String formatted = NumberFormat.getCurrencyInstance().format(parsed);
        return formatted;
    }
}
SliderImageAdapter.java (sebagai adapter pada image slider)
package com.wijaba.myshop.adapter;

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.wijaba.myshop.R;
import com.bumptech.glide.Glide;
import com.smarteist.autoimageslider.SliderViewAdapter;

public class SliderImageAdapter extends SliderViewAdapter<SliderImageAdapter.SliderAdapterVH> {

    private Context context;
    private int mCount;

    public SliderImageAdapter(Context context) {
        this.context = context;
    }

    public void setCount(int count) {
        this.mCount = count;
    }

    @Override
    public SliderAdapterVH onCreateViewHolder(ViewGroup parent) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_myshop, null);
        return new SliderAdapterVH(inflate);
    }

    @Override
    public void onBindViewHolder(SliderAdapterVH viewHolder, final int position) {

        viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (position) {
                    case 0:
                        Intent browserIntent_1 = new Intent(
                                Intent.ACTION_VIEW,
                                Uri.parse("https://github.com/Wijaba"));
                        context.startActivity(browserIntent_1);
                        break;
                    case 1:
                        Intent browserIntent_2 = new Intent(
                                Intent.ACTION_VIEW,
                                Uri.parse("https://github.com/Wijaba"));
                        context.startActivity(browserIntent_2);
                        break;
                    case 2:
                        Intent browserIntent_3 = new Intent(
                                Intent.ACTION_VIEW,
                                Uri.parse("https://github.com/Wijaba"));
                        context.startActivity(browserIntent_3);
                        break;
                    case 3:
                        Intent browserIntent_4 = new Intent(
                                Intent.ACTION_VIEW,
                                Uri.parse("https://github.com/Wijaba"));
                        context.startActivity(browserIntent_4);
                        break;
                }
            }
        });

        switch (position) {
            case 0:
                Glide.with(viewHolder.itemView)
                        .load("https://laz-img-cdn.alicdn.com/images/ims-web/TB1pHADjBr0gK0jSZFnXXbRRXXa.jpg_1200x1200.jpg")
                        .fitCenter()
                        .into(viewHolder.imageViewBackground);
                break;
            case 1:
                Glide.with(viewHolder.itemView)
                        .load("https://laz-img-cdn.alicdn.com/images/ims-web/TB1m8REjrj1gK0jSZFuXXcrHpXa.jpg_1200x1200Q100.jpg")
                        .fitCenter()
                        .into(viewHolder.imageViewBackground);
                break;
            case 2:
                Glide.with(viewHolder.itemView)
                        .load("https://laz-img-cdn.alicdn.com/images/ims-web/TB1Hhz4jBr0gK0jSZFnXXbRRXXa.jpg_1200x1200Q100.jpg")
                        .fitCenter()
                        .into(viewHolder.imageViewBackground);
                break;
            case 3:
                Glide.with(viewHolder.itemView)
                        .load("https://laz-img-cdn.alicdn.com/images/ims-web/TB1m8REjrj1gK0jSZFuXXcrHpXa.jpg_1200x1200Q100.jpg")
                        .fitCenter()
                        .into(viewHolder.imageViewBackground);
                break;
        }
    }

    public int getCount() {
        //slider view count could be dynamic size
        return mCount;
    }

    class SliderAdapterVH extends SliderViewAdapter.ViewHolder {

        View itemView;
        ImageView imageViewBackground;
        ImageView imageGifContainer;
        TextView textViewDescription;

        public SliderAdapterVH(View itemView) {
            super(itemView);
            imageViewBackground = itemView.findViewById(R.id.iv_auto_image_slider);
            imageGifContainer = itemView.findViewById(R.id.iv_gif_container);
            textViewDescription = itemView.findViewById(R.id.tv_auto_image_slider);
            this.itemView = itemView;
        }
    }
}
CategoryModel.java (untuk menampilkan kategori yang ada)
package com.wijaba.myshop.model;

public class CategoryModel {
    public int catid, icres;
    public String title;
    public boolean isBig;

    public CategoryModel(int catid, int icres, String title, boolean isBig) {
        this.catid = catid;
        this.icres = icres;
        this.title = title;
        this.isBig = isBig;
    }
}
ProductModel.java (untuk menampilkan produk dari file JSON)
package com.wijaba.myshop.model;

public class ProductModel {
    public String name, store, img;
    public long price, price_old;
    public int discount;
    public float rating;

    public ProductModel(String name, String store, long price, long price_old, String img, float rating, int discount) {
        this.name = name;
        this.store = store;
        this.price = price;
        this.price_old = price_old;
        this.img = img;
        this.rating = rating;
        this.discount = discount;
    }
}
Constant.java (class kategori dan data yang akan dipanggil)
package com.wijaba.myshop.util;

import com.wijaba.myshop.R;

import java.util.HashMap;
import java.util.Map;

public class Constant {
    public static Map<Integer, String> _gayahidup = new HashMap<Integer, String>() {{
        put(R.drawable.ic_cat8, "Fashion Wanita");
        put(R.drawable.ic_cat11, "Fashion Pria");
        put(R.drawable.ic_cat19, "Fashion Muslim");
        put(R.drawable.ic_cat4, "Fashion Anak");
        put(R.drawable.ic_cat2, "Kecantikan");
        put(R.drawable.ic_cat24, "Rumah Tangga");
        put(R.drawable.ic_cat20, "Kesehatan");
        put(R.drawable.ic_cat33, "Olahraga");
        put(R.drawable.ic_cat22, "Otomotif");
        put(R.drawable.ic_cat18, "Dapur");
    }};
    public static Map<Integer, String> _teknologi = new HashMap<Integer, String>() {{
        put(R.drawable.ic_cat0, "Handphone & Tablet");
        put(R.drawable.ic_cat31, "Laptop & Aksesoris");
        put(R.drawable.ic_cat6, "Komputer & Aksesoris");
        put(R.drawable.ic_cat15, "Elektronik");
        put(R.drawable.ic_cat28, "Kamera");
        put(R.drawable.ic_cat34, "Software");
    }};
    public static Map<Integer, String> _catlain = new HashMap<Integer, String>() {{
        put(R.drawable.ic_cat3, "Mainan & Hobi");
        put(R.drawable.ic_cat37, "Makanan & Minuman");
        put(R.drawable.ic_cat14, "Ibu & Bayi");
        put(R.drawable.ic_cat16, "Souvenir, Kado & Hadiah");
        put(R.drawable.ic_cat5, "Office & Stationery");
        put(R.drawable.ic_cat22, "Buku");
        put(R.drawable.ic_cat23, "Film, Musik & Game");
        put(R.drawable.ic_cat1, "Produk Lainnya");
    }};
    public static Map<Integer, String> _pembayaran = new HashMap<Integer, String>() {{
        put(R.drawable.ic_cat25, "Saldo My Shop");
        put(R.drawable.ic_cat30, "BPJS");
        put(R.drawable.ic_cat13, "Pulsa");
        put(R.drawable.ic_cat36, "Voucher Game");
        put(R.drawable.ic_cat7, "Angsuran Kredit");
        put(R.drawable.ic_cat21, "Donasi");
        put(R.drawable.ic_cat17, "Pascabayar");
        put(R.drawable.ic_cat32, "Tiket Kereta Api");
        put(R.drawable.ic_cat10, "Listrik PLN");
        put(R.drawable.ic_cat29, "Paket Data");
        put(R.drawable.ic_cat9, "Kartu Kredit");
        put(R.drawable.ic_cat26, "Air PDAM");
        put(R.drawable.ic_cat27, "TV Kabel");
        put(R.drawable.ic_cat35, "Telepon");
    }};
    public static Map<String, Map<Integer, String>> cards = new HashMap<String, Map<Integer, String>>() {{
        put("Gaya Hidup", _gayahidup);
        put("Teknologi", _teknologi);
        put("Kategori Lain", _catlain);
        put("Pembayatan & Top Up", _pembayaran);
    }};
}

Setelah sudah mengikuti langkah-langkah diatas dengan baik, tinggal kalian Run saja. InsyaAllah akan berhasil seperti gambar dibawah ini.

maswijaba.my.id

Jika kalian mendapati error silahkan kalian cek kembali, jika sudah di cek masih error silahkan kalian berkomentar dibawah agar kita bisa diskusikan bersama.

Jika kalian ingin langsung source codenya tanpa tutorial diatas silahkan didownload disini.

Sekian tutorial Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio semoga bermanfaat. Dan jangan lupa membagikan artikel ini kepada teman-teman kalian yang ingin belajar membuat aplikasi Android sederhana, jangan pelit ilmu pokoknya.

Jangan lupa kunjungi maswijaba.my.id untuk artikel bermanfaat lainnya.

Post a Comment for "Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio"