Fragmentを利用したボトムタブナビゲーション（Android Bottom Navigation Bar）を使ってみよう！

ボトムナビゲーションを作ろうとしたのだが、日本語で良いドキュメントが全く見当たらない。そこで、自分で作成することにした。

frage1ファイルを開き、

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class frage1 extends Fragment {

    public static frage1 newInstance() {

        frage1 fragment = new frage1();

        return fragment;

}

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

}

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.frage_layout1, container, false);

}

}

と入力する。

activity_main.xmlに行き、以下のコードを貼り付ける。この時、テキスト表示のxmlは消して良い

<FrameLayout

    android:id=“@+id/frame_layout”

    android:layout_width=“match_parent”

    android:layout_height=“match_parent”

    android:layout_above=“@+id/navigation”

    android:animateLayoutChanges=“true”>

</FrameLayout>

MainActivityを開き、下記のコードをに修正

public class MainActivity extends AppCompatActivity {

    private TextView mTextMessage;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener

            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override

        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            Fragment selectedFragment = null;

            switch (item.getItemId()) {

                case R.id.navigation_home:

                    selectedFragment = frage1.newInstance();

                    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

                    transaction.replace(R.id.frame_layout, selectedFragment);

                    transaction.commit();

                    return true;

                case R.id.navigation_dashboard:

                    mTextMessage.setText(R.string.title_dashboard);

                    return true;

                case R.id.navigation_notifications:

                    mTextMessage.setText(R.string.title_notifications);

                    return true;

}

            return false;

}

};

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mTextMessage = (TextView) findViewById(R.id.message);

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

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

}

}

実際に開いた時にわかりやすいように、frage_layout1の背景を変更する。

例えばこんな感じに（frage_layout1.xml）

<?xml version=“1.0” encoding=“utf-8“?>

<android.support.constraint.ConstraintLayout

    xmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=“match_parent”

    android:layout_height=“match_parent”

    android:background=“@color/colorAccent”>

同じ要領で他のタブのものも作成する。

MainActivity.javaはこうなるはず

public class MainActivity extends AppCompatActivity {


    private TextView mTextMessage;


    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {


        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            Fragment selectedFragment = null;
            FragmentTransaction transaction =null;
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    selectedFragment = frage1.newInstance();
                     transaction = getSupportFragmentManager().beginTransaction();
                    transaction.replace(R.id.frame_layout, selectedFragment);
                    transaction.commit();
                    return true;
                case R.id.navigation_dashboard:
                    selectedFragment = frage2.newInstance();
                     transaction = getSupportFragmentManager().beginTransaction();
                    transaction.replace(R.id.frame_layout, selectedFragment);
                    transaction.commit();
                    return true;
                case R.id.navigation_notifications:
                    selectedFragment = frage3.newInstance();
                     transaction = getSupportFragmentManager().beginTransaction();
                    transaction.replace(R.id.frame_layout, selectedFragment);
                    transaction.commit();
                    return true;
            }
            return false;
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        mTextMessage = (TextView) findViewById(R.id.message);
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }


}

これで、ビルドするとうまく表示される。