Tutorial Dasar Cara Membuat Aplikasi Android Menggunakan TabLayout

Tutorial Dasar Cara Menggunakan TabLayout di android studio

Halo para android developer. Bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial dasar cara membuat tablayout material design di android studio.

Android Design Support Library memudahkan kita membuat aplikasi android dengan menyediakan komponen material design yang keren. Ada banyak komponen material design yang telah di sediakan oleh android studio untuk para android developer untuk membuat aplikasinya termasuk Floating Action Button (FAB), Snackbar, Navigation Drawer, TabLayout, Bottom Navigation dan lain-lain. Yang dapat dengan mudah di implementasikan ke aplikasi kita dengan penulisan kode yang sedikit.

Dalam tutorial ini, kalian akan belajar cara membuat aplikasi android untuk membuat tab menggunakan TabLayout Material Design di android studio.

- Advertisement -

Tutorial Dasar Cara Membuat TabLayout Material Design di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Tab App
Package Name:com.androidrion.tabapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  • activity_main.xml
  • styles.xml

Daftar file java yang digunakan dalam projek ini:

  • MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Tab App.

Dependencies File

Untuk bisa menggunakan TabLayout Material Design dalam projek android studio, kalian harus menambahkan module material design ke dalam projek android studio. Buka file build.gradle (Module: app) pada projek android studio kalian dan tambahkan kode di bawah ini pada bagian dependecies.

Build Gradle/build.gradle (Module: app)

    implementation 'com.google.android.material:material:1.0.0'

lakukan sinkronisasi setelah kalian menambahkan kode diatas dengan cara klik sync pada aplikasi android studio di bagian kanan atas.

Styles File

Buka file styles.xml dalam folder values. Tambahkan kode di bawah ini untuk membuat toolbar menjadi hilang. Berikut ini adalah kode lengkap untuk file styles.xml

app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

XML Layout File

Buka file activity_main.xml pada projek android studio kalian dan tambahkan kode dibawah ini. Untuk bisa membuat TabLayout, kalian harus menggunakan widget CoordinatorLayout. Lalu setelah itu, tambahkan AppBarLayout di dalam layout tersebut. Barulah kalian bisa menambahkan TabLayout dan widget Toolbar di dalamnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Java File

Sekarang buka file MainActivity dalam folder java pada projek android studio kalian dan tambahkan kode dibawah ini untuk membuat jumlah tab yang akan di tampilkan beserta teksnya. Berikut ini adalah kode lengkap untuk file MainActivity.java

package com.androidrion.tabapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        TabLayout tabLayout = findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("Chat"));
        tabLayout.addTab(tabLayout.newTab().setText("Status"));
        tabLayout.addTab(tabLayout.newTab().setText("Call"));
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat tiga tab dengan teks CHAT, STATUS dan CALL yang berada di bawah toolbar aplikasi. Secara default, tab chat telah aktif dan kalian bisa memilih tab lain untuk mengaktifkannya. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial sederhana cara membuat menu tab di aplikasi android menggunakan tablayout material design. Tutorial diatas sangatlah mudah dikerjakan karena kode yang digunakan tidak begitu banyak untuk membuat tampilan menu di aplikasi android studio. Tentu tutorial ini masih bisa dikembangkan seperti menampilkan layout lain ketika menu tab di pilih.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.