Android home screen menu

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:

Источник

Тайны кнопок в Android. Часть 3: Кнопки в главном меню

Главное меню — один из основных инструментов для взаимодействия пользователя с приложением. В Android 2.3.x и раньше оно было «спрятано» на аппаратной кнопке Menu, и разработчики рисовали меню кто как умел. Но начиная с Android 3.0 недоработка была исправлена, меню стало стандартным компонентом на Action Bar, и получило ряд новых возможностей. При этом процесс разработки меню практически не претерпел изменений. Меню в Android — это не просто набор кнопок, на которые можно вешать OnClickListener . В Android с меню можно сделать куда больше, чем кажется на первый взгляд.

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

Вот так по-разному может выглядеть меню одного и того же приложения.

Наша первая кнопка в меню

Меню в Android описываются в файлах ресурсов или формируются программным кодом. Рекомендуется первый вариант по целому ряду причин: скорость разработки, наглядность, простота сопровождения. Ресурсы меню располагаются в подкаталоге menu каталога ресурсов приложения res . Создаем каталог menu , затем создаем новый Android XML File :

Выбираем тип ресурса Menu , вводим имя файла. Так как в разных activity меню, скорее всего, будет разным, рекомендую привязывать имена файлов ресурсов меню к именам activity.

В открывшемся редакторе введем код первой кнопки нашего меню:

Давайте рассмотрим использованные атрибуты:

• android:id указываем, чтобы потом в коде отличать одни кнопки от других.
• android:orderInCategory указывает порядок нашей кнопки относительно других. Указывайте порядок с шагом в 10 или 100, это позволит в будущем добавлять новые элементы в любое место, не перестраивая порядок остальных.
• android:showAsAction — самый интересный параметр, поскольку именно он управляет поведением элементов меню в разных ситуациях. Он может принимать целый ряд значений:
  • ifRoom — Показывать элемент в action bar, только если для него достаточно места. Если места недостаточно, элемент будет автоматически скрыт в дополнительное меню (то, которое показано тремя точками друг над другом). Это лучший способ кастомизации меню в зависимости от размера экрана устройства. На больших экранах планшетов action bar будет заполнен кнопками, а на небольших телефонах будут показаны самые важные кнопки, в то время как до остальных тоже можно добраться, но только через дополнительное меню. Имейте в виду, что дополнительное меню отображается в action bar только на тех смартфонах, на которых нет аппаратной кнопки меню.
  • withText — Рядом с иконкой кнопки будет показан текст, заданный свойством android:title . Этот параметр можно указывать в комбинации с другими, разделяя параметры знаком |
  • never — Кнопка никогда не будет видна на action bar, даже если для нее есть место. К такой кнопке всегда придется добираться через дополнительное меню.
  • always — Всегда показывать кнопку в action bar. Данным параметром нельзя злоупотреблять, так как на маленьких телефонах кнопки могут начать заползать на другие элементы action bar, например на заголовок приложения. Определите для каждой activity максимум одну самую важную кнопку, без которой никак нельзя, и отметьте always только у нее. Остальные (а по возможности все) должны быть ifRoom .
  • collapseActionView — позволяет сделать кнопку, открывающую или скрывающую дополнительный элемент View в action bar. Например, можно задать такой параметр иконке поиска, по ее клику показывать прямо в action bar поле для ввода поискового запроса.
• android:title — определяет заголовок кнопки меню. Он может отображаться рядом с иконкой в action bar или же как название элемента в дополнительном меню.
• android:icon — иконка кнопки.

Иконки для меню

Если вы разрабатываете приложение в стиле Holo, вы можете использовать готовый набор иконок от Google, который доступен всем для загрузки с официального сайта совершенно бесплатно.

Набор иконок представлен отдельно для темной и отдельно для светлой темы Holo, а также для разных размеров экранов. Если вы не можете позволить себе дизайнера в команде, этот набор просто незаменим.

Подключение меню к Activity

Загрузить меню из ресурса очень быстро. Открываем код Activity и перекрываем метод onCreateOptionsMenu :

Теперь меню отображается, но при нажатии на кнопку ничего не происходит. Повесить обработчик на кнопку можно кодом или прямо в XML-ресурсе, задав в свойстве android:onClick имя метода-обработчика. Чтобы сделать то же самое кодом, нужно в Activity перекрыть метод onOptionsItemSelected :

Создаем подменю

Подменю полезно, когда мы хотим уточнить способ выполнения действия, представленного в action bar. К примеру, у нас есть список покупок и кнопка «Сортировка». По нажатию кнопки нужно выяснить, по какому параметру пользователь хочет отсортировать элементы списка: по категории товара, по названию или по порядку добавления в список. Посмотрим код подменю для такого случая:

Здесь мы объявили еще один тег внутри тега . Подменю представляет собой группу все тех же тегов , что позволяет при необходимости сделать подменю в подменю и так далее.

Radio button’ы в меню

Мы только что сделали меню для выбора порядка сортировки покупок. Было бы здорово показывать, какой способ сортировки используется в текущий момент. Список может быть отсортирован только одним из трех возможных способов, что отлично соответствует идее radio button. Чтобы сделать из нашего подменю набор radio button, достаточно тегу указать свойство android:checkableBehavior=»single» . Возможные значения android:checkableBehavior :

• single — выбор только одного из доступных элементов, наш случай
• all — выбор любого количества доступных элементов, аналог check box
• none — элементы группы являются обычными элементами меню, это значение по умолчанию

Полученный код меню:

Если запустить приложение и попробовать выбрать один из способов сортировки, ничего не произойдет. В меню не показано, что какой-то элемент выбран. Это придется сделать вручную вызовом item.setChecked(true);

Скрываем или показываем элементы меню

Скрывать элементы меню полезно, если телефон временно или в принципе не может выполнить какой-либо функционал. Например, у нас есть кнопки для отправки списка покупок через соц. сети, но если интернет сейчас не подключен, то отправить список не получится. Чтобы не расстраивать пользователя сообщениями об ошибке, можно скрыть неработающие в данный момент кнопки. Давайте добавим кнопку «Поделиться»:

Теперь во время создания меню в методе onCreateOptionsMenu проверим доступность сети, найдем нашу кнопку и установим ей видимость:

Так мы подстраиваем меню в момент создания activity. Этого достаточно для тех функций, которые требуют наличия определенного аппаратного обеспечения в телефоне (камера и т.п.). Но интернет может включиться в любое время, даже после старта activity. Также иногда возникает желание перестроить меню после каких-то действий пользователя в приложении. Перестроить меню предельно просто. Вызываем метод invalidateOptionsMenu() нашей activity. Это приведет к повторному вызову метода onCreateOptionsMenu перед следующей отрисовкой меню. Обратите внимание, что метод invalidateOptionsMenu был добавлен в API 11, поэтому для совместимости с Android 2.x нужно использовать такой вызов:

Класс android.support.v4.app.ActivityCompat можно найти в Support Package.

Другие способы кастомизации меню

Как вы знаете, в Android можно задавать разные ресурсы для различных размеров/ориентации/плотности экрана и в зависимости от других особенностей устройств. Это касается любых типов ресурсов, в том числе и меню. По умолчанию ресурсы меню загружаются из каталога /res/menu. Но вы можете создать каталог, например, /res/menu-sw600dp, и таким образом задать особую компоновку меню для устройств с минимальным размером экрана 600 dp по горизонтали или вертикали (это как правило соответствует 7-ми дюймовым планшетам). На практике для меню обычно достаточно указания свойства android:showAsAction=»ifRoom» для элементов, так как в результате мы получаем максимально точную «подгонку» меню к тому устройству, на котором будет работать приложение. К тому же это позволяет сильно уменьшить объем кода ресурсов, ведь их в этом случае не нужно дублировать.

Если у вас остались вопросы по работе с главным меню, буду рад ответить в комментариях.

Источник

How to personalize your home screen on Android

Android is an obvious choice for people who don’t want the kind of top-down control you get from companies like Apple, where everything is prefabricated to fit into a specific brand identity instead of catering to a user’s specific needs and preferences. Google’s open source software, fortunately, provides plenty of room for developers to customize your OS experience. But that freedom also trickles down to you, meaning you can further personalize your home screen just how you like it.

But that doesn’t mean you can just flick a switch and have everything your way. Not everything is customizable, and there are some limits to what you can do with the things that are.

So, without further ado, here are some of the coolest ways you can personalize your home screen on Android.

Personalize your home screen: The basics

There are some simple customizations to personalize your home screen on Android that don’t require that you download any new apps.

First, and most obvious, is the wallpaper you use as a background. You can opt for one of the bundled wallpapers, download some new ones or use your own existing photos.

How to change your wallpaper on Android:

• Tap and hold a blank space on your home screen.
• Tap on “Wallpapers” at the bottom of the screen.
• Choose from the existing wallpapers or use one of your own photos.
• Once you’ve made your selection, tap on “Set wallpaper.”
• Select whether you want that image as your home screen, lock screen, or both.
• Repeat the process if you want different images on your home and lock screen.

(Note that some Android phones require you to pinch the screen to access the home screen settings, rather than long-pressing.)

How to remove app shortcuts from your home screen:

• Tap and hold an app’s icon.
• Drag the app icon you want to hide into one of two places:
  • The app drawer (represented by an icon in the center-bottom of the screen).
  • Or to the “x” at the top of the screen labeled “Remove.”
• If you want to uninstall the app completely you should see “Uninstall” next to “Remove” at the top of the screen – simply drag the app icon there instead.

How to add app shortcuts to your home screen:

• First, open the app drawer.
• Tap and hold the app you want and drag it upwards onto your home screen.
• Drop it where you want it, and tap and hold to drag it to a different location.
• Drag and hold it near the edge of the screen to be taken to the next page.

How to create an app folder:

You can also create app groups on your home screen by combining similar apps into categories, each of which will have its own quick-access folder:

• Tap and hold an app
• Drag it on top of another app and release.
• The two apps should be merged into a shared folder.
• Drag any other appropriate apps into the folder.
• Tap the folder to open it and rearrange the app order by tap, hold and drag.
• Rename the folder to something like “Social,” “Messaging,” “Games,” or whatever.

How to add/remove widgets:

You can also decide which widgets to have on your home screen. The process is almost identical to moving apps on and off your home screen:

• Tap and hold a blank space on your home screen.
• Tap on “Widgets “at the bottom of the screen.
• Pick the widget you want on your home screen.
• Tap and hold it.
• Drag it to the position you’d like on your Android home screen.

Personalize your home screen: Get a new launcher

Beyond tweaking your home screen using what’s already on your phone, you can also download entirely new launchers, that will change the layout and functionality of your home screen itself. Launchers change the look, feel and behavior of even more parts of the Android OS, allowing you to make it truly your own.

Launchers also let you change your icons, helping you personalize your home screen to affect even the branding of third-party apps. Many launchers support gesture shortcuts and navigation, offer many more widgets and transition effects and can even learn your habits and adapt themselves to your needs throughout the day.

Custom Android launchers worth checking out include:

Have a look at a few launchers and see which fit your personality best. Once you’ve found one you like the look of, install the app, open it and press the Home button. You should see a notification about changing your default launcher. Simply change your default to the new launcher. If you want to change back (or you don’t see the pop-up), go to your Settings and search for “launcher” – you should be able to find the right menu easily enough, then just select the one you want from the list of installed launchers to make it your new default.

Wrap up

There are plenty of ways to personalize your home screen on Android, whether that’s working with your existing settings and options, or downloading new ones via third-party launchers.

Have fun with your devices. Make them your own!

What are some of your favorite ways to personalize your home screen? Have you found third-party apps that make a big difference? Give us your feedback in the comments below!

Источник