Aplikasi Sugi-Spices (Pengenalan Rempah-Rempah Indonesia)

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.

1. Buka Android Studio, dan buat project baru dengan nama Aplikasi Sugi-Spices.
2. Atur minimum SDK sesuai keinginan, atau pilih API 15:Android 4.0.3(IceCreamSandwich) sebagai contoh.
3. Pilih Empty Activity, dan selanjutnya beri nama Activity nya dengan nama MainActivity
4. 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>

[Text]

<?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.