JarCasting 
AfflyasNavigation
AfflyasNavigation is an Android library for implementing the behavior of navigation components upon content scrolling
Sample
What's new in 1.1.0 / 1.2.0 (Changelog)
- Migrated to SDK 28 and AndroidX libraries
- Added display cutout support for devices running android P
- New container layout that helps to avoid display cutout at the side of the screen (ANVerticalContentContainer)
- New layouts to help to avoid translucent status and navigation bars (ANSpaceBottom and ANSpaceTop)
- Added new XML attributes for all elements
- Now you can create bottom navigation items using XML resource
Configuration
- compileSdkVersion=28
- minSdkVersion=14
- targetSdkVersion=28
- androidXVersion=1.0.0-rc01
Components
ANTopBar
- Container for the content displayed at the top of the screen such as
Toolbar - Appear and disappear upon scrolling synchronously within
ANBottomNavigation - Top padding depends on the availability of transparent navigation, as well as the position of the window in multi-window mode
ANBottomNavigation
- Folllowing the bottom navigation guidelines from Material Design
- Add 3 to 5 items (with title, icon & color)
- 3 different navigation styles
- Manage notififcations for each item
- Adapted to multi-window mode
- Adapted to translucent navigation
- Proper Snackbar behavior
ANFloatingActionButton
- Attaches to top of
ANBottomNavigation - Moves up when
Snackbarappears - Always above translucent navigation bar
- Adapted to side translucent navigation in landscape orientation
ANVerticalContentContainer
- Container to your content that helps to avoid translucent navigation bar and display cutout on the side of the screen
ANSpaceTop and ANSpaceBottom
- Space on top and bottom of your scrolling content avoid translucent navigation bar, status bar and display cutout
Getting started
Installation
Add the following line to your build.gradle's dependencies section:
//For Java version
implementation 'com.github.afflya:afflyasnavigation:1.2.0'
//For Kotlin version
implementation 'com.github.afflya:afflyasnavigation-kotlin:1.1.0'
Usage
Via XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.afflyas.sample.MainActivity"
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">
<com.afflyas.afflyasnavigation.ANTopBar
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:behaviorTranslationEnabled="true"
android:background="@color/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay">
<!--Add content to your top bar here. For example, add a toolbar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</com.afflyas.afflyasnavigation.ANTopBar>
<com.afflyas.afflyasnavigation.ANFloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:srcCompat="@drawable/ic_audiotrack_black_24dp"
app:useCompatPadding="true"
app:withANBottomNavigation="true"/>
<com.afflyas.afflyasnavigation.ANBottomNavigation
android:id="@+id/botNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behaviorTranslationEnabled="true"
app:colored="true"
app:titleState="always_show"
app:itemsMenu="@xml/bot_nav_menu"
android:layout_gravity="bottom"/>
<!--Layout to avoid translucent navigation bar and display cutout on the sides-->
<com.afflyas.afflyasnavigation.ANVerticalContentContainer
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--Space before content to avoid status bar and display cutout-->
<com.afflyas.afflyasnavigation.ANSpaceTop
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:topBarHeightMode="default_action_bar"/>
<!--Place your content here-->
<!--Space after the content to avoid navigation and display cutout-->
<com.afflyas.afflyasnavigation.ANSpaceBottom
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:withANBottomNavigation="true"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.afflyas.afflyasnavigation.ANVerticalContentContainer>
</android.support.design.widget.CoordinatorLayout>
Bottom navigation bar
// Create items
ANBottomNavigationItem item1 = new ANBottomNavigationItem(R.string.home, R.drawable.ic_home, R.color.colorPrimary);
ANBottomNavigationItem item2 = new ANBottomNavigationItem(R.string.chat, R.drawable.ic_chat, R.color.colorAccent);
ANBottomNavigationItem item3 = new ANBottomNavigationItem(R.string.dashboard, R.drawable.ic_dashboard, R.color.colorPrimaryDark);
ANBottomNavigationItem item4 = new ANBottomNavigationItem(R.string.music, R.drawable.ic_audiotrack, android.R.color.holo_red_light);
ANBottomNavigationItem item5 = new ANBottomNavigationItem(R.string.settings, R.drawable.ic_settings, android.R.color.holo_green_light);
// Add items
bottomNavigation.addItem(item1);
bottomNavigation.addItem(item2);
bottomNavigation.addItem(item3);
bottomNavigation.addItem(item4);
bottomNavigation.addItem(item5);
// Set background color
bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#FEFEFE"));
// Enable the translation inside the CoordinatorLayout
bottomNavigation.setBehaviorTranslationEnabled(true);
// Manage titles
bottomNavigation.setTitleState(AHBottomNavigation.TitleState.SHOW_WHEN_ACTIVE);
bottomNavigation.setTitleState(AHBottomNavigation.TitleState.ALWAYS_SHOW);
bottomNavigation.setTitleState(AHBottomNavigation.TitleState.ALWAYS_HIDE);
// Change colors
bottomNavigation.setAccentColor(Color.parseColor("#F63D2B"));
bottomNavigation.setInactiveColor(Color.parseColor("#747474"));
// Force to tint the drawable (useful for font with icon for example)
bottomNavigation.setForceTint(true);
// Use colored navigation with circle reveal effect
bottomNavigation.setColored(true);
// Set current item programmatically
bottomNavigation.setCurrentItem(1);
// Customize notification (title, background, typeface)
bottomNavigation.setNotificationBackgroundColor(Color.parseColor("#F63D2B"));
// Add notification for each item
bottomNavigation.setNotification("1", 3);
// OR
ANNotification notification = new ANNotification.Builder()
.setText("1")
.setBackgroundColor(ContextCompat.getColor(this, R.color.color_notification_back))
.setTextColor(ContextCompat.getColor(this, R.color.color_notification_text))
.build();
bottomNavigation.setNotification(notification, 1);
// Remove notification for each item
bottomNavigation.setNotification("", 3);
// Enable / disable item & set disable color
bottomNavigation.enableItemAtPosition(2);
bottomNavigation.disableItemAtPosition(2);
bottomNavigation.setItemDisableColor(Color.parseColor("#3A000000"));
// Set listener
bottomNavigation.setOnTabSelectedListener(new ANBottomNavigation.OnTabSelectedListener() {
@Override
public boolean onTabSelected(int position, boolean wasSelected) {
switch (position){
case 1:
bottomNavigation.setNotification("", 1);
bottomNavigation.setNotification(" ", 2);
break;
case 2:
bottomNavigation.setNotification("22", 1);
bottomNavigation.setNotification("", 2);
break;
}
return true;
}
});
Items using xml menu
- Create resource file in
res/xmllike this
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:title="@string/home"
android:icon="@drawable/ic_home_black_24dp"
android:color="@color/colorPrimary"/>
<item
android:title="@string/chat"
android:icon="@drawable/ic_chat_black_24dp"
android:color="@color/colorAccent"/>
<item
android:title="@string/dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:color="@color/colorPrimaryDark"/>
<item
android:title="@string/music"
android:icon="@drawable/ic_audiotrack_black_24dp"
android:color="@android:color/holo_red_light"/>
<item
android:title="@string/settings"
android:icon="@drawable/ic_settings_black_24dp"
android:color="@android:color/holo_green_light"/>
</menu>
- Add
app:itemsMenu="@xml/bot_nav_menu"attribute with the path to the file to yourANBottomNavigation
Translucent navigation
The elements automatically adapt to transparent bars, you just need to include these lines in your application's theme
<style name="AppTheme.TranslucentNavigation" parent="AppTheme">
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
- Add these lines to
styles-v21if your minSdkVersion<21
License
Copyright (c) 2018 Andrey Poznyakov (https://github.com/Afflya).
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.