Membuat Aplikasi Menu Makanan Berbasis Android

Ok kawan-kawan kali ini kita akan mencoba membuat sebuah aplikasi menu makanan di android. 
Singkat ceritanya adalah kita akan membuat sebuah aplikasi yang akan menampilkan menu-menu makanan dimana menu2 tersebut secara realtime bisa kita ubah/edit/hapus sesuai kebutuhan tempat makannya. Ok langsung saja ke tahap-tahapannya.

1. Tahap Pertama
a. Pastikan anda terlah menginstall eclipse/android studio.

b. Buat project baru di android studio/eclipse misal kita namakan Menu Makanan

c. Kemudian pilih template Empty Activity, lalu kasih nama Activitynya dengan MainActivity dan layoutnya dengan nama main_layout.

d. Tambahkan dependency berikut di build.gradle, kita akan menggunakan library glide untuk meng-handle ketika load gambar dari url terus menampilkannya di imageview. Penggunaan glide tidak wajib bisa disesuaikan (sesuai selera) misal dengan pakai library yg lain seperti picaso, universal image loader, dll.

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:support-v4:25.3.1' compile 'com.android.support:design:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.github.bumptech.glide:glide:3.7.0' }

2. Tampilan / Layout
Kita buat pertama main_layoutnya, di main layout ini saya meletakkan komponen swipelayout agar ketika di hold+scroll ke bawah akan terefresh otomatis, kemudian Gridview untuk menampilkan list menunya dan terakhir adalah text total harga yang user pesan.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swipeMenu"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/total"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Total : Rp. 0"
android:textAlignment="center"
android:textSize="20sp"
android:textStyle="bold" />
<GridView
android:id="@+id/gridViewMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="10.0dip"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="0.0dip" />
</LinearLayout>

Kedua kita buat layout untuk gridviewnya, misal kita kasi nama gridview_layout.xml, di dalam layout ini terdapat komponen imageview utk menampilan gambar2 menu, textview untuk menampilan harga menu, dan terakhir progressbar utk handle ketika lagi load gambarnya lama.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/imgView"
android:layout_width="match_parent"
android:layout_height="200sp"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/txtGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#FFDFDEDD"
android:maxLines="1"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:textColor="@color/colorAccent"
android:textStyle="bold" />
<ProgressBar
android:id="@+id/pBarGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>

Ketiga kita buat item layout untuk layout saat ketika meng-klik salah satu menunya, misal kita kasih nama item_layout.xml, dalam layout ini terdapat komponen imageview utk nampilin gambar, textview untuk nampilin nama dan harga menu, serta edittext untuk menampung jumlah porsi yang akan di pesan pelanggan.

<?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="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imgItem"
android:layout_width="match_parent"
android:layout_height="200sp"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/txtDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sate Ayam | Rp. 10.000"
android:textAlignment="center"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/txtJml"
android:hint="Masukkan Jumlah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:textAlignment="center" />
</LinearLayout>

3. Class Object Menu Makanan

Kita bikin dulu class object menu atau yang bisa kita sebut setter getternya yang berisi nama, harga, dan link dimana nama adalah nama menu, harga adl harga menu, dan terakhir link adalah link/url gambar menu.

public class Item {
private String nama;
private String harga;
private String link;
public String getNama() {
return nama;
}
public void setNama(String nama) {
this.nama = nama;
}
public String getHarga() {
return harga;
}
public void setHarga(String harga) {
this.harga = harga;
}
public String getLink() {
return link;
}
public void setLink(String link) {
this.link = link;
}
}

4. Custom Adapater

Terus kita buat class custom adapter untuk meng-handle gridview yang akan menampilan menu2 yang ada.

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.animation.GlideAnimation;
import com.bumptech.glide.request.target.BitmapImageViewTarget;
import java.util.List;
/**
* Created by imam-pc on 30/04/2017.
*/
public class CustomAdapterGridview extends ArrayAdapter<Item> {
private List<Item> items;
private Item objBean;
private Activity activity;
private int row;
public CustomAdapterGridview(Activity ctx, int resource, List<Item> itm) {
super(ctx, resource, itm);
this.row = resource;
this.activity = ctx;
this.items = itm;
}
public View getView(int paramInt, View paramView, ViewGroup paramViewGroup) {
View view = paramView;
ViewHolder item;
if (view == null) {
LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(row, null);
item = new ViewHolder();
view.setTag(item);
} else {
item = (ViewHolder) view.getTag();
}
if ((items == null) || ((paramInt + 1) > items.size()))
return view;
objBean = items.get(paramInt);
item.name = (TextView) view.findViewById(R.id.txtGrid);
item.imgName = (ImageView) view.findViewById(R.id.imgView);
item.pbar = (ProgressBar) view.findViewById(R.id.pBarGrid);
if (item.name != null && null != objBean.getNama()
&& objBean.getNama().trim().length() > 0) {
item.name.setText(Html.fromHtml(objBean.getNama() + " | Rp. " + objBean.getHarga()));
}
if (item.imgName != null) {
String url = objBean.getLink();
final ProgressBar pbar = item.pbar;
if (null != url && url.trim().length() > 0) {
pbar.setVisibility(View.VISIBLE);
Glide.with(activity).load(url).asBitmap().placeholder(R.mipmap.ic_launcher)
.into(new BitmapImageViewTarget(item.imgName) {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
super.onResourceReady(resource, glideAnimation);
pbar.setVisibility(View.GONE);
}
});
} else {
item.imgName.setImageResource(R.mipmap.ic_launcher);
}
}
return view;
}
private class ViewHolder {
TextView name;
ImageView imgName;
ProgressBar pbar;
}
}

5. Konfigurasi Dropbox

- Ok sekarang kita masuk ke dalam dropbox web ya, ingat web jangan yang client dulu.
- Kita bikin folder di dropbox terus kita kasih nama folder nya Menu
- Dalam folder menu kita bikin satu folder dan satu file xml
- Satu folder kita kasih nama Gambar dan satu file kita namai menumakanan.xml
- Di dalam folder gambar kita upload semua gambar menu di restoran yang kita punya (cielah kita punya haha)
- Terus kita bikin dulu file xml menumakanan.xml sebelum kita upload kita edit2 dulu isinya, file xml ini lah yang akan berisi informasi2 yang akan kita download dan parsing ke dalam aplikasi android kita. Format xml ini adalah

<data>
<item>
<nama>Nama</nama>
<harga>Harga</harga>
<link>Link</link>
</item>
</data>

Berikut isi file xml lengkap punya saya:

<data>
<item>
<nama>Domino</nama>
<harga>10000</harga>
<link>https://www.dropbox.com/s/sxrq1l7gm94j0ve/domino.jpg?dl=1</link>
</item>
<item>
<nama>KFC</nama>
<harga>15000</harga>
<link>https://www.dropbox.com/s/92838auxcdgx4cz/kfc.jpg?dl=1</link>
</item>
<item>
<nama>Nasgor Gila</nama>
<harga>15000</harga>
<link>https://www.dropbox.com/s/tpcrmghlmpdsou2/nasgorgila.jpg?dl=1</link>
</item>
<item>
<nama>Pecel Ayam</nama>
<harga>15000</harga>
<link>https://www.dropbox.com/s/kzkil675z30ctmd/pecelayam.jpg?dl=1</link>
</item>
<item>
<nama>Pizza</nama>
<harga>25000</harga>
<link>https://www.dropbox.com/s/bumvupr0wibdj14/pizza.png?dl=1</link>
</item>
<item>
<nama>Sate Ayam</nama>
<harga>20000</harga>
<link>https://www.dropbox.com/s/5cdu7avium4n0oq/sateayam.jpg?dl=1</link>
</item>
</data>

6. MainActivity

Setelah itu kita bikin class utamanya di MainActivity

import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.bumptech.glide.Glide;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
public class MainActivity extends AppCompatActivity {
private static final String urlListMenu = "https://www.dropbox.com/s/rnpv3j15nz8t1f8/menumakanan.xml?dl=1";
private List<Item> listData;
private GridView gridView;
private TextView txtTotal;
private SwipeRefreshLayout swipe;
private int totalHarga = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
txtTotal = (TextView) findViewById(R.id.total);
gridView = (GridView) findViewById(R.id.gridViewMenu);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
popUpItem(listData.get(position));
}
});

if (listData == null) {
new MyTask().execute(urlListMenu);
}
swipe = (SwipeRefreshLayout) findViewById(R.id.swipeMenu);
swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
txtTotal.setText("Total : Rp. 0");
new MyTask().execute(urlListMenu);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.checkout:
new MyTask().execute(urlListMenu);
return true;
default:
return super.onOptionsItemSelected(item);
}
}
class MyTask extends AsyncTask<String, Void, Void> {
ProgressDialog pDialog;
@Override
protected void onPreExecute() {
super.onPreExecute();
pDialog = new ProgressDialog(MainActivity.this);
pDialog.setMessage("Loading Menu");
pDialog.setCancelable(false);
pDialog.show();
}
@Override
protected Void doInBackground(String... params) {
listData = getData(params[0]);
return null;
}
@Override
protected void onPostExecute(Void result) {
super.onPostExecute(result);
if (null != pDialog && pDialog.isShowing()) {
pDialog.dismiss();
}
swipe.setRefreshing(false);
if (null == listData || listData.size() == 0) {
Toast.makeText(MainActivity.this, "Menu Tidak Ditemukan", Toast.LENGTH_LONG);
} else {
gridView.setAdapter(new CustomAdapterGridview(MainActivity.this, R.layout.gridview_layout, listData));
}
setTotal(0);
}
}
public List<Item> getData(String url) {
Item objItem;
List<Item> listItem = null;
try {
listItem = new ArrayList<>();
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
DocumentBuilder db = dbf.newDocumentBuilder();
Document doc = db.parse(new URL(url).openStream());
doc.getDocumentElement().normalize();
NodeList nList = doc.getElementsByTagName("item");
int batas = nList.getLength();
for (int temp = 0; temp < batas; temp++) {
{
Node nNode = nList.item(temp);
if (nNode.getNodeType() == Node.ELEMENT_NODE) {
Element eElement = (Element) nNode;
objItem = new Item();
objItem.setNama(getTagValue("nama", eElement));
objItem.setHarga(getTagValue("harga", eElement));
objItem.setLink(getTagValue("link", eElement));
listItem.add(objItem);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
return listItem;
}
private static String getTagValue(String sTag, Element eElement) {
NodeList nlList = eElement.getElementsByTagName(sTag).item(0)
.getChildNodes();
Node nValue = nlList.item(0);
return nValue.getNodeValue();
}
private void popUpItem(final Item data) {
final AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
LayoutInflater inflater = getLayoutInflater();
View convertView = inflater.inflate(R.layout.item_layout, null);
ImageView imgItem = (ImageView) convertView.findViewById(R.id.imgItem);
TextView txtDesc = (TextView) convertView.findViewById(R.id.txtDesc);
final EditText txtJml = (EditText) convertView.findViewById(R.id.txtJml);
Glide.with(this).load(data.getLink()).into(imgItem);
txtDesc.setText(data.getNama() + " | Rp." + data.getHarga());
alertDialog.setView(convertView).setTitle("");
final AlertDialog mAlertDialog = alertDialog.setPositiveButton("PESAN", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
int pesanan = Integer.valueOf(data.getHarga());
if (!txtJml.getText().toString().equals("") && !txtJml.getText().toString().equals("0")) {
pesanan = Integer.valueOf(txtJml.getText().toString()) * Integer.valueOf(data.getHarga());
}
setTotal(pesanan);
}
}).create();
mAlertDialog.show();
}
private void setTotal(int nilai) {
totalHarga = totalHarga + nilai;
txtTotal.setText("Total : Rp. " + totalHarga);
}
}

7. Manifest

Jangan lupa tambahkan permission internet untuk bisa menggunakan koneksi internet di android di AndroidManfiest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.imamfarisi.menumakan">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Hasil Run Sebagai Berikut :

setelah di klik nama makanannya akan muncul tampilan seperti ini:

selanjutnya ketika klik pesan akan menampilkan seperti ini :