Cara Menampilkan Ikon Pada Menu TabLayout di Aplikasi Android

Hai kalian semua, bagaimana kabarnya hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah pernah membagikan tutorial dasar cara membuat tablayout di android studio dan cara menggunakan viewpager pada tablayout untuk menampilkan activity baru. Pada tutorial tersebut, kalian hanya membuat tablayout yang menampilkan teks saja. Untuk itu, pada artikel ini saya akan membagikan tutorial cara menampilkan ikon di tiap-tiap menu tablayout pada aplikasi android.

Banyak sekali aplikasi android yang menggunakan TabLayout sebagai menu utama dari tampilan aplikasi. Tidak hanya karena mudah digunakan, tetapi ini adalah fitur andalan dari Material Design. Contoh aplikasi yang menerapkan menu tablayout yang menampilkan ikon di dalamnya sering kita jumpai pada aplikasi e-commerce atau online shop. Bahkan, aplikasi sosial media facebook pernah menggunakan tampilan ini di versi sebelumnya.

Untuk itu, pada tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan ikon di tiap-tiap menu tablayout pada project android studio dengan cara yang mudah dan sederhana menggunakan library material design.

- Advertisement -

Tutorial Cara Menampilkan Ikon Pada Menu TabLayout di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Tab Icon Text
Package Name:com.androidrion.tabicontext
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml
  2. fragment_call.xml
  3. fragment_chat.xml
  4. fragment_dashboard.xml

Daftar file java yang digunakan dalam project ini:

  1. FragmentCall.java
  2. FragmentChat.java
  3. FragmentDashboard.java
  4. MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Tab Icon Text.

Library Material Design

Untuk menggunakan TabLayout pada project android studio kalian, tambahkan terlebih dahulu library material design. Berikut ini adalah kode library material design yang harus kalian tambahkan dalam file build.gradle (Module: app)

Gradle Scripts/build.gradle (Module: app)

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

Ikuti tutorial di bawah ini untuk menambahkan library material design ke dalam projek android studio.

CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO

Drawable File

Sesuai dari judul artikel, maka kita memerlukan ikon yang akan kita gunakan dalam projek ini. Dalam tutorial ini saya menggunakan ikon di bawah ini untuk di tampilkan pada menu TabLayout.

Ikuti tutorial dibawah ini untuk menambahkan ikon ke dalam project android studio.

CARA MENAMBAHKAN IKON KE DALAM PROJECT ANDROID STUDIO

Styles File

Buka file styles.xml dalam folder values dan ubah theme menjadi NoActionBar.

XML Layout File

Buka file activity_main.xml dalam folder layout. Tambahkan AppBarLayout yang didalamnya terdapat Toolbar dan TabLayout. Serta tambahkan juga ViewPager untuk menampilkan activity baru ketika menu tab di pilih. Dibawah 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"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="@string/app_name"
            app:titleTextColor="@android:color/white" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@color/colorPrimary" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Buat Fragment Layout & Java File

  1. Buatlah 3 Fragment Activity baru dengan cara klik kanan pada folder layout, lalu pilih New>Fragment>Fragment (Blank).
  2. Simpan ketiga file fragment tersebut seperti yang tertera di atas pada daftar file yang digunakan dalam project ini.
  3. Hilangkan ceklis untuk Include fragment factory methods? dan Include interface callbacks? (Ikuti seperti pada gambar di bawah ini)
Tutorial Cara Menampilkan Ikon di menu tablayout pada android studio

Jika kalian selesai, maka struktur projek akan terlihat seperti pada gambar dibawah ini.

Tutorial Cara Menampilkan Ikon di menu tablayout pada android studio

Dibawah ini adalah kode lengkap untuk file Fragment Java.

app/java/com.androidrion.tabicontext/FragmentCall.java

package com.androidrion.tabicontext;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentCall extends Fragment {


    public FragmentCall() {
        // Required empty public constructor
    }

    public static FragmentCall newInstance() {
        
        Bundle args = new Bundle();
        
        FragmentCall fragment = new FragmentCall();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_call, container, false);
    }

}

app/java/com.androidrion.tabicontext/FragmentChat.java

package com.androidrion.tabicontext;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentChat extends Fragment {
    public FragmentChat() {
        // Required empty public constructor
    }

    public static FragmentChat newInstance() {
        
        Bundle args = new Bundle();
        
        FragmentChat fragment = new FragmentChat();
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_chat, container, false);
    }
    
}

app/java/com.androidrion.tabicontext/FragmentDashboard.java

package com.androidrion.tabicontext;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentDashboard extends Fragment {


    public FragmentDashboard() {
        // Required empty public constructor
    }

    public static FragmentDashboard newInstance() {
        
        Bundle args = new Bundle();
        
        FragmentDashboard fragment = new FragmentDashboard();
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_dashboard, container, false);
    }

}

Java Activity File

Buka file MainActivity dalam folder java pada project android studio kalian. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.tabicontext/MainActivity.java

package com.androidrion.tabicontext;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        ViewPager view_pager = findViewById(R.id.view_pager);
        TabLayout tab_layout = findViewById(R.id.tab_layout);
        setupViewPager(view_pager);

        tab_layout.setupWithViewPager(view_pager);

        tab_layout.getTabAt(0).setIcon(R.drawable.ic_dashboard);
        tab_layout.getTabAt(1).setIcon(R.drawable.ic_chat);
        tab_layout.getTabAt(2).setIcon(R.drawable.ic_call);

        // set icon color pre-selected
        tab_layout.getTabAt(0).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
        tab_layout.getTabAt(1).getIcon().setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_IN);
        tab_layout.getTabAt(2).getIcon().setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_IN);

        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_IN);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void setupViewPager(ViewPager viewPager) {
        SectionsPagerAdapter viewPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragment(FragmentDashboard.newInstance(), "DASHBOARD");
        viewPagerAdapter.addFragment(FragmentChat.newInstance(), "CHAT");
        viewPagerAdapter.addFragment(FragmentCall.newInstance(), "CALL");
        viewPager.setAdapter(viewPagerAdapter);
    }


    private class SectionsPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        SectionsPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

Run ‘app’

Sekarang jalankan project android studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat ikon di menu tablayout pada project android studio. Tutorial diatas sangatlah mudah dikerjakan jika kalian sudah pernah mengerjakan dua tutorial sebelumnya. Karena untuk tutorial yang ini tidak jauh beda dengan tutorial sebelumnya.

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.

Download Projek

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

[sociallocker id=”1406″]

[/sociallocker]

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