Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio
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.
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.
activity_main.xml (berfungsi menampilkan data di menu utama)
Jangan lupa kunjungi maswijaba.my.id untuk artikel bermanfaat lainnya.
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.<?xml version="1.0" encoding="utf-8"?>content_main.xml (berfungsi menampilkan data coding dari activity_main.xml)
<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>
<?xml version="1.0" encoding="utf-8"?>image_slider_myshop.xml (berfungsi menampilkan image slider)
<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>
<?xml version="1.0" encoding="utf-8"?>item_card.xml (untuk menampilkan data dalam bentuk list)
<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>
<?xml version="1.0" encoding="utf-8"?>item_grid.xml (untuk menampilkan data berbentuk grid)
<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 >"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#4CCC14"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>item_product.xml (untuk menampilkan data produk dari adapter)
<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>
<?xml version="1.0" encoding="utf-8"?>main_header.xml (untuk menampilkan toolbar.xml dan image slider)
<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>
<?xml version="1.0" encoding="utf-8"?>main_image_slider.xml (untuk menampilkan image slider)
<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>
<?xml version="1.0" encoding="utf-8"?>navigation_bar.xml (untuk membuat tab berisi beberapa menu)
<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>
<?xml version="1.0" encoding="utf-8"?>product_horizontal.xml (untuk menampilkan data produk yang bisa digeser)
<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>
<?xml version="1.0" encoding="utf-8"?>toolbar.xml (untuk menampilkan search dan menu)
<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>
<?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;ItemGridAdapter.java (berfungsi untuk menampilkan data dengan tampilan grid)
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;
}
}
package com.wijaba.myshop.adapter;ProductAdapter.java (berisi semua produk yang ingin ditampilkan)
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);
}
}
}
package com.wijaba.myshop.adapter;SliderImageAdapter.java (sebagai adapter pada image slider)
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;
}
}
package com.wijaba.myshop.adapter;CategoryModel.java (untuk menampilkan kategori yang ada)
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;
}
}
}
package com.wijaba.myshop.model;ProductModel.java (untuk menampilkan produk dari file JSON)
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;
}
}
package com.wijaba.myshop.model;Constant.java (class kategori dan data yang akan dipanggil)
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;
}
}
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.
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:
Link 1 / Link 2
Link 1 / Link 2
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.
Post a Comment for "Cara Membuat Aplikasi Android E-Commerce Seperti Bukalapak & Lazada Menggunakan Android Studio"