1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

マテリアルデザインっぽいボトムナビゲーションバーをサクッと実装する

Last updated at Posted at 2016-12-08

bottomnavigation

下部メニューのライブラリを探していたのですが、なかなかシンプルで使い勝手がよさそう
https://github.com/saeedsh92/bottomnavigation

Screenshot_20161208-135203_png.png

インストール


apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "24.0.0"
    defaultConfig {
        applicationId "jp.co.demo.bottommenu"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.1'
    testCompile 'junit:junit:4.12'
    // 追加
    compile 'com.ss.bottomnavigation:bottomnavigation:1.4.2'
}

MainActivity.java
mport android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.ss.bottomnavigation.BottomNavigation;
import com.ss.bottomnavigation.events.OnSelectedItemChangeListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigation bottomNavi = (BottomNavigation)findViewById(R.id.bottom_navigation);

        //デフォルト
        bottomNavi.setDefaultItem(0);

        bottomNavi.setOnSelectedItemChangeListener(new OnSelectedItemChangeListener() {
            @Override
            public void onSelectedItemChanged(int itemId) {
                switch (itemId){
                    case R.id.tab_home:
                        toast("homeが選択された");
                        break;
                    case R.id.tab_images:
                        toast("imagesが選択された");
                        break;
                    case R.id.tab_camera:
                        toast("cameraが選択された");
                        break;
                    case R.id.tab_products:
                        toast("productsが選択された");
                        break;
                    case R.id.tab_more:
                        toast("moreが選択された");
                        break;
                }
            }
        });
    }
    private void toast(String message) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
}

activity_main.xml
<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:mode="phone"
    tools:context=".MainActivity">

    <com.ss.bottomnavigation.BottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary">
        <com.ss.bottomnavigation.TabItem
            android:id="@+id/tab_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tab_text="Home"
            app:tab_icon="@mipmap/ic_launcher"
            />
        <com.ss.bottomnavigation.TabItem
            android:id="@+id/tab_images"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tab_text="Images"
            app:tab_icon="@mipmap/ic_launcher"
            />
        <com.ss.bottomnavigation.TabItem
            android:id="@+id/tab_camera"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tab_text="Camera"
            app:tab_icon="@mipmap/ic_launcher"
            />
        <com.ss.bottomnavigation.TabItem
            android:id="@+id/tab_products"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tab_text="Products"
            app:tab_icon="@mipmap/ic_launcher"
            />
        <com.ss.bottomnavigation.TabItem
            android:id="@+id/tab_more"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tab_text="More"
            app:tab_icon="@mipmap/ic_launcher"
            />
    </com.ss.bottomnavigation.BottomNavigation>
</RelativeLayout>

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?