Membuat Tab Layout Menggunakan Android Material Design

(1)

Membuat Tab Layout Menggunakan Android Material Design

Fitria Arnita

fitriaarnita23@gmail.com

Abstrak

Material Design adalah panduan komprehensif untuk desain visual, gerak, dan interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan dalam spesifikasi desain bahan dan gunakan komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke atas. bertujuan untuk pengubahan interface secara masal, melainkan langkah untuk menuju New Visually Representative language, yang berarti mewujudkan visualisasi agar menyerupai bentuk nyata baik dalam teksture, bayangan dan pencahayaan. TabLayout adalah salah satu elemen utama dan paling sering digunakan sebagai menu navigasi pada aplikasi Android. Biasanya TabLayout dikombinasikan dengan Fragment, Fragment tersebut akan berganti sesuai dengan menu Tab yang diklik. Layout untuk mengatur tata letak suatu komponen pada pemrograman android, diperlukan sebuah file XML. File XML tersebut digunakan untuk mengatur antarmuka aplikasi android seperti komponen teks, tombol, dan sebagainya. Untuk meletakkan komponen-komponen tersebut diperlukan sebuah cara agar komponen yang dibuat sesuai dengan keinginan dan rapi.

Kata Kunci: Tab Layout, Material Design, Android

(2)

Pendahuluan

Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI sebuah aktivitas atau widget aplikasi. Anda dapat mendeklarasikan layout dengan dua cara:

 Deklarasikan elemen UI dalam XML. Android menyediakan sebuah kosakata XML sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk widget dan layout.

 Buat instance elemen layout saat waktu proses. Aplikasi Anda bisa membuat objek View dan ViewGroup (dan memanipulasi propertinya) lewat program.

Kerangka kerja Android memberi Anda fleksibilitas untuk menggunakan salah satu atau kedua metode ini guna mendeklarasikan dan mengelola UI aplikasi Anda. Misalnya, Anda bisa mendeklarasikan layout default aplikasi Anda dalam XML, termasuk elemen-elemen layar yang akan muncul di dalamnya dan di propertinya. Anda nanti bisa menambahkan kode dalam aplikasi yang akan memodifikasi status objek layar, termasuk yang dideklarasikan dalam XML, saat waktu proses.

Keuntungan mendeklarasikan UI dalam XML adalah karena hal ini memungkinkan Anda memisahkan penampilan aplikasi dari kode yang mengontrol perilakunya dengan lebih baik. Keterangan UI Anda bersifat eksternal bagi kode aplikasi Anda, yang berarti bahwa Anda bisa memodifikasi atau menyesuaikannya tanpa harus memodifikasi dan mengompilasi ulang kode sumber. Misalnya, Anda bisa membuat layout XML untuk berbagai orientasi layar, berbagai ukuran layar perangkat, dan berbagai bahasa. Selain itu, mendeklarasikan layout dalam XML akan mempermudah Anda memvisualisasikan struktur UI, sehingga lebih mudah men-debug masalahnya.

Karena itu, dokumen ini berfokus pada upaya mengajari Anda cara mendeklarasikan layout dalam XML. Jika Anda tertarik dalam membuat instance objek View saat waktu proses, lihat referensi kelas ViewGroup dan View.

Secara umum, kosakata XML untuk mendeklarasikan elemen UI mengikuti dengan sangat mirip struktur serta penamaan kelas dan metode, dengan nama elemen dipadankan dengan nama kelas dan nama atribut dipadankan dengan metode. Sebenarnya, pemadanan ini kerap kali begitu jelas sehingga Anda bisa menebak atribut XML yang berpadanan dengan sebuah metode kelas, atau

(3)

menebak kelas yang berpadanan dengan sebuah elemen XML. Akan tetapi, perhatikan bahwa tidak semua kosakata identik. Dalam beberapa kasus, ada sedikit perbedaan penamaan. Misalnya , elemen EditText memiliki atribut text yang berpadanan dengan EditText.setText().

Material Design adalah bahasa pemrograman visual yang dibuat oleh Google. Bahasa pemrogaman ini menggunakan tampilan visual yang menarik tapi sederhana. Material Design bukan menawarkan konsep perubahan secara masive, tetapi ini adalah langkah yang signifikan untuk menuju New Visually Representative language. Teknologi ini akan memicu design berbasis artificial yang diwujudkan kedalam bentuk yang nyata.

Pembahasan

TabLayout mulai diperkenalkan oleh Google sebagai salah satu komponen Material Design pada Design Support Library. TabLayout memudahkan kita dalam membuat tab dan mengimplementasikan ViewPager. Karena kita akan menggunakan Design Support Library, maka tambahkan library ini pada build.gradle.

(4)

Buat layout main. Di layout ini kita akan menambahkan tablayout dan viewpager

activity_main.xml

(5)

Buat 3 layout untuk masing-masing tab berikut ini :

fragment_one.xml

fragment_two.xml

(6)

fragment_three.xml

Kemudian buat 3 fragment

FragmentOne.java

package com.example.wim.androidtablayout;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* Created by docotel on 3/2/16.

*/

public class FragmentOne extends Fragment {

public static FragmentOne newInstance(){

(7)

return new FragmentOne();

}

@Nullable @Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_one, container, false);

return rootView;

} }

FragmentTwo.java

/**

*/

public class FragmentTwo extends Fragment {

public static FragmentTwo newInstance(){

return new FragmentTwo();

}

(8)

@Nullable @Override

View rootView = inflater.inflate(R.layout.fragment_two, container, false);

} }

Fragment Three

/**

*/

public class FragmentThree extends Fragment {

public static FragmentThree newInstance(){

return new FragmentThree();

}

@Nullable

(9)

@Override

View rootView = inflater.inflate(R.layout.fragment_three, container, false);

} }

Selanjutnya, membuat adapter untuk pager. Kita namai dengan ViewPagerAdapter

ViewPagerAdapter.java

import android.content.Context;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

/**

*/

public class ViewPagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 3;

final Context context;

public ViewPagerAdapter(FragmentManager fm, Context context) { super(fm);

this.context = context;

}

(10)

@Override

public Fragment getItem(int position) { Fragment fragment = null;

switch (position){

case 0:

fragment = FragmentOne.newInstance();

break;

case 1:

fragment = FragmentTwo.newInstance();

break;

case 2:

fragment = FragmentThree.newInstance();

break;

}

return fragment;

}

@Override

public CharSequence getPageTitle(int position) { switch (position){

case 0:

return context.getResources().getString(R.string.tab_1);

case 1:

case 2:

}

return null;

}

(11)

@Override

public int getCount() { return PAGE_COUNT;

} }

Terakhir adalah menambahkan pager di activity utama. Buat kelas nama MainActivity dan tambahkan code berikut.

import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;

private TabLayout tabLayout;

private ViewPager viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

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

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

setupToolbar();

(12)

init();

}

protected void setupToolbar() { if (toolbar != null) {

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowHomeEnabled(true);

} }

private void init(){

setupViewPager(viewPager);

tabLayout.setupWithViewPager(viewPager);

}

private void setupViewPager(final ViewPager viewPager) { ViewPagerAdapter viewPagerAdapter = new

ViewPagerAdapter(getSupportFragmentManager(), this);

viewPager.setAdapter(viewPagerAdapter);

viewPager.setOffscreenPageLimit(3);

viewPager.addOnPageChangeListener(new

TabLayout.TabLayoutOnPageChangeListener(tabLayout));

tabLayout.setTabsFromPagerAdapter(viewPagerAdapter);

} }

(13)

Deploy dan jalankan aplikasi, hasilnya akan tampak seperti berikut

(14)

Penutup

Material Design adalah bahasa pemrograman visual yang dibuat oleh Google. Bahasa pemrogaman ini menggunakan tampilan visual yang menarik tapi sederhana. Material Design bukan menawarkan konsep perubahan secara masive, tetapi ini adalah langkah yang signifikan untuk menuju New Visually Representative language. Teknologi ini akan memicu design berbasis artificial yang diwujudkan kedalam bentuk yang nyata.

TabLayout adalah salah satu elemen utama dan paling sering digunakan sebagai menu navigasi pada aplikasi Android. Biasanya TabLayout dikombinasikan dengan Fragment, Fragment tersebut akan berganti sesuai dengan menu Tab yang diklik.

Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI sebuah aktivitas atau widget aplikasi. Anda dapat mendeklarasikan layout dengan dua cara:

 Deklarasikan elemen UI dalam XML. Android menyediakan sebuah kosakata XML sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk widget dan layout.

 Buat instance elemen layout saat waktu proses. Aplikasi Anda bisa membuat objek View dan ViewGroup (dan memanipulasi propertinya) lewat program.

(15)

Referensi

https://www.dumetschool.com/blog/apa-itu-material-design

http://wimsonevel.blogspot.co.id/2016/03/tutorial-android-membuat-tab- dengan.html

https://www.twoh.co/2015/08/19/tutorial-tablayout-android-menggunakan- material-design-support-library/

http://www.androidnajwa.net/2016/07/mengenal-layout-di-android-lengkap.html http://www.dumetschool.com/blog/Layout-di-Android

Biografi

hai hai nama saya Fitria Arnita, saat ini saya sibuk kuliah dan bekerja. Saya kuliah di salah satu Perguruan Tinggi ilmu komputer di Tangerang angkatan 2014 sampai saat ini. Rumah saya berada di daerah Kabupaten Tangerang beralamat Dasana Indah. Kalo dengan hobi, saya lebih menyukai anime (kartun jepang), saya sampai saat ini belum pernah mengikuti organisasi, saya jurusan Sistem Informasi dan konsentrasinya Sistem Informasi Manajemen, memang saya tidak terlalu mengerti tentang IT tetapi saya belajar untuk menggelutinya. Terima kasih ya semoga bermanfaat