BAB I

PENDAHULUAN

1.1 Latar Belakang

Di android studio, menu dan tab digunakan untuk meningkatkan
antarmuka pengguna aplikasi android. Menu, terutama options menu,
context menu, dan popup menu, memberikan akses cepat ke fungsionalitas
dan tindakan. Menu didefinisikan dalam XML dan diintegrasikan dengan
action-bar atau tool-bar di aktivitas. Menu dan tab adalah komponen
antarmuka pengguna yang lazim digunakan dalam pengembangan aplikasi
android. Menu digunakan untuk menyajikan tindakan dan opsi lain kepada
pengguna dalam aktivitas. Mulai dari android 3.0 (api level 11), perangkat
android tidak perlu lagi menyediakan tombol menu tersendiri, sehingga
aplikasi android harus bermigrasi dari dependensi pada panel menu 6 item
biasa.
Sementara itu, tab digunakan untuk menyusun konten menjadi kategori
atau halaman, memungkinkan pengguna beralih dengan mudah antara
bagian berbeda dalam aplikasi. Tab-layout dan view-pager sering digunakan
bersama untuk mengimplementasikan tab, dengan view-pager mengelola
konten dan tab-layout menyediakan antarmuka pengguna untuk memilih
tab. Anda dapat membuat menu dan tab di android studio dengan
menambahkan file XML khusus dan mengonfigurasi aktivitas anda untuk
menggunakan menu atau tab tersebut. Selain itu, anda juga dapat membuat
menu menggunakan Java dan XML, serta mengatur aksi yang terkait
dengan item menu menggunakan metode khusus.

1.2 Tujuan praktikum

1. Mahasiswa mampu membuat menu.
2. Mahasiswa mampu mampu membuat tab.
3. Mahasiswa mampu mengkreasikan views.
 BAB II
DASAR TEORI

2.1 Membuat menu

Membuat menu dalam android studio melibatkan beberapa langkah yang
penting. Berikut adalah dasar teori tentang membuat menu dalam android
studio:
1. Membuat folder menu
Buat folder dengan nama menu di dalam folder res. Anda dapat
melakukannya dengan mengklik kanan folder res > new > directory, lalu
beri nama dengan nama menu.
2. Membuat layout option menu
Buat file XML yang berisi layout menu. Anda dapat membuatnya di
dalam folder menu yang telah dibuat. Contoh layout menu XML:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/">
<item
android:id="@+id/menu_item_1"
android:title="Menu Item 1" />
<item
android:id="@+id/menu_item_2"
android:title="Menu Item 2" />
</menu>

3. Meng-inflate menu
Untuk menggunakan menu dalam aktivitas, anda perlu meng-inflate
resource menu (meng-onversi resource XML menjadi objek). Pengguna
dapat melakukannya dalam metode oncreate-options-menu di kelas
aktivitas pengguna.
4. Mengatur aksi menu
Pengguna dapat mengatur aksi yang terkait dengan item menu
menggunakan metode khusus, seperti on-options-item-selected.
5. Menampilkan menu
Untuk menampilkan menu, pengguna dapat menggunakan metode show-
menu atau show-context-menu.
2.2 Membuat tab
Untuk membuat tab di android studio, anda dapat mengikuti langkah-
langkah berikut:
1. Tab layout
• Tab layout adalah bagian dari android design support library yang
menyediakan antarmuka pengguna untuk menyusun konten menjadi
beberapa tab.
• Digunakan untuk membuat tata letak yang memungkinkan pengguna
untuk beralih antara bagian atau kategori berbeda dalam aplikasi.
2. View pager
• View-pager adalah wadah untuk mengelola dan menampilkan fragmen
atau tampilan halaman yang berbeda.
• Biasanya digunakan bersama dengan tab layout untuk membuat
antarmuka tab yang dapat digulir.
3. Fragment
• Fragment digunakan untuk merepresentasikan bagian dari antarmuka
pengguna atau perilaku dalam aplikasi android.
• Setiap tab dapat memiliki fragmen yang berbeda untuk menampilkan
konten yang sesuai.
4. Adapter
• Sebuah adapter (misalnya, fragment-pager-adapter atau pragment-
state-pager-adapter) digunakan untuk menyediakan fragmen yang akan
ditampilkan dalam view pager.
• Adapter membantu mengelola tampilan dan memastikan responsif
terhadap perubahan tab.
5. Implementasi tab
• Dalam XML layout, anda menambahkan tab layout dan view pager.
• Dalam aktivitas, anda membuat adapter untuk mengelola fragmen dan
meng-onfigurasi tab layout untuk berinteraksi dengan view pager.
 // Inisialisasi TabLayout dan ViewPager

TabLayout tabLayout = findViewById(R.id.tab_layout);

ViewPager viewPager = findViewById(R.id.view_pager);

// Menghubungkan ViewPager dengan TabLayout

TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager());

viewPager.setAdapter(tabAdapter);

tabLayout.setupWithViewPager(viewPager);

6. Tab adapter
• Tab adapter adalah kelas adapter yang anda buat untuk mengelola
fragmen dan menentukan tindakan yang terkait dengan setiap tab.
7. Pager title strip
• Pager title strip dapat ditambahkan untuk menampilkan judul tab di
bagian atas view pager.
8. Cumtomization
• Anda dapat menyesuaikan tata letak, warna, dan gaya tab sesuai dengan
kebutuhan desain aplikasi.
9. Responsif terhadap perubahan
• Tab layout dan view pager memungkinkan pengguna untuk beralih
antara fragmen dengan menggeser atau mengetuk tab.
• Adapter memastikan bahwa konten yang sesuai ditampilkan saat
pengguna memilih tab baru.
 BAB III
HASILDAN PEMBAHASAN
 BAB IV
IMPLEMENTASI

4.1 Kegiatan Praktikum

1. Kegiatan 1 menu
a. Kode program xml
<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:context="com.example.menu01.MainActivity"
>
<item
android:orderInCategory="100"
android:title="kelola"
app:showAsAction="never"
android:id="@+id/kelola"/>
<item
android:id="@+id/bantuan"
android:orderInCategory="100"
android:title="bantuan"
app:showAsAction="never"/>

</menu>

b. Kode program Java

package com.example.menu01;
import android.os.Bundle; import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu (Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id =item.getItemId();
if (id == R.id.kelola) {
Toast.makeText(getApplicationContext(), "menu kelola dipilih",
Toast.LENGTH_LONG).show();
}else if(id == R.id.bantuan) {
Toast.makeText(getApplicationContext(), "menu bantuan dipilih",
Toast.LENGTH_LONG).show();
}
 return super.onOptionsItemSelected(item);
}
}

Program di atas adalah sebuah kode program dalam bahasa

pemrograman Java yang digunakan untuk membuat menu pada aplikasi
android. Kode program tersebut terdiri dari tiga bagian yaitu file XML
untuk menentukan tampilan menu, kelas main activity untuk mengatur
perilaku menu, dan metode on-create-options-menu dan onptions-item-
selected untuk menampilkan menu dan menangani aksi pengguna pada
menu. Pada file XML, terdapat dua item menu yaitu kelola dan bantuan.
c. Hasil program

Gambar 3.1 hasil program pembuatan menu.

Program di atas adalah sebuah kode program dalam bahasa

pemrograman Java yang digunakan untuk membuat menu pada aplikasi
android. Kode program tersebut terdiri dari tiga bagian yaitu file XML
untuk menentukan tampilan menu, kelas main activity untuk mengatur
perilaku menu.
2. Kegiatan 2 tab
a. Kode program xml
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />

<FrameLayout

android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom" />

</LinearLayout>

</TabHost>

b. Kode program Java

package com.uts.contohtab;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;

import com.uts.contohtab.MainActivity1;
import com.uts.contohtab.MainActivity2;
import com.uts.contohtab.MainActivity3;
import com.uts.contohtab.R;
@SuppressWarnings("deprecation")
public class mainactivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabhost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, MainActivity1.class);
TabHost spectabhost;
spec= tabhost.newTabSpec("Activity1").setIndicator("Activity 1",
null).setContent(intent);
tabhost.addTab(spec);
intent = new Intent().setClass(this, MainActivity2.class);

spec = tabhost.newTabSpec("Activity2").setIndicator("Activity2",
null).setContent(intent);
tabhost.addTab(spec);

intent = new Intent().setClass(this, MainActivity3.class);

 spec = tabhost.newTabSpec("Activity3").setIndicator("Activity3",
null).setContent(intent);
tabhost.addTab(spec);
}
}

Kode tersebut adalah implementasi tab host di android

menggunakan tab activity (yang sudah usang). Tab host memiliki tiga
tab dengan masing-masing menunjukkan ke aktivitas berbeda: main
activity1, main activity2, dan main activity3.
c. Hasil program

Gambar 3.2 Hasil Program tab.

Gambar tersebut adalah implementasi tab host di android

menggunakan tab activity (yang sudah usang). Tab host memiliki tiga
tab dengan masing-masing menunjukkan ke aktivitas berbeda: main
activity1, main activity2, dan main activity3.

4.2 Tugas praktikum

4.2.1 Soal
1. Buatlah option menu seperti gambar dibawah.

4.2.2 Jawaban
1. Membuat option menu
a. Kode program xml 1.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

b. Kode progranam xml 2

<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:context="com.kuliah.myapp.MainActivity">

<item
app:showAsAction="always"
android:icon="@drawable/titik"
android:title="">
<menu>
<item
android:id="@+id/cerita"
android:title="Cerita Saya"
android:icon="@drawable/cerita"
app:showAsAction="never"/>
<item
android:id="@+id/grup"
android:title="Group Baru"
android:icon="@drawable/grup"
app:showAsAction="never"/>
<item
android:id="@+id/teman"
android:title="Undang Teman"
android:icon="@drawable/undang"
app:showAsAction="never"/>
<item
android:id="@+id/call"
android:icon="@drawable/ic_baseline_call_24"
android:title="call"
app:showAsAction="never"/>
<item
android:id="@+id/simpan"
android:title="Pesan Tersimpan"
android:icon="@drawable/pesan"
app:showAsAction="never"/>
<item
android:id="@+id/setting"
android:icon="@drawable/pengaturan"
android:title="Pengaturan"
app:showAsAction="never"/>
</menu>
</item>
</menu>
c. Kode program Java
package com.kuliah.myapp;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id) {
case R.id.cerita:
Toast.makeText(getApplicationContext(), "Menu Cerita Saya dipilih",
Toast.LENGTH_LONG).show();
return true;
case R.id.grup:
Toast.makeText(getApplicationContext(), "Menu grup dipilih",
Toast.LENGTH_LONG).show();
return true;
case R.id.teman:
Toast.makeText(getApplicationContext(), "Menu teman dipilih",
Toast.LENGTH_LONG).show();
return true;
case R.id.call:
Toast.makeText(getApplicationContext(), "Menu call dipilih",
Toast.LENGTH_LONG).show();
return true;
case R.id.simpan:
Toast.makeText(getApplicationContext(), "Menu simpan dipilih",
Toast.LENGTH_LONG).show();
return true;
case R.id.setting:
Toast.makeText(getApplicationContext(), "Menu Pengaturan dipilih",
Toast.LENGTH_LONG).show();
return true;
default:
return super.onOptionsItemSelected(item);
} }
}

Kode tersebut merupakan implementasi menu over-flow pada

action-bar di android. Menu tersebut memiliki beberapa opsi seperti
cerita saya, group baru, undang teman, call, pesan tersimpan, dan
pengaturan. Ketika salah satu opsi dipilih, akan muncul pesan toast
yang memberi tahu pengguna opsi yang dipilih.
 d. Hasil program

Gambar 3.3 Hasil Program menu.

Gambar diatas merupakan tampilan dari implementasi menu over-
flow pada action-bar di android. Menu tersebut memiliki beberapa
opsi seperti cerita saya, group baru, undang teman, call, pesan
tersimpan, dan pengaturan. Ketika salah satu opsi dipilih, akan muncul
pesan toast yang memberi tahu pengguna opsi yang dipilih.

4.3 Tugas tambahan

4.3.1 Soal
1. Buatlah custom layout navigation view!

4.3.2 Jawaban
1. Membuat custom layout navigation view.
a. Kode program xml
<?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="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:orientation="vertical"
android:gravity="bottom">
<ImageView
 android:id="@+id/imageView"
android:layout_width="75dp"
android:layout_height="77dp"
android:contentDescription="@string/nav_header_desc"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@drawable/logo" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Fahmi Kusairi"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Praktikum android bikin sakit kepala"
android:id="@+id/textView" />
</LinearLayout>

b. Kode program Java

package com.example.mavigation;
import android.os.Bundle;
import android.view.View;
import android.view.Menu;
import com.google.android.material.snackbar.Snackbar;
import com.google.android.material.navigation.NavigationView;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.appcompat.app.AppCompatActivity;
import com.example.mavigation.databinding.ActivityMainBinding;
public class MainActivity extends AppCompatActivity {
private AppBarConfiguration mAppBarConfiguration;
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
setSupportActionBar(binding.appBarMain.toolbar);
binding.appBarMain.fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action",
Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = binding.drawerLayout;
NavigationView navigationView = binding.navView;
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
mAppBarConfiguration = new AppBarConfiguration.Builder(
R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)
.setOpenableLayout(drawer)
.build();
NavController navController = Navigation.findNavController(this,
R.id.nav_host_fragment_content_main);
NavigationUI.setupActionBarWithNavController(this, navController,
mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
}
 @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onSupportNavigateUp() {
NavController navController = Navigation.findNavController(this,
R.id.nav_host_fragment_content_main);
return NavigationUI.navigateUp(navController, mAppBarConfiguration)
|| super.onSupportNavigateUp();
}
}
Kode tersebut merupakan implementasi aplikasi android dengan
navigation drawer. Pada tampilan utama (nav_header_main.xml),
terdapat header dengan gambar, nama, dan deskripsi. Pada main
activity.Java, digunakan android navigation component untuk
mengelola navigasi, menangani action bar, floating action button, dan
drawer layout.
c. Hasil program

Gambar 3.4 Hasil Program navigation.

Gambar di atas adalah hasil program menampilkan navigation,
merupakan implementasi aplikasi android dengan navigation drawer.
Pada tampilan utama (nav_header_main.xml), terdapat header dengan
gambar, nama, dan deskripsi.
 BAB V
PENUTUP

5.1 Analisa
Menu dan tab di android studio adalah komponen penting dalam aplikasi
yang memungkinkan pengguna untuk mengakses berbagai fitur dan fungsi
dalam aplikasi dengan mudah dan intuitif. Menu dapat berupa tiga jenis:
menu opsi, menu konteks, dan sub menu, sementara tab digunakan untuk
mengorganisir konten dan memungkinkan pengguna untuk beralih antara
tampilan yang berbeda.

5.2 Kesimpulan
Dengan memahami dasar teori tentang menu dan tab di android studio,
user dapat membuat dan mengelola menu dan tab dengan efisien dalam
aplikasi. User perlu menambahkan kode XML dan Java (fragments) ke dalam
proyek untuk menggunakan tab layout dan view pager, atau tab host. Selain
itu, user juga perlu memahami cara menggunakan adapter untuk mengatur
konten yang akan ditampilkan dalam tab.

5.3 Saran
Untuk menggunakan menu dan tab dalam android studio, user perlu
memahami cara mendefinisikan menu dalam file XML, menggunakannya di
aktivitas, dan mengatur konten dalam tab. Selain itu, user juga perlu
memahami cara membuat tab dengan tab layout dan view pager, atau tab
host. Dengan memahami cara-cara ini, user akan dapat membuat dan
mengelola menu dan tab dalam proyek android studio dengan lebih baik.