Material design navigation bar android

Navigation Drawer в стиле Material Design за 5 минут

В данной статье я расскажу, как быстро добавить в ваше приложение для Android боковое меню (aka Navigation Drawer) в стиле Material Design. Для этого мы воспользуемся библиотекой, любезно предоставленной Mike Penz.

У вас получится Navigation Drawer, который:

• Соответствует последним рекомендациям по дизайну (Google Material Design Guidelines);
• Поддерживает использование нескольких Drawer (можно выдвигать второй справа);
• Поддерживает использование бейджей;
• Имеет простой и понятный интерфейс (API);
• Может выползать как под, так и поверх Status Bar;
• Позволяет менять иконки, цвета, бейджи во время выполнения;
• Использует AppCompat support library;
• Работает, начиная с API 14.

Помимо этого, новички обучатся интеграции сторонних библиотек в свой проект, что крайне полезно, учитывая их грандиозное разнообразие на Github.

Создание проекта

В примере будет использоваться интегрированная среда разработки Android Studio от компании Google, основанная на IntelliJ IDEA, которую сама корпорация активно продвигает. Все действия можно воспроизвести используя и другие среды, например, Eclipse. Однако статья ориентирована на новичков, а они будут в большинстве своем использовать именно Android Studio, так как именно его Google теперь и предлагает при скачивании Android SDK с developer.android.com (ранее можно было скачать Eclipse).

Итак, выбираем в меню «File» -> «New Project. »:

Заполняем имя приложения, пакета, выбираем SDK.

Создавать проект мы будем с поддержкой минимального API Level равного 14, что соответствует Android 4.0 Ice Cream Sandwich, поскольку всё, что ниже, составляет менее 8% аудитории и привносит несоизмеримо большее количество головной боли:

В последних двух окнах оставляем все по умолчанию, жмем «Finish».

Android Support Library

Для того, чтобы красивый Navigation Drawer работал на версиях Android ниже 5.0 и выглядел в стиле Material Design, необходимо включить в проект библиотеку поддержки от Google, которая носит название v7 appcompat library. В текущей версии Android Studio (1.0.2) библиотека подключается по умолчанию при создании проекта. Проверьте это в файле проекта \app\build.gradle, в разделе dependencies должна быть строка (цифры могут быть не обязательно «21.0.3»):

а класс MainActivity должен наследоваться от ActionBarActivity

Также проверьте в \res\values\styles.xml, чтобы тема приложения наследовалась от Theme.AppCompat или ее вариаций без ActionBar (мы заменим ActionBar на ToolBar), например:

Подключение библиотеки MaterialDrawer

Добавьте в раздел dependencies файла \app\build.gradle строки

и нажмите появившуюся в верхней части окна кнопку «Sync Now» для синхронизации вашего проекта.

Подготовка разметки для Navigation Drawer

В главный layout приложения нужно добавить ToolBar. Приведите activity_main.xml к такому виду:

Создайте в папке layout файл drawer_header.xml со следующим содержанием

этот файл — разметка для верхней части Drawer’a, в которой находится картинка. Теперь положите в папку \res\drawable\ любую картинку с именем header.jpg, которая будет отображаться в верхней части Drawer’a, например эту:

Файл \res\strings.xml, содержащий строковые ресурсы, приведите к следующему виду

Инициализация Navigation Drawer

В методе onCreate вашей MainActivity мы инициализируем ToolBar, добавьте после setContentView следующий код:

Затем инициализируем и сам Navigation Drawer, добавьте ниже:

В случае появления ошибок, убедитесь, что ваша секция импортов в MainActivity выглядит так:

Теперь можно запустить приложение и оценить результат:

Улучшения Navigation Drawer

Чтобы Navigation Drawer еще точнее соответствовал рекомендациям от Google, можно сделать следующие улучшения (см. полный листинг MainActivity в конце статьи):

Скрывать клавиатуру при открытии NavigationDrawer:

Закрывать NavigationDrawer по нажатию системной кнопки «Назад»:

Обрабатывать события клика и длинного клика на элементы Drawer’a

Уменьшать/увеличивать значения бейджей

Реализацию всех этих улучшений вы можете посмотреть в полном листинге MainActivity:

Источник

How to Code a Bottom Navigation Bar for an Android App

The material design team at Google defines the functionality of bottom navigation bars in Android as follows:

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

According to the official Material Design guidelines for the Android bottom navigation bar, it should be used when your app has:

• three to five top-level destinations
• destinations requiring direct access

An example of a popular app that implements the bottom navigation bar is the Google Discover Android app from Google, which uses it to navigate to different destinations of the app. You can see this yourself by downloading the Google Discover app from the Google Play Store (if you don’t already have it on your device). The following screenshot is from the Google Discover app displaying an Android bottom navigation bar.

In this post, you’ll learn how to display menu items inside a bottom navigation bar in Android. You will use AndroidX navigation, which is part of the Jetpack suite of libraries. Jetpack is a suite of libraries to help developers write code that works consistently across Android versions and devices. As a bonus, you’ll also learn how to use Android Studio templates to bootstrap your project with a bottom navigation bar quickly.

Getting Started

Open Android Studio, create a new project, and select a Blank Activity template, as shown below. Select the Kotlin language from the drop-down menu and click Finish. Wait for Android Studio to finish creating the project resources.

Add Project Dependencies

The first thing before we get started is to add the project dependencies. Open the app’s build.gradle file and add the following dependencies.

Create a Navigation Graph

A navigation graph is an XML resource file that contains all of your application destinations and actions. Right-click on the res directory and select New > Android Resource File. Provide a name and select Navigation as the resource type, and click OK. The navigation graph gets placed in the navigation folder, as shown in the structure below.

Add Destinations to the Navigation Graph

The navigation file will contain all the destinations of our application. To add a destination, click on the plus (+) sign at the top of the design tab or choose an existing destination if you have already created the fragments.

Our application will have three screens, namely:

• Home page
• Profile page
• Settings page

Therefore, we will add three destinations to the navigation XML file. To add a new destination, click the plus (+) sign and select the Create new destination option. On the next screen, select a blank fragment and provide the details as shown below.

Repeat the same steps and create two additional fragments for the Profile and Settings screens. The final navigation graph XML now looks like this.

Each fragment has its layout, which you can customize as you wish. Below is how each fragment looks after adding a text view at the center of each fragment.

Add a Nav Host Fragment and Bottom Navigation View

Next, define a host fragment in the main layout (main_activity.xml). A nav host fragment is an empty container where destinations are swapped in and out as a user navigates through your app. We will also add the BottomNavigationView in the main layout, as shown below.

Add Menu Items

The next step is to add menu items for the bottom navigation view. Right-click on the res directory, select New > Android Resource File and select menu, provide a name and click OK.

Open the menu XML file and add three menu items, as shown below.

Add Vector Assets to Menu Items

A vector asset is an XML file that defines a virtual image in its file. Vector assets guarantee sharp images which can be resized to any screen size without losing their quality. To add a vector asset, right-click on Drawable > New > Create Vector Asset and choose a home icon for the home menu as shown below.

Repeat the same steps and create vector assets for the rest of the menu items. Add the vector assets to the respective menu items as shown below.

The next step is to add id attributes to each menu item. The menu item’s id should be the same as the id of the navigation graph destinations in order to allow navigation throughout the fragments.

Add Menu Item to Bottom Navigation View

The last step is to add the menu to the bottom navigation view. Open main_activity.xml and add the app:menu=»@menu/bottom_nav» attribute to the BottomNvigationView .

About the Nav Controller

The NavController is an object that manages app navigation within a NavHost . It coordinates the swapping of fragments as users move through your app. In the main activity class, call setupWithNavController() from your main activity’s onCreate() method, as shown below.

Final App

The final app should now look like this:

Bonus: Using Android Studio Templates

Now that you’ve learnt about the APIs involved to create a bottom navigation bar from scratch in Android, I’ll show you a shortcut that will make it faster next time. You can simply use a template instead of coding a navigation bar from scratch.

Android Studio provides code templates that follow the Android design and development best practices. These existing code templates (available in Java and Kotlin) can help you quickly kick-start your project. One such template can be used to create a bottom navigation bar.

To use this handy feature for a new project, first fire up Android Studio.

Enter the application name and click the Next button. You can leave the defaults as they are in the Target Android Devices dialog.

Click the Next button again.

In the Add an Activity to Mobile dialog, select Bottom Navigation Activity. Click the Next button again after that.

In the last dialog, you can rename the Activity, or change its layout name or title if you want. Finally, click the Finish button to accept all configurations.

Android Studio has now helped us to create a project with a bottom navigation activity. Really cool! You’re strongly advised to explore the code generated.

In an existing Android Studio project, to use this template, simply go to File > New > Activity > Bottom Navigation Activity.

Top Android App Templates From CodeCanyon

Note that the templates that come included with Android Studio are good for simple layouts and making basic apps, but if you want to really kick-start your app, you might consider some of the app templates available from Envato Market.

They’re a huge time-saver for experienced developers, helping them to cut through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Let’s look at a few cool templates that will let you put your new Android bottom navigation bar coding skills to good use.

1. Android App Builder: WooCommerce, WebView, WordPress and Much More

Creating native Android apps couldn’t get simpler. The Android App builder template lets you turn your online presence into easy-to-use mobile experiences. Turn your WooCommerce shop, WordPress blog, or HTML5 website into an app, with no coding experience necessary. Use the included tutorial to learn how to complete your app project.

2. RocketWeb: Configurable Android WebView App Template

Looking to create a stylish Android WebView app? Save yourself some time and hassle by using the RocketWeb template. You won’t need any programming skills to get the most from this download. Just open it in Android Studio and start customising. Tweak the Kotlin bottom navigation bar for Android, the colours, and a whole lot more with RocketWeb.

3. Dating App for Web, iOS and Android

Connections are in the air with the Dating App template. It was built in Android Studio and Xcode with Swift, so you can have both an Android and an iOS app. On top of the modern bottom navigation bar for Android and iOS, Dating App also features:

• simple image gallery
• Facebook signup
• upgrades, AdMob banner, and in-app purchases
• messaging and friends system

4. AdForest: Classified Native Android App

Let users take the classified section on the go with AdForest. Users will be able to quickly sign up and verify their accounts with their mobile numbers. Once in, they can search for products, find nearby listings, message vendors for more information, and a whole lot more. It’s as easy to set up as it is to navigate.

5. MaterialX: Android Material Design UI Components

This Android app template is the perfect bundle for developers. It features all types of useful UI design elements to complete your projects. There are more than 315 unique layouts that come in more than 31 categories. Some of the included components are:

• Android bottom navigation bars
• buttons, chips, and cards
• dialog boxes
• grids and lists
• navigation drawer menus

Find More Android App Templates From Envato Tuts+

The above templates are great premium options in their own right. But they’re far from the only ones available to you! Our instructors have rounded up some of the best Android app templates from CodeCanyon that you should check out. No matter the niche, you can find a nice Android template that suits your needs from Envato Tuts+:

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android from scratch, using Jetpack navigation. We also explored how to easily and quickly use the Android Studio templates to create a bottom navigation activity.

I highly recommend checking out the official material design guidelines for bottom navigation bars to learn more about how to properly design and use the bottom navigation bar in Android.

To learn more about coding for Android, check out some of our other courses and tutorials here on Envato Tuts+!

This post has been updated with contributions from Nathan Umoh and Esther Vaati. Nathan is a staff writer for Envato Tuts+. Esther is a software developer and writer for Envato Tuts+.

Источник