(Tutorial Android) Bottom Navigationview Android Material Design
Bottom Navigation yaitu fitur yang baru-baru ini ditambahkan di Android Design Support versi 25. Bottom Navigation sanggup memudahkan kita menciptakan desain dengan sajian tab kafe berada di bawah (hampir sama menyerupai bottom tabs di iOS). Jika sebelumnya kita menciptakan bottom kafe menggunakan pelengkap library third party, sekarang Bottom Navigation sudah tersedia di Design Support dan siap diimplementasikan di aplikasi kita.
Pada tutorial kali ini aku akan membahas implementasi dari Bottom NavigationView.
Pertama-tama kita tambahkan dulu design support library versi 25 di gradle.
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:25.0.0' compile 'com.android.support:design:25.0.0' } Membuat Layout
Buat sebuah layout activity_main.xml dan tambahkan Bottom Navigation View di dalamnya. Karena Bottom Navigation ini letaknya harus di bawah, maka kita harus mendefinisikan letaknya dengan atribut layout_alignParentBottom="true".
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.wimso.androidbottomnavigation.MainActivity"> <FrameLayout android:id="@+id/flContent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_navigation" /> <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:itemBackground="@color/colorPrimary" app:itemIconTint="@color/colorWhite" app:itemTextColor="@color/colorWhite" app:menu="@menu/bottom_menu"/> </RelativeLayout>Beberapa atribut yang ada di Bottom Navigation :
- app:itemBackground - Warna background pada bottom navigation menu
- app:itemIconTint -Tint yang sanggup dipakai pada icon menu
- app:itemTextColor – Warna text pada bottom navigation menu
- app:menu – resource sajian untuk menampilkan item pada bottom navigation sajian
Kemudian buat beberapa layout lagi untuk menu-menu di Bottom Navigation.
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/home" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>fragment_notification.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/notifications" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>fragment_favorites.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/favorites" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>fragment_search.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/search" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/profile" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>
Tambahkan beberapa resources.
strings.xml
<resources> <string name="app_name">AndroidBottomNavigation</string> <string name="home">Home</string> <string name="notifications">Notifications</string> <string name="favorites">Favorites</string> <string name="search">Search</string> <string name="profile">Profile</string> </resources>colors.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#F44336</color> <color name="colorPrimaryDark">#E53935</color> <color name="colorAccent">#FF4081</color> <color name="colorWhite">#FFFFFF</color> </resources>
Buat beberapa fragment untuk setiap sajian bottom navigation.
HomeFragment.java
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; import com.wimso.androidbottomnavigation.R; /** * Created by Wim on 11/30/16. */ public class HomeFragment extends Fragment { public static HomeFragment newInstance() { return new HomeFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_home, container, false); return view; } } NotificationFragment.java 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; import com.wimso.androidbottomnavigation.R; /** * Created by Wim on 11/30/16. */ public class NotificationFragment extends Fragment { public static NotificationFragment newInstance() { return new NotificationFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_notification, container, false); return view; } } FavoritesFragment.java 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; import com.wimso.androidbottomnavigation.R; /** * Created by Wim on 11/30/16. */ public class FavoritesFragment extends Fragment { public static FavoritesFragment newInstance() { return new FavoritesFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_favorites, container, false); return view; } } SearchFragment.java 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; import com.wimso.androidbottomnavigation.R; /** * Created by Wim on 11/30/16. */ public class SearchFragment extends Fragment { public static SearchFragment newInstance() { return new SearchFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_search, container, false); return view; } } ProfileFragment.java 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; import com.wimso.androidbottomnavigation.R; /** * Created by Wim on 11/30/16. */ public class ProfileFragment extends Fragment { public static ProfileFragment newInstance() { return new ProfileFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_profile, container, false); return view; } } Selanjutnya buat MainActivity dan lengkapi code berikut :import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MenuItem; import com.wimso.androidbottomnavigation.fragment.FavoritesFragment; import com.wimso.androidbottomnavigation.fragment.HomeFragment; import com.wimso.androidbottomnavigation.fragment.NotificationFragment; import com.wimso.androidbottomnavigation.fragment.ProfileFragment; import com.wimso.androidbottomnavigation.fragment.SearchFragment; public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener { BottomNavigationView bottomNavigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if(savedInstanceState == null) { getSupportFragmentManager() .beginTransaction() .replace(R.id.flContent, HomeFragment.newInstance()) .commit(); } bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener(this); } @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Fragment fragment = null; switch (item.getItemId()) { case R.id.action_home: fragment = HomeFragment.newInstance(); break; case R.id.action_notifications: fragment = NotificationFragment.newInstance(); break; case R.id.action_favorites: fragment = FavoritesFragment.newInstance(); break; case R.id.action_search: fragment = SearchFragment.newInstance(); break; case R.id.action_profile: fragment = ProfileFragment.newInstance(); break; } getSupportFragmentManager() .beginTransaction() .replace(R.id.flContent, fragment) .commit(); return false; } } Build dan jalankan kesannya akan tampak sebagai berikut :
Source code lengkap sanggup dilihat di https://github.com/andronut/AndroidBottomNavigation
Sekian tutorial kali ini, biar bermanfaat.
Terima kasih :)
Comments
Post a Comment