Cara Membuat Aplikasi Resep Makanan Responsive 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 Resep Makanan Responsive 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.
Aplikasi ini menggunakan Webview untuk menampilkan datanya.
Sedangkan data file Assetnya htmlnya sudah dimodifikasi sedikit agar bisa responsive disetiap layar smartphone Android kalian.
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).
Langsung saja kita masuk ke cara pengaplikasiannya dengan mengikuti step-step di bawah ini.
1. Buat project baru di Android Studio
Klik File - Project Baru. Ketika diminta untuk memilih Default Activity, kita memilih Empty Activity dan klik Next. (Untuk minSDK, saya set API 21)
2. Kemudian Download File Assetnya ⇒ Disini
3. Kita ubah build.gradle menjadi seperti dibawah ini.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.13'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}
4. Ubah activity_main.xml menjadi seperti dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="15dp"
app:expandedTitleMarginStart="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/background_header"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:title="@string/app_name" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/grid_content" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
5. Ubah juga MainActivity.java menjadi seperti dibawah ini.
package com.wijaba.resepmasakan.activities;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import com.wijaba.resepmasakan.adapter.DataAdapter;
import com.wijaba.resepmasakan.model.DataModel;
import com.wijaba.resepmasakan.R;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
public DataAdapter dataAdapter;
public RecyclerView recyclerView;
public ArrayList dataModelArrayList = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//membuat data yang akan ditampilkan dalam list
//file .html mengambil di folder assets
inputData("Ayam Bakar Bumbu Bali", "artikel_1.html");
inputData("Sate Ayam Srepeh", "artikel_2.html");
inputData("Pizza Sosis Jumbo (Tanpa Ulen)", "artikel_3.html");
inputData("Nasgor Mawut (Mawut Sayur)", "artikel_4.html");
inputData("Fuyung Hai", "artikel_5.html");
inputData("Lobster Bumbu Padang", "artikel_6.html");
inputData("Sop Iga Sapi", "artikel_7.html");
inputData("Opor Ayam Kampung", "artikel_8.html");
inputData("Bebek Goreng Sambel Ijo", "artikel_9.html");
inputData("Soto Ayam Kampung", "artikel_10.html");
inputData("Bakso Ayam", "artikel_11.html");
inputData("Ikan Gurame Bakar", "artikel_12.html");
inputData("Pisang Bakar Coklat Keju", "artikel_13.html");
inputData("Keto Martabak Terang Bulan", "artikel_14.html");
inputData("Ingkung Ayam Kampung", "artikel_15.html");
//menampilkan data ke dalam recyclerView
recyclerView = findViewById(R.id.recyclerView);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
dataAdapter = new DataAdapter(this, dataModelArrayList);
recyclerView.setAdapter(dataAdapter);
/*//menambahakan header
DataModel headerModel = new DataModel();
headerModel.setViewType(2);
dataModelArrayList.add(0, headerModel);*/
//menambahkan footer
DataModel footerModel = new DataModel();
footerModel.setViewType(2);
dataModelArrayList.add(footerModel);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
if (Build.VERSION.SDK_INT >= 21) {
setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, false);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
}
//fungsi input
public void inputData(String judul, String konten) {
DataModel dataModel = new DataModel();
dataModel.setJudul(judul);
dataModel.setKonten(konten);
dataModel.setViewType(1);
dataModelArrayList.add(dataModel);
}
public static void setWindowFlag(Activity activity, final int bits, boolean on) {
Window win = activity.getWindow();
WindowManager.LayoutParams winParams = win.getAttributes();
if (on) {
winParams.flags |= bits;
} else {
winParams.flags &= ~bits;
}
win.setAttributes(winParams);
}
}
6. Selanjutnya kita buat grid_content.xml untuk menampilkan resep makanannya.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</androidx.core.widget.NestedScrollView>
7. Lalu kita buat activity_detail.xml masukan skrip dibawah ini.
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tbDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
8. Dan kita buat DetailActivity.java untuk menampilkan detail resep yang dipilih.
package com.wijaba.resepmasakan.activities;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.wijaba.resepmasakan.model.DataModel;
import com.wijaba.resepmasakan.R;
public class DetailActivity extends AppCompatActivity {
WebView webView;
private ProgressBar mProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
//Toolbar
setupToolbar();
mProgressBar = findViewById(R.id.progress_bar);
mProgressBar.setMax(100);
mProgressBar.setProgress(0);
Intent intent = getIntent();
Bundle bundle = intent.getExtras();
DataModel dataModel = (DataModel) bundle.getSerializable("dataModel");
// setting judul bar
setTitle(dataModel.getJudul());
//tampil data konten
webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/" + dataModel.getKonten());
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String newUrl) {
return true;
}
@Override
public void onPageStarted(WebView view, String urlStart, Bitmap favicon) {
mProgressBar.setVisibility(View.VISIBLE);
}
@Override
public void onPageFinished(WebView view, String urlPage) {
mProgressBar.setVisibility(View.GONE);
}
});
}
private void setupToolbar() {
Toolbar toolbar = findViewById(R.id.tbDetail);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}
9. Kemudian buat Class Adapternya, yaitu list_item.xml, list_footer.xml dan DataAdapter.java
Lalu masukan skripnya sesuai namanya.
list_item.xml
<?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/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="10dp"
app:cardElevation="3dp">
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="@color/colorPrimary" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/icon_list"
style="@style/Widget.AppCompat.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_arrow"
android:tint="@color/colorAccent" />
<TextView
android:id="@+id/txtJudul"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_toStartOf="@id/icon_list"
android:gravity="start"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="@color/colorAccent"
android:textSize="16sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
list_footer.xml
<?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:layout_gravity="bottom"
android:background="@color/colorPrimaryDark"
android:gravity="bottom"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp"
android:text="Azhar Rivaldi"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
DataAdapter.java
package com.wijaba.resepmasakan.adapter;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import com.wijaba.resepmasakan.model.DataModel;
import com.wijaba.resepmasakan.R;
import com.wijaba.resepmasakan.activities.DetailActivity;
import java.util.ArrayList;
public class DataAdapter extends RecyclerView.Adapter {
private ArrayList dataModelArrayList;
private Activity activity;
public DataAdapter(Activity activity, ArrayList dataModelArrayList) {
this.activity = activity;
this.dataModelArrayList = dataModelArrayList;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
RecyclerView.ViewHolder viewHolder = null;
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
switch (viewType) {
case 1: {
View v = inflater.inflate(R.layout.list_item, parent, false);
viewHolder = new ItemHolder(v);
break;
}
case 2: {
View v = inflater.inflate(R.layout.list_footer, parent, false);
viewHolder = new FooterHolder(v);
break;
}
}
return viewHolder;
}
public static class ItemHolder extends RecyclerView.ViewHolder {
public TextView txtJudul;
public ItemHolder(View view) {
super(view);
txtJudul = view.findViewById(R.id.txtJudul);
}
}
public static class HeaderHolder extends RecyclerView.ViewHolder {
public HeaderHolder(View view) {
super(view);
}
}
public static class FooterHolder extends RecyclerView.ViewHolder {
public FooterHolder(View view) {
super(view);
}
}
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder viewHolder, final int position) {
if (getItem(position).getViewType() == 1) {
ItemHolder holder = (ItemHolder) viewHolder;
holder.txtJudul.setText(getItem(position).getJudul());
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(final View v) {
Intent intent = new Intent(activity, DetailActivity.class);
Bundle bundle = new Bundle();
bundle.putSerializable("dataModel", getItem(position));
intent.putExtras(bundle);
activity.startActivity(intent);
}
});
}
}
@Override
public int getItemViewType(int position) {
return dataModelArrayList.get(position).getViewType();
}
public DataModel getItem(int position) {
return dataModelArrayList.get(position);
}
@Override
public int getItemCount() {
return dataModelArrayList.size();
}
}
10. Yang terakhir kita buat DataModel.java sebagai Class modelnya
package com.wijaba.resepmasakan.model;
import java.io.Serializable;
public class DataModel implements Serializable {
Integer viewType;
String judul, konten;
public Integer getViewType() {
return viewType;
}
public void setViewType(Integer viewType) {
this.viewType = viewType;
}
public String getJudul() {
return judul;
}
public String getKonten() {
return konten;
}
public void setKonten(String konten) {
this.konten = konten;
}
public void setJudul(String judul) {
this.judul = judul;
}
}
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 disini
Sekian tutorial Cara Membuat Aplikasi Resep Makanan Responsive 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 Resep Makanan Responsive Menggunakan Android Studio"