1.

Thiết kế database
Loại sản Phẩm Thông tin sản phẩm
Id loại Sp(int) ID
Tên loại SP(varchar) Tên sp
Hình loại sp Giá
Hình
Mô tả
Id loại sản phẩm

2. Thiết kế giao diện

+ các thư viện cần dùng:
// đọc url hình ảnh từ internet về
compile 'com.squareup.picasso:picasso:2.5.2'
// đọc nội dung của url từ internet về
compile 'com.android.volley:volley:1.0.0'
//custom lại đẹp hơn
compile 'com.android.support:cardview-v7:25.3.1'
// thư viện của listview nhưng đẹp hơn
compile 'com.android.support:recyclerview-v7:25.3.1'
//custom lại đẹp hơn giao diện
compile 'com.android.support:design:25.1.1'
// Bản đồ
compile 'com.google.android.gms:play-services:10.2.0'
3. Tạo quảng cáo bằng actionViewFilipper và tạo thanh menu dọc
Main_activity.java

package com.example.storemobile;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ViewFlipper;

import com.google.android.material.navigation.NavigationView;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
ViewFlipper viewFlipper;
RecyclerView recyclerView_home;
NavigationView navigationView;
ListView listViewhome;
DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Anhxa();
 // cái toobar như header.
ActionBar();
ActionWiewFlipper();
}

private void ActionWiewFlipper() {

//có cấp phát dữ liệu thì mới có thể add.
ArrayList<String> mangquangcao = new ArrayList<>();
mangquangcao.add("https://cdn.tgdd.vn/Files/2018/10/25/1126836/mi-8-
lite_800x450.jpg");
mangquangcao.add("http://fptshop.com.vn/uploads/images/tin-
tuc/71408/Originals/Redmi-6-pro-1122.jpg");
mangquangcao.add("https://hoanghamobile.com/tin-tuc/wp-
content/uploads/2018/04/xiaomi-tung-video-quang-cao-mi-6x-voi-4-mau-sac-khac-
nhau-1.jpg");
mangquangcao.add("https://cellphones.com.vn/sforum/wp-
content/uploads/2018/09/ntoxnd0-950x513-600x324.jpg");
// chỉ nhận được imageView thôi chứ hk nhận URL
// do đó phải gán vào imageView.
//dùng hàm thư viện Picaso để đọc.
for(int i=0;i<mangquangcao.size();i++){
ImageView imageView = new ImageView((getApplicationContext()));

Picasso.with(getApplicationContext()).load(mangquangcao.get(i)).into(imageView
);
//canh vừa với viewflipper.
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
viewFlipper.addView(imageView);
}
//để viewflipper tự chạy.
viewFlipper.setFlipInterval(5000);
viewFlipper.setAutoStart(true);
//khởi tạo.
Animation animation_in =
AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_in_right);
Animation animation_out =
AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_out_right);
viewFlipper.setInAnimation(animation_in);
viewFlipper.setOutAnimation(animation_out);
}

private void ActionBar() {

setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// lấy icon trong toolbar
toolbar.setNavigationIcon(android.R.drawable.ic_menu_sort_by_size);
// click vào thì mở ra thanh menu
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//nhảy ra giữa
drawerLayout.openDrawer(GravityCompat.START);
}
});
}

private void Anhxa() {

drawerLayout = findViewById(R.id.DrawerLayout_home);
toolbar = findViewById(R.id.toolbar_home);
viewFlipper = findViewById(R.id.ViewFlipper_home);
recyclerView_home = findViewById(R.id.RecyclerView_home);
navigationView = findViewById(R.id.NavigationView_home);
listViewhome = findViewById(R.id.ListView_home);
}
}

Layout.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.storemobile.MainActivity">

<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/DrawerLayout_home"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar_home"
android:background="#0FF0DB"
app:title="Home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</androidx.appcompat.widget.Toolbar>

<ViewFlipper
android:background="#8033b5e5"
android:id="@+id/ViewFlipper_home"
android:layout_width="match_parent"
android:layout_height="200dp">
</ViewFlipper>

<LinearLayout
android:background="#0f0"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textStyle="bold"
android:textSize="20sp"
android:layout_margin="5dp"
android:textColor="#DD190A"
android:text="Sản Phẩm mới nhất"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/RecyclerView_home"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</LinearLayout>

<com.google.android.material.navigation.NavigationView
android:id="@+id/NavigationView_home"
android:layout_width="match_parent"
android:layout_gravity="start"
android:layout_height="match_parent">
<ListView
android:id="@+id/ListView_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

Right.xml
 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration ="2000"
android:fromXDelta="-100%"
android:toXDelta="0%"
/>
<alpha android:duration="2000"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
</set>

Left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration ="2000"
android:fromXDelta="0%"
android:toXDelta="-100%"
/>
<alpha android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
</set>

4. ListView menu:
Nằm ngay chung một hàng dùng horizontal.
Dong_listview_loaisp.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:weightSum="10">
<LinearLayout
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ImageView_loaisp"
android:src="@color/cardview_dark_background"
 android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="5dp"/>
</LinearLayout>
<LinearLayout
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:layout_margin="5dp"
android:id="@+id/TexviewLoaisp"
android:textSize="25sp"
android:text="Android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

</LinearLayout>

Loaisp.java
package com.example.storemobile.model;

public class Loaisp {

public int id;
public String TenLoaisp;
public String HinhLoaisp;

public Loaisp(int id, String tenLoaisp, String hinhLoaisp) {

this.id = id;
TenLoaisp = tenLoaisp;
HinhLoaisp = hinhLoaisp;
}

public int getId() {

return id;
}

public void setId(int id) {

this.id = id;
}

public String getTenLoaisp() {

return TenLoaisp;
}

public void setTenLoaisp(String tenLoaisp) {

TenLoaisp = tenLoaisp;
}

public String getHinhLoaisp() {

return HinhLoaisp;
}

public void setHinhLoaisp(String hinhLoaisp) {

HinhLoaisp = hinhLoaisp;
}
}

loaispadapter.java
package com.example.storemobile.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.storemobile.R;
import com.example.storemobile.model.Loaisp;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class Loaispadapter extends BaseAdapter {

ArrayList<Loaisp> arrayListLoaisp;
Context context;

public Loaispadapter(ArrayList<Loaisp> arrayListLoaisp, Context

context) {
this.arrayListLoaisp = arrayListLoaisp;
this.context = context;
}

@Override
public int getCount() {
return arrayListLoaisp.size();
}

@Override
public Object getItem(int position) {
return arrayListLoaisp.get(position);
}

@Override
public long getItemId(int position) {
return position;
}

public class ViewHolder{

TextView txtTenloaisp;
ImageView imgLoaisp;
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ViewHolder viewHolder;
if(convertView == null){
viewHolder = new ViewHolder();
LayoutInflater inflater = (LayoutInflater)
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView =
inflater.inflate(R.layout.dong_listview_loaisp,null);
viewHolder.txtTenloaisp =
convertView.findViewById(R.id.TexviewLoaisp);
viewHolder.imgLoaisp =
convertView.findViewById(R.id.ImageView_loaisp);
convertView.setTag(viewHolder);
}else{
viewHolder = (ViewHolder) convertView.getTag();
Loaisp loaisp = (Loaisp) getItem(position);
viewHolder.txtTenloaisp.setText(loaisp.getTenLoaisp());
Picasso.with(context).load(loaisp.getHinhLoaisp())
.placeholder(R.drawable.ic_launcher_background)
.error(R.drawable.ic_launcher_foreground)
.into(viewHolder.imgLoaisp);

}
return convertView;
}
}
 ArrayList<Loaisp> mangloaisp;
Loaispadapter loaispadapter;

Ánh xạ
mangloaisp = new ArrayList<>();
loaispadapter = new Loaispadapter(mangloaisp,getApplicationContext());
listViewhome.setAdapter(loaispadapter);

5. Check connect
Android – detect wherer there is an internet connect available
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
package com.example.storemobile.ultil;

import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.widget.Toast;

public class Checkconnection {

//thêm static để gọi ở any where
public static boolean haveNetworkConnection(Context context) {
boolean haveConnectedWifi = false;
boolean haveConnectedMobile = false;

ConnectivityManager cm = (ConnectivityManager)
context.getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo[] netInfo = cm.getAllNetworkInfo();
for (NetworkInfo ni : netInfo) {
if (ni.getTypeName().equalsIgnoreCase("WIFI"))
if (ni.isConnected())
haveConnectedWifi = true;
if (ni.getTypeName().equalsIgnoreCase("MOBILE"))
if (ni.isConnected())
haveConnectedMobile = true;
}
return haveConnectedWifi || haveConnectedMobile;
}
public static void Showtoast_short(Context context,String
information){
Toast.makeText(context, information, Toast.LENGTH_SHORT).show();
}
}

6. Lấy dữ liệu từ database

Connectdatabase.php
<?php
$connect = mysqli_connect("localhost","root","","thietbi");
mysqli_query($connect,"SET NAMES 'utf8'");
?>

Getloaisp.php
<?php
include "connectdatabase.php";
$query = "SELECT * FROM loaisanpham";
 $data = mysqli_query($connect,$query);
//tạo class
class Loaisp{
//tạo contructor dạng API
function Loaisp($id,$tenLoaisp,$hinhanhLoaisp){
$this -> id = $id;
$this -> tenLoaisp = $tenLoaisp;
$this -> hinhanhLoaisp = $hinhanhLoaisp;
}
}

//2. Tạo mảng .

$mangloaisp= array();
//3. Thêm phần tử vào mảng .
while($row = mysqli_fetch_assoc($data)){
array_push($mangloaisp ,new Loaisp(
//tên lấy giống trên trên database
$row['id'],
$row['tenloaisanpham'],
$row['hinhloaisanpham'])) ;
}
//4. Chuyển định dạng của mảng thành JSON-Array.
echo json_encode($mangloaisp);
?>

7. Phụ lục
a. Tắt ActionBar
Vào res >>values >>style.xml
<resources>

<!-- Base application theme. -->

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>