Sugi-Spices dibangun menggunakan bahasa pemograman Android yang di desain dengan layout sederhana, sehingga memudahkan Para Pemula Android mengerti dasar-dasar Pemograman Android.
Berikut akan dijelaskan sedikit mengenai cara pembuatan Aplikasi Sugi-Spices tingkat pemula.
- Buka Android Studio, dan buat project baru dengan nama Aplikasi Sugi-Spices.
- Atur minimum SDK sesuai keinginan, atau pilih API 15:Android 4.0.3(IceCreamSandwich) sebagai contoh.
- Pilih Empty Activity, dan selanjutnya beri nama Activity nya dengan nama MainActivity
- Klik Finish
App > Res > Layout > activity_main.xml
Siapkan Logo untuk dipasang pada Halaman Utama. Kemudian drag and drop pallete ke dalam Component Tree. Lihat gambar di bawah ini
Berikut dicontohkan layout utama yang dipakai adalah ConstraintLayout. Dan di dalam ConstraintLayout terdapat LinearLayout (vertical), ImageView, TextView dan Space.
ConstraintLayout adalah grup tampilan yang tersedia di pustaka Constraint Layout, yang telah disertakan bersama Android Studio 2.2 dan yang lebih tinggi. Layout berbasis pembatas memungkinkan developer membangun layout kompleks tanpa perlu melapis grup tampilan, yang dapat meningkatkan kinerja aplikasi. Layout dibangun ke dalam layout editor, sehingga alat penghambat dapat diakses dari tab Design tanpa perlu mengedit XML secara manual.
Sedangkan
LineaLayout adalah sekelompok tampilan yang menyejajarkan semua anak dalam satu arah, secara vertical atau horizontal. Anda bisa menetapkan arah layout dengan atribut android:orientation.
[Text]
<?xml version="1.0"
encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:background="#234d6e"
android:paddingRight="@dimen/paddingKanan"
android:paddingLeft="@dimen/paddingKiri"
android:orientation="horizontal"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:onClick="tampilgambar"
android:gravity="center">
<ImageView
android:id="@+id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text_welcome"
android:textAlignment="center"
android:textColor="#ffffff"
android:typeface="sans" />
<Space
android:layout_width="match_parent"
android:layout_height="50dp"/>
<TextView
android:id="@+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Klik untuk melanjutkan.."
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="13sp"
android:typeface="sans" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Buat Activity lainnya dengan nama “activity_gambar” dengan cara klik File > New > Activity > Empty Activity.
App > Res > Layout > activity_gambar.xml
Berikut dicontohkan layout utama yang dipakai adalah ConstraintLayout. Dan di dalam ConstraintLayout terdapat LinearLayout (vertical), ImageView,ScrollView dan TableLayout.
Siapkan 1 gambar Banner dengan ukuran 400x150 px dan beberapa gambar dengan ukuran 200x200px. Simpan Banner pada posisi paling atas dan ScrollView setelah Banner.
Catatan : ScrollView hanya boleh memiliki 1 item saja. Maka dari itu, kita pasang 1 item LinearLayout yang di dalamnya terdapat beberapa item lainnya.
[Text]
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout 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=".GambarActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageViewBanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/banner" />
<ScrollView
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dimensi10dp"
android:layout_marginRight="@dimen/dimensi5dp"
android:onClick="tampildetail"
android:layout_weight="1"
app:srcCompat="@drawable/andaliman" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dimensi5dp"
android:layout_marginRight="@dimen/dimensi10dp"
android:onClick="tampildetail2"
android:layout_weight="1"
app:srcCompat="@drawable/bawang_bombay" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/andaliman"
android:textAlignment="center" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/bawang_bombay"
android:textAlignment="center" />
</TableRow>
…….
…….
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Selanjutnya, kita buat Activity Rincian, untuk menampilkan Halaman Baru saat kita memilih gambar pada activity_gambar
App > Res > Layout > activity_rincigambar.xml
Layout utama yang digunakan kali ini adalah LinearLayout. Dan di dalam LinearLayout terdapat textView, Space,ScrollView dan WebView.
Gunakan Webview agar konten yang ditampilkan lebih cantik.
Sebelum itu, buatlah file HTML terlebih dahulu, dengan klik Kanan pada Folder Assets, NEW > File > nama_file.html
Apabila belum ada folder Assets, klik menu File > New > Folder > Assets
Contoh File.html
<html>
<head></head>
<body>
<center><img src="file:///android_res/drawable/andaliman.png"></center>
<p align=justify><b>Pengertian Andaliman</b><br/><br/><b>Andaliman</b> adalah bumbu masak khas Asia yang berasal dari kulit luar buah beberapa jenis tumbuhan anggota marga Zanthoxylum (suku jeruk-jerukan, Rutaceae)<br/>
<br/>Bumbu ini di Indonesia hanya dikenal untuk masakan Batak, sehingga dikenal orang luar daerah ini sebagai <i>merica batak</i></p>
</body>
</html>
<?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"
android:orientation="vertical"
tools:context=".rincigambarActivity">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#234d6e"
android:text="@string/title_rincigambar"
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
android:textStyle="bold" />
<Space
android:layout_width="match_parent"
android:layout_height="@dimen/dimensi10dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/dimensi5dp"
android:paddingRight="@dimen/dimensi5dp" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
Setelah perancangan Layout selesai, maka selanjutnya pengaturan script di folder java dan folder manifests.
Manifests > AndroidManifest.xml
Daftarkan file java pada AndroidManifest.xml seperti contoh di bawah ini
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.sugismart.apps.sugi_spices">
<application
android:allowBackup="true"
android:icon="@mipmap/sugi_launcher"
android:label="@string/app_name"
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>
<activity android:name=".GambarActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.sugismart.apps.sugi_spices.MainActivity" />
</activity>
<activity android:name=".rincigambarActivity"
android:parentActivityName=".GambarActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.sugismart.apps.sugi_spices.GambarActivity" /></activity>
</application>
</manifest>
Java > com.domain.apps.sugi_spices > MainActivity
Buatlah sebuah method tampilgambar untuk mengarahkan MainActivity ke GambarActivity pada saat user mengklik layout pada activity_main.xml
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void tampilgambar(View view) {
Intent intent = new Intent(this,GambarActivity.class);
startActivity(intent);
}
}
Java > com.domain.apps.sugi_spices > GambarActivity
Pada saat user mengklik salah satu gambar pada layout activity_gambar.xml, maka pada GambarActivity harus dibuatkan method untuk mengarahkan ke rincigambarActivity. Lihat contoh berikut
public class GambarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gambar);
}
public void tampildetail(View view) {
Intent intent = new Intent(this,rincigambarActivity.class);
Bundle bundle = new Bundle();
bundle.putString("spices",getString(R.string.andaliman));
intent.putExtras(bundle);
startActivity(intent);
}
}
Java > com.domain.apps.sugi_spices > rincigambarActivity
Pada saat activity ini dipanggil, activity ini harus mampu menampilkan konten web berdasarkan gambar yang dipilih pada activity sebelumnya. Lihat contoh berikut
public class rincigambarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rincigambar);
TextView textview = (TextView) findViewById(R.id.textView);
Bundle bundle = getIntent().getExtras();
String spices = bundle.getString("spices");
String htmlText = " %s ";
String myData = "";
WebView webView = (WebView) findViewById(R.id.webview1);
if (spices.equals(getString(R.string.andaliman))) {
textview.setText(R.string.andaliman);
webView.loadUrl("file:///android_asset/andaliman.html");
} else if (spices.equals(getString(R.string.bawang_bombay))) {
textview.setText(R.string.bawang_bombay);
webView.loadUrl("file:///android_asset/bawang_bombay.html");
}
}
}
Demikian penjelasan sedikit mengenai cara pembuatan Aplikasi Sugi-Spices tingkat pemula, selanjutnya silahkan berkreasi dengan cara anda sendiri.
Source Code tidak disediakan, namun File APK dapat anda download
disini.
