BottomBar in android


I have created BottomBar example using this beautiful library.
https://github.com/roughike/BottomBar

Credits : Iiro Krankka


Step: 1
======
Add this library to your gradle file


1
2
3
dependencies {
        compile 'com.roughike:bottom-bar:1.2.4'
}

Step: 2
======
Now create menu folder under res folder.

res/menu/bottombar_menu.xml

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home_white_24dp"
        android:title="Home" />

    <item
        android:id="@+id/nav_fav"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Favourites" />

    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_dashboard"
        android:title="Gallery" />

    <item
        android:id="@+id/nav_events"
        android:icon="@drawable/ic_event_note_black_24dp"
        android:title="Events" />
    <item
        android:id="@+id/nav_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="Alerts" />


</menu>


Step: 3
======

Now create an xml layout for the activity.

activity_main.xml


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?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"
    android:id="@+id/myCoordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvLabel"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text=""
                android:textSize="20sp" />


        </LinearLayout>
    </LinearLayout>


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



Step: 4
======
Create an activity and add the bottom bar from menu items


1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
package com.pratap.bottombar;


import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;

import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.BottomBarBadge;
import com.roughike.bottombar.OnMenuTabClickListener;

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    private TextView tvLabel;

    private Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        tvLabel = (TextView) findViewById(R.id.tvLabel);

        mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.noNavBarGoodness();

        mBottomBar.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {

                if (menuItemId == R.id.nav_home) {

                    updateTextView("Home");

                } else if (menuItemId == R.id.nav_fav) {
                    updateTextView("Favourites");

                } else if (menuItemId == R.id.nav_gallery) {
                    updateTextView("Gallery");

                } else if (menuItemId == R.id.nav_events) {
                    updateTextView("Events");

                } else if (menuItemId == R.id.nav_notifications) {
                    updateTextView("Alerts");


                }
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                if (menuItemId == R.id.nav_home) {
                    // The user reselected item number one, scroll your content to top.

                }
            }
        });


        // Setting colors for different tabs when there's more than three of them.
        // You can set colors for tabs in three different ways as shown below.
        mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorPrimaryDark));
        mBottomBar.mapColorForTab(1, ContextCompat.getColor(this, R.color.colorPrimaryDark));
        mBottomBar.mapColorForTab(2, ContextCompat.getColor(this, R.color.colorPrimaryDark));
        mBottomBar.mapColorForTab(3, ContextCompat.getColor(this, R.color.colorPrimaryDark));
        mBottomBar.mapColorForTab(4, ContextCompat.getColor(this, R.color.colorPrimaryDark));


        // Set the color for the active tab. Ignored on mobile when there are more than three tabs.
        //  mBottomBar.setActiveTabColor("#009688");


        // mBottomBar.selectTabAtPosition(1, true);

        setNotificationBadge();


    }


    private void setNotificationBadge() {

        // Make a Badge for the first tab, with red background color and a value of "13".
        BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(4, "#FF0000", 10);

        // Control the badge's visibility
        unreadMessages.show();
        //     unreadMessages.hide();

        // Change the displayed count for this badge.
        unreadMessages.setCount(4);

        // Change the show / hide animation duration.
        unreadMessages.setAnimationDuration(200);

        // If you want the badge be shown always after unselecting the tab that contains it.
        unreadMessages.setAutoShowAfterUnSelection(false);
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        mBottomBar.onSaveInstanceState(outState);
    }


    public void updateTextView(String text) {


        tvLabel.setText(text);
    }


}


Screenshots
=========
                                          





Source Code
=========
BottomBar

BottomBarWithFragments


Demo
=====







Comments

Post a Comment

Popular posts from this blog

Flutter ListView Search

Image
  contactslist.dart ================ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 class ContactsList extends StatefulWidget { static String tag = 'contactlist-page' ; @ override State < StatefulWidget > createState() { return new _ContactsListState(); } } List < Contact > contacts = [ Contact( fullName: 'Pratap Kumar' , email: 'pratap@example.com' ), Contact( fullName: 'Jagadeesh' , email: 'Jagadeesh@example.com' ), Contact( fullName: 'Srinivas' , email: 'Srinivas@example.com' ), Contact( ful...
Read more

Flutter Navigation Drawer Example

Image
main.dart ========= import 'package:flutter/material.dart' ; import 'package:akeepo/navdrawer.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @ override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter' , debugShowCheckedModeBanner: false , theme: ThemeData( primarySwatch: Colors.blue, ), home: NavDrawer(), ); } } navdrawer.dart ================ import 'package:flutter/material.dart' ; class NavDrawer extends StatefulWidget { @ override _NavDrawerState createState() => _NavDrawerState(); } class _NavDrawerState extends State < NavDrawer > { @ override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( "Nav Drawer" )), drawer: new Drawer( child: new ListView( children: < ...
Read more

Swipe RecyclerView using AndroidSwipeLayout

Image
Android Swipe Layout This will be the most powerful Android swipe UI component In one of my Project, I have a requirement to create a Swiping Layout For RecyclerView. I looked for different Libraries. I found this Great Library Android Swipe Layout. I have tried this Library for RecyclerView. I have done sample Project using this great Library. This Library Supports ListView and GridView also. Thanks to the Author for Creating this useful Library: https://github.com/daimajia/ Library Link : https://github.com/daimajia/AndroidSwipeLayout/ Wiki Page: https://github.com/daimajia/AndroidSwipeLayout/wiki Step: 1 ====== Add dependency to your build.gradle file 1 2 3 4 dependencies { compile 'com.daimajia.swipelayout:library:1.2.0@aar' } Step: 2 ====== Create a row for RecyclerView using SwipeLayout 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60...
Read more