BÀI 58 - BOTTOM NAVIGATION TRONG ANDROID

Video bài học

1. Bottom Navigation

Bottom Navigation có thể dễ dàng thêm bằng cách sử dụng thành phần BottomNavigationView. Bạn phải sử dụng gravitation hoặc các thuộc tính tương đối để làm cho nó xuất hiện ở dưới cùng của màn hình.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.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">


<FrameLayout

android:id="@+id/frame_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />


<android.support.design.widget.BottomNavigationView

android:id="@+id/navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="?android:attr/windowBackground"

app:itemBackground="@color/bgBottomNavigation"

android:foreground="?attr/selectableItemBackground"

app:itemIconTint="@android:color/white"

app:itemTextColor="@android:color/white"

app:menu="@menu/navigation" />


</android.support.design.widget.CoordinatorLayout>

Ở đây vài thuộc tính quan trọng phải ghi lại.


app:menu  File menu resource để hiển thị các mục điều hướng cùng với icon và text. app:itemBackground  Áp dụng background color cho bottom navigation.

app:itemTextColor Màu text của bottom navigation item.

app:itemIconTint Màu icon của bottom navigation item.

Hiding Bottom Navigation on Scroll

  • Theo specs thiết kế, Bottom Navigation phải được ẩn khi nội dung được cuộn để cung cấp thêm chỗ cho nội dung trên màn hình. Để đạt được điều này, chúng ta cần đính kèm BottomNavigationBehavior vào Bottom Navigation.

  • Create class với tên BottomNavigationBehavior.java cùng với đoạn code ở dưới

BottomNavigationBehavior.java

package info.androidhive.bottomnavigation.helper;


import android.content.Context;

import android.support.design.widget.BottomNavigationView;

import android.support.design.widget.CoordinatorLayout;

import android.support.v4.view.ViewCompat;

import android.util.AttributeSet;

import android.view.View;

import android.widget.FrameLayout;


public class BottomNavigationBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {


public BottomNavigationBehavior() {

super();

}


public BottomNavigationBehavior(Context context, AttributeSet attrs) {

super(context, attrs);

}


@Override

public boolean layoutDependsOn(CoordinatorLayout parent, BottomNavigationView child, View dependency) {

boolean dependsOn = dependency instanceof FrameLayout;

return dependsOn;

}


@Override

public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View directTargetChild, View target, int nestedScrollAxes) {

return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;

}


@Override

public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View target, int dx, int dy, int[] consumed) {

if (dy < 0) {

showBottomNavigationView(child);

} else if (dy > 0) {

hideBottomNavigationView(child);

}

}


private void hideBottomNavigationView(BottomNavigationView view) {

view.animate().translationY(view.getHeight());

}


private void showBottomNavigationView(BottomNavigationView view) {

view.animate().translationY(0);

}

}

  • Add BottomNavigationBehavior sử dụng setBehavior() ở trong MainActivity.java như ở bên dưới.

MainActivity.java

public class MainActivity extends AppCompatActivity {


private ActionBar toolbar;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);


BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);

navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);


// attaching bottom sheet behaviour - hide / show on scroll

CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) navigation.getLayoutParams();

layoutParams.setBehavior(new BottomNavigationBehavior());


// load the store fragment by default

// ..

}

}