Pertemuan 6 tabview

PERTEMUAN 6:
TABVIEW
A. TUJUAN PEMBELAJARAN :
Adapun tujuan pembelajaran yang akan dicapai sebagai berikut:
6.1 Mengetahui Kegunaan Tabview
6.2 Membuat Project Dengan Tabview
B. URAIAN MATERI
Tujuan Pembelajaran 6.1:
Mengetahui Kegunaan Tabview
Menu Tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai
dengan tabel menu di atasnya. Menu ini banyak dipakai untuk menghemat tempat pada tampilan
aplikasi dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu di
atasnya. Jadi jika kita mengklik menu di atasnya maka halaman tabel yang muncul adalah
halaman tabel yang dibuat sesuai dengan menu tabel di atasnya, dan jika kita mengklik menu
tabel lain maka yang muncul adalah halaman tabel yang bersesuaian namun tetap pada satu
tempat itu.

Tujuan Pembelajaran 6.2:
Membuat Project Dengan Tabview

Untuk membuat project baru, klik menu File >> New >> Other... sehingga tampil kotak
dialog seperti gambar 6.1 berikut ini:
Gambar 6. 1 Kotak dialog membuat project baru

Gambar 6. 1 Kotak dialog membuat project baru
Pilih Android Application Project di dalam folder Android, kemudian klik tombol Next.
Setelah tampil kotak dialog pengaturan seperti gambar 6.2, beri nama aplikasi “MateriTabView”,
dan pada nama package ubah “example” menjadi “unpam”. Tentukan versi android SDK
(Software Development Kit) untuk aplikasi yang akan dibuat pada menu dropdown Build SDK,
dan minimum required SDK.

Gambar 6. 2 Kotak dialog pengaturan project
Setelah pengaturan nama aplikasi, nama project, nama package, dan SDK dari aplikasi,
klik tombol Next untuk melanjutkan sehingga tampil kotak dialog seperti gambar 6.3. Atur icon
dari aplikasi yang akan dibuat, bisa menggunakan image, clipart, maupun text. Atur bentuk dan
warna dari icon jika diperlukan, jika sudah selesai lanjutkan dengan mengklik tombol Next.

Gambar 6. 3 Pengaturan icon aplikasi
Gambar 6. 4 Memilih jenis Activity
Pilih Blank Activity untuk jenis Activity dari aplikasi yang akan dibuat. Lanjutkan dengan
mengklik tombol Next. Ubah judul (Title) aplikasi menjadi “Materi TabView”.

Gambar 6. 5 Mengatur nama dan judul activity
Klik tombol Finish untuk mengakhiri pengaturan pembuatan aplikasi. Tunggu beberapa
saat sampai tampil desain aplikasi seperti gambar 6.6. Jika jendela yang tampil tidak sama, dapat
diatur dari menu Window >> Show View dan pilih jendela yang ingin ditampilkan. Jika ingin
mengubah tampilan ke bentuk standar, dapat dilakukan melalui menu Window >> Reset
Perspective.
Gambar 6. 6 Tampilan IDE aplikasi android
Hapus TextView (teks “Hello Word!”), tambahkan LinearLayout (Horizontal) di sudut
kiri atas, kemudian di dalamnya tambahkan Medium dengan teks “Menghitung:”. Tambahkan
LinearLayout (Horizontal) lagi dan di dalamnya tambahkan TabHost dari grup Composite. Atur
desain tampilan menjadi seperti gambar 6.7 dan desain outline menjadi seperti gambar 6.8.

Gambar 6. 7 Graphical layout activity_main.xml
Gambar 6. 8 Outline activity_main.xml
Desain activity dapat juga diatur melalui source code XML sebagai berikut:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<TextView
android:id="@+id/textView1"
android:text="Menghitung:" android:textAppearance="?
android:attr/textAppearanceMedium"/>
</LinearLayout>
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_below="@+id/linearLayout1" >
<TabHost
android:id="@android:id/tabhost"

<TabHost
android:id="@android:id/tabhost"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
<LinearLayout
android:id="@+id/tab1"
</LinearLayout>
<LinearLayout
</LinearLayout>
<LinearLayout
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
</RelativeLayout>
Selanjutnya tambahkan activity baru dengan cara klik kanan pada project, pilih New dan
Other (atau Ctrl+N) sehingga tampil kotak dialog seperti gambar 6.9 berikut ini:

Gambar 6. 9 Menambahkan activity baru
Klik tombol Next, pada kotak dialog seperti gambar 6.10 ubah nama activity menjadi
“MenghitungHurufActivity” dan ubah judul menjadi “Menghitung Huruf”.
Gambar 6. 10 Pengaturan activity
Klik tombol Finish untuk mengakhiri pengaturan nama dan judul Activity. Selanjutnya
atur layout activity_menghitung_huruf menjadi seperti gambar 6.11 dan 6.12 berikut ini:

Gambar 6. 11 Graphical layout activity_menghitung_huruf.xml
Gambar 6. 12 Outline activity_menghitung_huruf.xml
Source code activity_menghitung_huruf.xml:
<RelativeLayout
<LinearLayout
android:layout_alignParentTop="true"
<TextView
android:text="Ketik teks:" />
<EditText
android:id="@+id/teksHurufEditText"
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
<TextView

<TextView
android:text="Jumlah Huruf Vokal"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<TextView
android:id="@+id/jumlahVokalTextView"
android:layout_weight="1" android:gravity="right"
android:text="0"
/>
</LinearLayout>
<LinearLayout
<TextView
android:text="Jumlah Huruf Konsonan"
/>
<TextView
android:id="@+id/jumlahKonsonanTextView"
android:layout_height="wrap_content" android:text="0"
android:gravity="right" android:layout_weight="1"
android:textAppearance="?
android:attr/textAppearanceMedium"
/>
</LinearLayout>
<LinearLayout
<Button
android:id="@+id/hitungHurufButton"
android:layout_weight="1" android:text="Hitung"
/>
</LinearLayout>
</RelativeLayout>
Dengan cara yang sama tambahkan activity dengan nama MenghitungKataActivity

Dengan cara yang sama tambahkan activity dengan nama MenghitungKataActivity
dan judulnya “Menghitung Kata”.
Gambar 6. 13 Pengaturan activity menghitung kata
Gambar 6. 14 Graphical layout activity_menghitung_kata.xml

Gambar 6. 15 Outline activity_menghitung_kata.xml
Source code activity_menghitung_kata.xml:
<RelativeLayout
<LinearLayout
android:layout_alignParentTop="true"
<TextView
android:text="Ketik teks:" />
<EditText
android:id="@+id/teksKataEditText"
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
<TextView
android:text="Jumlah Huruf Vokal"
/>
<TextView
android:id="@+id/jumlahKataTextView"
android:layout_weight="1"
android:gravity="right"
android:text="0"
/>
</LinearLayout>
<LinearLayout

</LinearLayout>
<LinearLayout
<Button
android:id="@+id/hitungKataButton"
android:layout_weight="1"
android:text="Hitung" />
</LinearLayout>
</RelativeLayout>
Setelah selesai mengatur desain activity, selanjutnya menambahkan source code java. Pertama
double klik file MenghitungHurufActivity.java yang berada di project dalam folder src >>
com.unpam.materitabview, sehingga menjadi seperti berikut ini:
package com.unpam.materitabview;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import
android.view.View.OnClickListener;
import android.widget.EditText; import
android.widget.TextView;
public class MenghitungHurufActivity extends Activity implements
OnClickListener{
EditText teksHurufET;
TextView jumlahVokalTV, jumlahKonsonanTV;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menghitung_huruf);
teksHurufET = (EditText)
findViewById(R.id.teksHurufEditText); jumlahVokalTV =
(TextView)
findViewById(R.id.jumlahVokalTextView);
jumlahKonsonanTV = (TextView)
findViewById(R.id.jumlahKonsonanTextView);
findViewById(R.id.hitungHurufButton).setOnClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_menghitung_huruf,
menu);
return true;
}
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()){

switch (v.getId()){
case
R.id.hitungHurufButton:
String teks =
teksHurufET.getText().toString();

String[] listVokal =
{"A","E","I","O","U"};

int jumlahVokal=0, jumlahKonsonan=0;
int i,j;
boolean vokal;

for (i=0; i<teks.length(); i++){
int keyCode =
teks.charAt(i);
if (((keyCode >= 65) && (keyCode <=
90)) ||
((keyCode >= 97) && (keyCode <= 122))){
vokal = false;
j=0;
while ((j<listVokal.length) &&
!vokal){ if
(teks.substring(i,
i+1).equalsIgnoreCase(listVokal[j++])){
vokal = true;
}
}

if (vokal){
jumlahVokal++;
} else {

jumlahKonsonan++;
}
}
}

jumlahVokalTV.setText(Integer.toString(jumlahVokal));
jumlahKonsonanTV.setText(Integer.toString(jumlahKonsonan));
}
}
}
Kedua, dengan cara yang sama tambahkan source code untuk file
MenghitungKataActivity.java menjadi:
import android.app.Activity; import
android.view.Menu;
import android.view.View;
import
import android.widget.EditText;

import
import android.widget.EditText;
import android.widget.TextView;
public class MenghitungKataActivity extends Activity implements
OnClickListener{
EditText teksKataET;
TextView jumlahKataTV;

@Override
setContentView(R.layout.activity_menghitung_kata);
teksKataET = (EditText) findViewById(R.id.teksKataEditText);
jumlahKataTV = (TextView)
findViewById(R.id.jumlahKataTextView);
findViewById(R.id.hitungKataButton).setOnClickListener(this);
}
@Override
getMenuInflater().inflate(R.menu.activity_menghitung_kata,
menu);
return true;
}
public void onClick(View v) {
switch (v.getId()){
case
R.id.hitungKataButton:
String teks = teksKataET.getText().toString();

boolean kata=false, huruf;
int i, jumlahKata=0, keyCode;

for (i=0; i<teks.length(); i++){
huruf = false;
keyCode = teks.charAt(i);
if (((keyCode >= 65) && (keyCode <= 90))
||
((keyCode >= 97) && (keyCode <= 122))){
huruf=true;
}
if (huruf){
if (!kata){
kata = true;
jumlahKata++;
}
} else {
kata = false;
}
}
jumlahKataTV.setText(Integer.toString(jumlahKata));
}
}

jumlahKataTV.setText(Integer.toString(jumlahKata));
}
}
}
Ketiga, tambahkan source code di dalam file MainActivity.java sehingga menjadi seperti berikut
ini:
import android.app.TabActivity;
import android.content.Intent;
import android.view.Menu;
import android.widget.TabHost;
@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {
@Override
setContentView(R.layout.activity_main);
Intent intent;
TabHost tabHost = getTabHost();
TabHost.TabSpec tabSpec;
intent = new Intent(this, MenghitungHurufActivity.class);
tabSpec = getTabHost().newTabSpec("tab1").setIndicator(
"Menghitung Huruf").setContent(intent);
tabHost.addTab(tabSpec);
intent = new Intent(this, MenghitungKataActivity.class);
tabSpec = getTabHost().newTabSpec("tab2").setIndicator(
"Menghitung Kata").setContent(intent);
tabHost.addTab(tabSpec);
}
@Override
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Menjalankan Aplikasi
Untuk mengeksekusi, klik kanan pada nama project atau pilih menu Run, kemudian pilih Run As
>> Android Application. Jika kita lihat di daftar aplikasi seperti pada gambar 6.16, maka akan
terlihat 3 icon aplikasi baru, yaitu Materi TabView, Menghitung Huruf, dan Menghitung Kata.
Agar aplikasi yang kita buat hanya menampilkan satu icon aplikasi, double klik file
AndroidManifest.xml di dalam project seperti pada gambar 6.17, kemudian klik tab
AndroidManifest.xml yang berada pada bagian bawah seperti pada gambar 6.18, hapus tag
intent-filter untuk MenghitungHurufActivity dan MenghitungKataActivity sehingga source
code-nya menjadi seperti berikut ini:
<manifest
package="com.unpam.materitabview" android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />
<application

android:targetSdkVersion="15" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MenghitungHurufActivity"
android:label="@string/title_activity_menghitung_huruf"
>
</activity>
<activity
android:name=".MenghitungKataActivity"
android:label="@string/title_activity_menghitung_kata" >
</activity>
</application>
</manifest>
Gambar 6. 16 Tampilan daftar aplikasi

Gambar 6. 17 Project explorer
Gambar 6. 18 Android manifest
Tampilan Aplikasi
Tampilan aplikasi yang telah dibuat pada AVD (Android Virtual Device) adalah sebagai
berikut:

Gambar 6. 19 Tampilan Menghitung Huruf di AVD
Gambar 6. 20 Tampilan Menghitung Huruf di AVD
C. SOAL LATIHAN/TUGAS
Buatlah project untuk menampilkan 3 tab, yang berisikan:
1. Tab pertama berisikan project Alert dan Toast
2. Tab kedua berisikan project LIstview
3. Tab ketiga berisikan project Activity

D. DAFTAR PUSTAKA

Allen, Grant. 2012. Beginning Android 4. New York : Apress.
Safaat, H. Nazruddin. 2015. ANDROID Pemrograman Aplikasi Mobile Smartphone dan
Tablet PC Berbasis Android. Bandung: Informatika
142

Pertemuan 6 tabview

More Related Content

What's hot (20)

Similar to Pertemuan 6 tabview (20)

Recently uploaded (20)

Pertemuan 6 tabview