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:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Menghitung:" android:textAppearance="?
android:attr/textAppearanceMedium"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1" >

<TabHost
android:id="@android:id/tabhost"
 <TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="match_parent"

android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"

android:layout_height="match_parent" >
</LinearLayout>

<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>

<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</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
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"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ketik teks:" />

<EditText
android:id="@+id/teksHurufEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<requestFocus />
</EditText>
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1" >

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
 <TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jumlah Huruf Vokal"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

<TextView
android:id="@+id/jumlahVokalTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" android:gravity="right"
android:text="0"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout2" >

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jumlah Huruf Konsonan"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

<TextView
android:id="@+id/jumlahKonsonanTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="0"
android:gravity="right" android:layout_weight="1"
android:textAppearance="?
android:attr/textAppearanceMedium"
/>

</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout3" >

<Button
android:id="@+id/hitungHurufButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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
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"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ketik teks:" />

<EditText
android:id="@+id/teksKataEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<requestFocus />
</EditText>
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jumlah Huruf Vokal"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

<TextView

android:id="@+id/jumlahKataTextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="0"
android:textAppearance="?android:attr/textAppearanceMedium"
/>

</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
 </LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout2" >

<Button
android:id="@+id/hitungKataButton"

android:layout_width="wrap_content"
android:layout_height="wrap_content"
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
/
​ ​ witch (v.getId()){
s
 ​ ​ ​// TODO Auto-generated method stub
​ ​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){
​ ​ ​ ​ ​ ​ ​ umlahVokal++;
j
​ ​ ​ ​ ​ ​} 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:
package com.unpam.materitabview;

import android.os.Bundle;
import android.app.Activity; import
android.view.Menu;
import android.view.View;
import
android.view.View.OnClickListener;
import android.widget.EditText;
 import
android.view.View.OnClickListener;
import android.widget.EditText;
import android.widget.TextView;

public class MenghitungKataActivity extends Activity implements

OnClickListener{
​EditText teksKataET;
​TextView jumlahKataTV;
​
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
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
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_menghitung_kata,
menu);
return true;

​public void onClick(View v) {

​ ​ / TODO Auto-generated method stub
/
​ ​ witch (v.getId()){
s
​ ​ ase
c
R.id.hitungKataButton:
​ ​ ​String teks = teksKataET.getText().toString();
​ ​ ​
​ ​ ​boolean kata=false, huruf;
​ ​ ​int i, jumlahKata=0, keyCode;
​ ​ ​
​ ​ ​for (i=0; i<teks.length(); i++){
​ ​ ​ ​ uruf = false;
h
​ ​ ​ ​ eyCode = teks.charAt(i);
k ​
​ ​ ​ f (((keyCode >= 65) && (keyCode <= 90))
i
||
((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:

package com.unpam.materitabview;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.widget.TabHost;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
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
public boolean onCreateOptionsMenu(Menu menu) {
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
xmlns:android="http://schemas.android.com/apk/res/android"
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