Membuat tabs android material design Part 1

Android design suport library mempermudah kita dalam mendesign tampilan layout di aplikasi android yang kita buat,Ada banyak component yang disediakan design suport library seperti navigation drawer, floating action button, snackbar, tabs, floating labels and animation. Pada pembahasan kita kali ini kita akan membahas penggunaan material tabs.

Membuat App MaterialKita mulai dengan membuat sebuah project baru dengan material theme.
- Buka android studio => pilih new project => beri nama CourseMaterialTabs => pilih minimum sdk API 21 => pilih blank activity => finish
- Di API 21 atau lebih besar android design support library sudah otomatis tercompile di gradle tetapi jika sdk API dibawah 21 buka build.gradle lalu kita tambahkan android design support library com.android.support:design:23.0.1
  
  dependencies {
  
      compile fileTree(dir: 'libs', include: ['*.jar'])
  
      compile 'com.android.support:appcompat-v7:23.0.1'
  
      compile 'com.android.support:design:23.0.1'
  
  }
- Lalu kita buka file colors.xml di folder res =>values lalu tambahkan color values
  
  <resources>
  
      <color name="colorPrimary">#3F51B5</color>
  
      <color name="colorPrimaryDark">#303F9F</color>
  
      <color name="textColorPrimary">#FFFFFF</color>
  
      <color name="windowBackground">#FFFFFF</color>
  
      <color name="navigationBarColor">#000000</color>
  
      <color name="colorAccent">#FF4081</color>
  
  </resources>
- Sekarang kita buka file dimens.xml di folder res => values
  
  <resources>
  
      
  
      <dimen name="activity_horizontal_margin">16dp</dimen>
  
      <dimen name="activity_vertical_margin">16dp</dimen>
  
      <dimen name="tab_max_width">264dp</dimen>
  
      <dimen name="tab_padding_bottom">16dp</dimen>
  
      <dimen name="tab_label">14sp</dimen>
  
      <dimen name="custom_tab_layout_height">72dp</dimen>
  
  </resources>
- Sekarang kita buka file style.xml di folder res => values
  
  <resources>
  
      <style name="TemaMaterial" parent="MyMaterialTheme.Base">
  
      </style>
  
      <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
  
          <item name="windowNoTitle">true</item>
  
          <item name="windowActionBar">false</item>
  
          <item name="colorPrimary">@color/colorPrimary</item>
  
          <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  
          <item name="colorAccent">@color/colorAccent</item>
  
      </style>
  
  </resources>
- Buka file AndroidManifest.xml lalu cari android:theme= lalu kita ganti dengan style yang tadi kita buat
  android:theme="@style/TemaMaterial"
- Kita coba jalankan aplikasinya
  
  Sekarang kita telah memiliki aplikasi dengan tema material design. Selanjutnya kita akan membuat fragment.
- Buat sebuah file FragmentSatu.java dan masukan kode di bawah ini :
  package com.example.webdev.coursematerialtabs;
  
  /**
  
  * Created by WEBDEV on 3/2/2016.
  
  */
  
  import android.os.Bundle;
  
  import android.support.v4.app.Fragment;
  
  import android.view.LayoutInflater;
  
  import android.view.View;
  
  import android.view.ViewGroup;
  
  import com.example.webdev.coursematerialtabs.R;
  
  public class FragmentSatu extends Fragment{
  
      public FragmentSatu() {
  
         // Required empty public constructor
  
      }
  
      @Override
  
      public void onCreate(Bundle savedInstanceState) {
  
          super.onCreate(savedInstanceState);
  
      }
  
      @Override
  
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
  
                               Bundle savedInstanceState) {
  
          // Inflate the layout for this fragment
  
          return inflater.inflate(R.layout.fragment_satu, container, false);
  
      }
  
  }
- Buat sebuah file fragment_satu.xml dan masukan kode di bawah ini :
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      android:layout_width="match_parent"
  
      android:layout_height="match_parent"
  
      tools:context="com.example.webdev.coursematerialtabs.MainActivity">
  
      <TextView
  
          android:layout_width="wrap_content"
  
          android:layout_height="wrap_content"
  
          android:text="Ini Fragment Satu"
  
          android:textSize="40dp"
  
          android:textStyle="bold"
  
          android:layout_centerInParent="true"/>
  
  </RelativeLayout>
- Dalam contoh kali ini kita menggunakan 3 buah fragment FragmentSatu.java,FragmentDua.java, dan FragmentTiga.java, silahkan anda buat Fragment dua dan tiga dengan kode yang hampir sama dengan FragmentSatu.java.
Fixed TabsFixed tabs ini berarti tabs ini posisinya tetap tidak berubah - ubah, sekarang kita coba praktekan
- Buka file activity_main.xml lalu kita masukan kode berikut ini :
  
  <android.support.design.widget.CoordinatorLayout 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="match_parent">
  
      <android.support.design.widget.AppBarLayout
  
          android:layout_width="match_parent"
  
          android:layout_height="wrap_content"
  
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  
          <android.support.v7.widget.Toolbar
  
              android:id="@+id/toolbar"
  
              android:layout_width="match_parent"
  
              android:layout_height="?attr/actionBarSize"
  
              android:background="?attr/colorPrimary"
  
              app:layout_scrollFlags="scroll|enterAlways"
  
              app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  
          <android.support.design.widget.TabLayout
  
              android:id="@+id/tabs"
  
              android:layout_width="match_parent"
  
              android:layout_height="wrap_content"
  
              app:tabMode="fixed"
  
              app:tabGravity="fill"/>
  
      </android.support.design.widget.AppBarLayout>
  
      <android.support.v4.view.ViewPager
  
          android:id="@+id/viewpager"
  
          android:layout_width="match_parent"
  
          android:layout_height="match_parent"
  
          app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  
  </android.support.design.widget.CoordinatorLayout>
- Setelah itu kita buka file MainActivity.java lalu rubah seperti kode dibawah ini
  
  package com.example.webdev.coursematerialtabs;
  
  import android.os.Bundle;
  
  import android.support.design.widget.TabLayout;
  
  import android.support.v4.app.Fragment;
  
  import android.support.v4.app.FragmentManager;
  
  import android.support.v4.app.FragmentPagerAdapter;
  
  import android.support.v4.view.ViewPager;
  
  import android.support.v7.app.AppCompatActivity;
  
  import android.support.v7.widget.Toolbar;
  
  import java.util.ArrayList;
  
  import java.util.List;
  
  import com.example.webdev.coursematerialtabs.R;
  
  import com.example.webdev.coursematerialtabs.FragmentSatu;
  
  import com.example.webdev.coursematerialtabs.FragmentDua;
  
  import com.example.webdev.coursematerialtabs.FragmentTiga;
  
  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);
  
          setSupportActionBar(toolbar);
  
          getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  
          viewPager = (ViewPager) findViewById(R.id.viewpager);
  
          setupViewPager(viewPager);
  
          tabLayout = (TabLayout) findViewById(R.id.tabs);
  
          tabLayout.setupWithViewPager(viewPager);
  
      }
  
      private void setupViewPager(ViewPager viewPager) {
  
          ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
  
        adapter.addFragment(new FragmentSatu(), "SATU");
  
          adapter.addFragment(new FragmentDua(), "DUA");
  
          adapter.addFragment(new FragmentTiga(), "TIGA");
  
          viewPager.setAdapter(adapter);
  
      }
  
      class ViewPagerAdapter extends FragmentPagerAdapter {
  
          private final List<Fragment> mFragmentList = new ArrayList<>();
  
          private final List<String> mFragmentTitleList = new ArrayList<>();
  
          public ViewPagerAdapter(FragmentManager manager) {
  
              super(manager);
  
          }
  
          @Override
  
          public Fragment getItem(int position) {
  
              return mFragmentList.get(position);
  
          }
  
          @Override
  
          public int getCount() {
  
              return mFragmentList.size();
  
          }
  
          public void addFragment(Fragment fragment, String title) {
  
              mFragmentList.add(fragment);
  
              mFragmentTitleList.add(title);
  
          }
  
          @Override
  
          public CharSequence getPageTitle(int position) {
  
              return mFragmentTitleList.get(position);
  
          }
  
      }
  
  }
- Sekarang kita coba jalankan aplikasi yang tadi kita buat lihat hasilnya

Oke sekian pembahasan kita kali ini pada pembahasan selanjutnya kita akan membahas beberapa cara menampilkan tabs meneruskan pembahasan kita kali ini, selamat mencoba semoga bermanfaat.

Download Code

Pages

Membuat tabs android material design Part 1

Belum ada tanggapan untuk "Membuat tabs android material design Part 1"

Post a Comment

Membuat tabs android material design Part 1

Postingan terkait:

Belum ada tanggapan untuk "Membuat tabs android material design Part 1"

Post a Comment