Как сделать боковое меню android studio

Как сделать боковое меню android studio

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 71ae2b1f1b6a7726 • Your IP : 82.102.23.104 • Performance & security by Cloudflare

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.

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

В примере будет использоваться интегрированная среда разработки 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:

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

Navigation Drawer

Navigation drawer — это главное меню приложения, которое выдвигается слева направо при нажатии пользователем на значок “гамбургера”. Либо свайпом слева направо. Его еще называют “шторкой” и в открытом виде выглядит так:

Когда этот элемент интерфейса только только появился, необходимо было осуществлять много манипуляций по его добавлению на экран (если не учитывать наличие специального шаблона). Ради интереса можно ознакомиться со статьей, в которой описывается весь этот нелегкий путь.

Но вот на Google I/O 2018 была предложена совершенно новая концепция навигации по приложению, для которой уже весной 2019 года выпустили стабильную версию. Первоначально носила название Navigation Architecture Component, теперь же именуется Jetpack Navigation.

Главная цель — создание приложений по типу singleActivity.

С выходом Jetpack Navigation добавление шторки в приложении значительно упростилось, уменьшилось количество кода и настроек. Ну и, конечно же, был обновлен шаблон Navigation Drawer Activity.

В примере ниже рассмотрим добавление шторки вручную.

Алгоритм добавления шторки в интерфейс

Зависимости

В этом же файле build.gradle должно быть:

Иначе словите ошибку:

Фрагменты

Так как основная цель Jetpack Navigation — создание приложений по типу singleActivity, основной контент будет отображаться во фрагментах.

На этом этапе нужно создать классы фрагментов и макеты к ним. В моем приложении будет три фрагмента — MainFragment , SettingsFragment , AboutFragment . По внутреннему содержанию они идентичны (все отображают TextView ), а значит будет достаточно создать один файл разметки.

Макет для MainFragment, SettingsFragment, AboutFragment — fragment_page.xml

Код для класса MainFragment
Для остальных фрагментов код идентичен, разница только в отображаемом тексте.

Навигация

Теперь для созданных фрагментов нужно выстроить навигацию.

Добавляем новую директорию в ресурсы через контекстное меню New -> Android Resource Directory. В новом окне полю Resource type задать значение navigation:

В созданной папке добавляем новый файл nav_graph.xml .

Проще всего спроектировать навигацию через визуальный конструктор. В левом верхнем углу находится кнопка “New Destination”, с ее помощью можно добавить в граф все вышесозданные фрагменты.

При выделении фрагмента в визуальном редакторе появляется кружок в центре правого края. С помощью него выстраивается цепочка переходов от фрагмента к фрагменту.

В результате в nav_graph.xml должен получится такой код:

Обратите внимание на атрибут android:label — он отвечает за заголовок, который будет отображаться в тулбаре для каждого фрагмента.

Меню для шторки

По аналогии с навигацией, нужно добавить папку в ресурсы для меню и файл nav_drawer_menu.xml :

Обратите внимание на идентификаторы в меню — для корректной работы они должны быть идентичны идентификаторам из nav_graph.xml .

Header для шторки

Создается в папке layouts, дизайн на ваше усмотрение. Вот, что получилось у меня ( nav_header.xml ):

Объединяем все вместе в макете activity

Корневым элементом макета activity обязательно должен быть DrawerLayout, так как именно он позволяет шторке выдвигаться из края экрана. Внутри DrawerLayout’а объявляется основное содержимое экрана: toolbar, контейнер для фрагментов и сама шторка — NavigationView.

Элемент <fragment> является контейнером для наших фрагментов. Подробнее об особо важных атрибутах:

• Значение атрибута android:name=»androidx.navigation.fragment.NavHostFragment» говорит о том, что данный элемент в разметке будет являться хостом для фрагментов. Указывается обязательно в таком виде без изменений, так как хост должен быть производным от NavHostFragment, который в свою очередь обрабатывает смену фрагментов местами.
• app:defaultNavHost=»true» — позволяет перехватывать нажатие на системную кнопку “Назад”, т.е. не нужно ее дополнительно отслеживать и обрабатывать.
• app:navGraph=»@navigation/nav_graph» — связывает NavHostFragment с созданным нами графом навигации.

Для NavigationView устанавливаем ранее подготовленные файлы — header и меню, а также с помощью атрибута android:layout_gravity указываем с какой стороны она будет выезжать.

Так как в макете мы объявили реализацию toolbar , требуется отключить стандартный actionBar . Для этого заходим в values/styles.xml и меняем DarkActionBar на NoActionBar . Должно получится так:

Подключение в классе MainActivity

AppBarConfiguration — устанавливает в тулбаре иконку “гамбургера” и меняет ее на стрелку UP, если мы находимся не на главном экране приложения. Вместо графа в качестве первого параметра можно указать список фрагментов, у которых не будет происходить смена иконки “гамбургера” на стрелку UP: