Membuat Tab Layout Menggunakan Android Material Design

Membuat Tab Layout Menggunakan Android Material Design Fitria Arnita [email protected]

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 Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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 Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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.

Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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


Buat 3 layout untuk masing-masing tab berikut ini : fragment_one.xml

fragment_two.xml


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(){


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

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 FragmentTwo extends Fragment { public static FragmentTwo newInstance(){ return new FragmentTwo(); } Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

@Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_two, container, false); return rootView; } } Fragment Three

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 FragmentThree extends Fragment {

public static FragmentThree newInstance(){ return new FragmentThree(); } @Nullable Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_three, container, false); return rootView; } } Selanjutnya, membuat adapter untuk pager. Kita namai dengan ViewPagerAdapter

ViewPagerAdapter.java

package com.example.wim.androidtablayout;

import android.content.Context; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; /** * Created by docotel on 3/2/16. */ public class ViewPagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 3; final Context context; public ViewPagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

@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: return context.getResources().getString(R.string.tab_2); case 2: return context.getResources().getString(R.string.tab_3); } return null; }


@Override public int getCount() { return PAGE_COUNT; } } Terakhir adalah menambahkan pager di activity utama. Buat kelas nama MainActivity dan tambahkan code berikut.

package com.example.wim.androidtablayout; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; 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(); Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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); } }


Deploy dan jalankan aplikasi, hasilnya akan tampak seperti berikut


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.


Referensi https://www.dumetschool.com/blog/apa-itu-material-design http://wimsonevel.blogspot.co.id/2016/03/tutorial-android-membuat-tabdengan.html https://www.twoh.co/2015/08/19/tutorial-tablayout-android-menggunakanmaterial-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


Membuat Tab Layout Menggunakan Android Material Design

Recommend Documents