Sdscompany.ru

Компьютерный журнал
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Java android toolbar

Шаблон «Basic Activity»

Метки: CoordinatorLayout , FloatingActionButton , Snackbar , Material Design , setAction()

Библиотека Android Support Design (старое название) была представлена одновременно с новой версией Android Marshmallow, но её можно использовать на устройствах, начиная с версии Android 2.1. Библиотека была специально спроектирована под новый дизайн Material Design и позволяет использовать готовые компоненты в новом стиле. Мы можем использовать элементы библиотеки вручную, но для быстрого знакомства с некоторыми из них удобнее воспользоваться готовым шаблоном Android Studio.

Создадим проект при помощи шаблона Basic Activity.

Сейчас уже не спрашивают, хотите ли вы использовать AndroidX, флажок у опции Use androidx.* artifacts установлен по умолчанию и изменить его не получится.

При использовании нового шаблона будут задействованы четыре компонента библиотеки: CoordinatorLayout, AppBarLayout, FloatingActionButton, Snackbar.

Первые три компонента доступны через XML-разметку, а Snackbar вызывается программно.

Изучим разметку активности activity_main.xml.

Корневым элементом разметки служит компонент CoordinatorLayout, который является наследником стандартного FrameLayout. Но если обычный FrameLayout позволяет просто накладывать один компонент поверх другого, то CoordinatorLayout позволяет координировать определённые зависимости между дочерними компонентами. Сейчас мы не будем вдаваться в тонкости, этой теме можно посвятить отдельную статью.

Далее идёт AppBarLayout с вложенным Toolbar. Связка компонентов образуют внешний вид и поведение продвинутого заголовка экрана активности, который пришёл на смену ActionBar из Android 4.x, который в свою очередь заменил стандартный заголовок (Title) в Android 2.x. Опять оставляем их пока без внимания.

Потом следует интересный приём, который вам может впоследствии пригодиться. В существующую разметку вставляется ещё одна разметка при помощи тега include и с указанием вставляемой разметки — layout/content_main.xml.

Завершает основную разметку красивая кнопка FloatingActionButton, которая на самом деле является продвинутым вариантом ImageView. Но в спецификации Material Design кнопке отводится большая роль и практически является визитной карточкой нового дизайна. Наверняка, вы уже видели её на различных картинках.

Подробнее о возможностях кнопки также в других материалах. Обратите внимание, что кнопка «пришпилена» к нижнему правому углу экрана при помощи layout_gravity. В качестве значка используется изображение из системных ресурсов @android:drawable/ic_dialog_email в свойстве srcCompat. Вы можете установить собственное изображение, подходящее по контексту. На данный момент Гугл рекомендует отказываться от растровых изображений и активно использовать векторные изображения.

Заменим значок электронной почты на изображение лапы кота. Щёлкаем правой кнопкой мыши по папке app и вызываем контекстное меню New | Vector Asset. В диалоговом окне щёлкаем по значку Clip Art, чтобы открыть другое окно для выбора значка. В строке поиска набираем pets и находим нужный значок. Выделяем его и нажимаем OK.

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

Далее нажимаем кнопку Next и в следующем окне запоминаем название файла в ресурсах. Если вы всё-таки поменяли цвет, то логичнее будет поменять и название файла, убрав слово «black». Оставляю на ваше усмотрение.

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

Закусывать надо! Базовый пример с Snackbar

Если раньше для всплывающих сообщений использовались хлебные тосты Toast, то теперь можно использовать новый класс Snackbar, который переводится как «Закусочная».

Новый класс Snackbar имеет много общего с классом Toast и имеет практически тот же синтаксис.

Пример запуска сообщения находится в строчках.

Как видите, код очень похож. Но есть и различия. Если Toast является частью активности и выводится поверх неё в нижней части по умолчанию, если не заданы другие параметры, то Snackbar выводится в «подвале» родительского элемента. В первом параметре указывается подходящий компонент, по которому система попытается найти родителя, обычно им является CoordinatorLayout. В некоторых примерах я видел код, когда родитель указывается явно.

Код можно немного упростить, если убрать вызов метода setAction(), который сейчас не используется.

Сообщение появляется на несколько секунд с указанным текстом и исчезает через несколько секунд. Для константы LENGTH_SHORT это будет 1.5 секунд, для LENGTH_LONG — 2.7 секунд. Практически аналогичное поведение у старого Toast.

Но есть и небольшие отличия. Например, когда выводится сообщение, его можно смахнуть с экрана слева направо, не дожидаясь, когда оно само исчезнет.

Также можно задать свою продолжительность. В первых версиях это не работало, я даже задавал этот вопрос на StackOverFlow, где проблему подтвердили и обещали исправить. Недавно проверял — действительно, теперь работает.

В версии 22.2.1 появилась новая константа Snackbar.LENGTH_INDEFINITE (неопределённая длительность). В этом случае компонент не исчезает самостоятельно.

Метод dismiss()

Метод dismiss() закрывает сообщение. Может пригодиться при использовании LENGTH_INDEFINITE, когда сообщение будет висеть на экране вечно. Добавим кнопку для закрытия сообщения и напишем код.

Чтобы Snackbar можно было убирать движением пальца, компонент следует поместить в CoordinatorLayout. В стандартных разметках LinearLayout и ему подобных операция не сработает.

Snackbar.События

Отслеживать события появления и исчезновения Snackbar можно с помощью методов обратного вызова через addCallback().

Параметр event у метода onDismissed() позволяет узнать конкретное событие, повлекшее исчезновение, при помощи констант DISMISS_EVENT_SWIPE, DISMISS_EVENT_ACTION, DISMISS_EVENT_TIMEOUT, DISMISS_EVENT_MANUAL, DISMISS_EVENT_CONSECUTIVE.

Меняем цвет текста и фона

Класс Snackbar является закрытым ящиком и мы не знаем, как он устроен. Но у него есть метод getView(), который возвращает некий компонент View. Получив его, мы можем поменять у него фоновый цвет.

Если вам захочется поменять также и цвет текста в сообщении, то нужно получить доступ к TextView:

На практике, вы вряд ли будете часто менять эти цвета, но вдруг пригодится.

Добавляем кнопку действия

Ради вывода сообщения в подвале экрана не стоило создавать новый класс, Toast вполне справлялся с этой задачей. Теперь рассмотрим существенное различие. На панели Snackbar можно разместить кнопку действия с помощью метода setAction(). В методе нужно указать текст для кнопки и обработчик для щелчка.

В моём случае при нажатии на кнопку действия панель исчезала. Если этого не происходит, всегда можно добавить дополнительную строчку с вызовом метода dismiss().

С помощью метода setActionTextColor() можно поменять цвет текста у кнопки действия.

Если цвет не задавать явно, то будет использован стиль colorAccent. Для изменения цвета обычного текста в Snackbar можно установить стиль android:textColor (он подействует на все компоненты на экране).

Приподнимаем компонент

Вы замечали, что FAB приподнимается при появлении SnackBar. Такую же возможность можно добавить для компонента, который находится в нижней части экрана. Чтобы SnackBar не загораживал обзор, нужно для компонента добавить новый атрибут app:layout_dodgeInsetEdges=»bottom». Это сработает, если компонент является дочерним элементом разметки CoordinatorLayout. Для других разметок и для других степеней вложенности приём не сработает.

Настраиваем SnackBar

Стандартный компонент имеет ширину экрана в телефонах. Но мы можем изменить его поведение. Создадим уменьшенный прямоугольник с закруглёнными углами. Для начала создадим ресурс в в папке res/layout под именем bg_snackbar.xml, который послужит подложкой.

Добавим новый класс SnackbarHelper.

Заменим вызов SnackBar

В комментариях есть пример вызова метода-расширения на Kotlin вместо класса SnackbarHelper.

Мы рассмотрели часть возможностей библиотеки Android Support Design, которые используются в новом шаблоне Blank Activity. Остальные части библиотеки будут рассмотрены в других статьях.

Material Design. Toolbar. CardView. Улучшаем дизайн.

Урок #23

Material Design

Material Design был представлен вместе с Android 5 в 2014 году.

С релизом Material Design Android наконец-то получил не только гайдлайны по дизайну приложений, но и философию дизайна. До его релиза в Android использовался Holo, и не было полноценных гайдов по дизайну. Кроме того, Holo был достаточно некрасив, и разработчикам, которые хотели выпустить симпатичное приложение приходилось нанимать дизайнера.

С выходом же Material Design любой разработчик может создать приложение, которое будет прекрасно выглядеть, не привлекая никого «со стороны».

Так что же такое Material Design? Google называет его «визуальным языком», с помощью которого можно представить на экране физические объекты, при этом не используется так называемый скевоморфизм, типичный для iOS до версии 7.

Вместо этого используется Flat, при этом объекты расположены по трём осям, и «высота» (по оси Z) выделяется при помощи теней.

Взгляните на эту картинку:

Z-index в Material Design

На ней вы видите, что элементы расположены «слоями» друг над другом, и это подчёркивается тенями. Такой подход даёт пользователю ощущение, что он взаимодействует с реальными объектами, но при этом не отходит от общего тренда на флэт-дизайн.

Читать еще:  Метод format java

Основные принципы Material Design

  1. Тактильные поверхности. Как вы видели выше, интерфейс в Material Design строится из слоёв, находящихся на разной высоте друг над другом, и помогают пользователю лучше понимать структуру интерфейса. При этом эти слои выглядят, как листы бумаги, поэтому пользователь как бы взаимодействует с реальной «бумагой».
  2. Полиграфический дизайн. Поскольку слои интерфейса — это «бумага», типографика невероятно важна. Современный дизайн строится на принципе «Content First», то есть самое главное в интерфейсе — это контент. А поскольку основным контентом в большинстве приложений является текст, очень важно, чтобы текст читался максимально хорошо.
  3. Осмысленная анимация. В настоящем мире предметы не возникают из ниоткуда (и не исчезают в никуда), поэтому важно, чтобы все анимации были похожи на поведение объектов в реальности.
  4. Адаптивный дизайн. Дизайн должен адаптироваться под различные устройства, соблюдая при этом принципы, изложенные выше.

Изучаем Material Design

Самое крутое, что есть в Material Design — это документация. На официальном сайте вы найдёте подробнейшие гайды, используя которые можно построить идеальный интерфейс, в том числе примеры, как нужно поступать, а как не стоит.

Обратите внимание: обязательно полностью прочитайте гайды на сайте, и регулярно обращайтесь к ним при разработке.

Я видел очень много хороших Android-разработчиков и отличных приложений, и заметил один факт: большинство разработчиков — очень плохие дизайнеры.

Гайдов по Material Design вполне достаточно, чтобы делать очень неплохие интерфейсы.

Поскольку наш ресурс — не документация, а проводник в мир Android-разработки, я не буду разбирать дизайн во всех подробностях, а лишь объясню основные принципы и паттерны в достаточном объёме.

Давайте рассмотрим на конкретных примерах, как использовать Material Design в своих проектах.

Toolbar

Toolbar — специальный View , который обычно отображается в верхней части экрана.

Toolbar в Android

Обычно в нём находятся заголовок экрана и различные иконки действий (меню).

До Android 5.0 те же функции выполнял ActionBar, и хотя визуально в общем случае Toolbar не отличается от ActionBar , технически это совершенно разные вещи.

Тогда как ActionBar — часть окна, в котором расположена Activity , Toolbar — это View внутри иерархии View в Activity , и такой подход позволяет достичь невероятной гибкости при создании интерфейсов.

Toolbar поддерживается начиная с Android 5. К счастью, в отличие от ActionBar , Toolbar был портирован Google для версий Android ниже Lollipop, и для его использования достаточно лишь подключить библиотеку appcompat-v7 , которая, кстати, подключена по умолчанию в нашем проекте:

Поскольку мы работаем с эмулятором, версия которого выше Lollipop, Toolbar отображается без каких-либо телодвижений. Тем не менее, в реалиях Android нужно поддерживать и более ранние версии Android.

В первую очередь нам нужно изменить тему приложения. Android позволяет кастомизировать интерфейс приложений, и мы можем сделать это, в том числе, используя темы. Откройте файл res/values/styles.xml :

Файл styles.xml

В нём вы увидите такой код:

Как вы видите, в нём задана дефолтная тема оформления, подразумевающая использование тёмного ActionBar .

Эта тема наследуется от системной Theme.AppCompat.Light.DarkActionBar . Чтобы использовать Toolbar, нужно добавить тему, убирающую ActionBar и создать тему для Toolbar . Давайте сделаем это:

Так же нужно установить новую тему в AndroidManifest.xml :

Теперь у нас установлена светлая тема (т.е. темный контент на светлом фоне) без ActionBar .

Поскольку Toolbar является обычным View , давайте создадим лэйаут для него. Создайте новый файл toolbar.xml в директории res/layout со следующим содержимым:

Нам понадобится лэйаут под названием CoordinatorLayout , находящийся в библиотеке AppCompat Design , поэтому подключите эту библиотеку в build.gradle :

Всегда старайтесь использовать актуальную версию Support-библиотек. На момент создания этого урока актуальной является 26.1.0, но к тому моменту, когда вы будете читать этот урок, скорее всего уже выйдет несколько обновлений для неё. Android Studio сообщит вам об этом — главное, чтобы у всех Support-библиотек была одна версия.

Теперь мы можем включить этот файл в разметку activity_main.xml , и она станет выглядеть так:

  1. Мы заменили FrameLayout на CoordinatorLayout . CoordinatorLayout — это серьёзно изменённый FrameLayout , наделённый дополнительными возможностями. В современных приложениях, использующих Material Design он почти всегда является дефолтным лэйаутом.
  2. Мы добавили AppBarLayout , и включили в него Toolbar .

AppBarLayout наследуется от LinearLayout и предназначен для размещения в нём Toolbar .

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

Преимущество такого подхода в том, что мы можем задать вёрстку элемента один раз и использовать её неограниченное количество раз в других частях проекта.

Обратите внимание на атрибут app:layout_behaviour . Понятие Behaviour — достаточно обширная тема. Как можно догадаться по названию, атрибут отвечает за поведение элемента в лэйауте.

Конкретно в данном случае мы говорим, что наш RecyclerView должен скроллиться. Задав дополнительные атрибуты, мы можем, например, заставить Toolbar автоматически скрываться при скролле (пока что мы не будем этого делать).

Помимо этого, благодаря этому атрибуту RecyclerView не будет уезжать под Toolbar (попробуйте удалить его, и увидите, что первый элемент списка скрыт под тулбаром).

Осталось лишь установить Toolbar в MainActivity :

Запустите приложение, и вы увидите…

Toolbar в Android

… что ничего не поменялось. Но это лишь внешне. На самом деле, приложение теперь использует Toolbar , в том числе на Android ниже пятой версии!

Если вы откроете файл res/values/colors.xml , то увидите там такой код:

Он, как не трудно догадаться, отвечает за цвета, используемые приложением.

Что это за цвета такие?

Цвета в Material Design теме

  • colorPrimary — основной цвет приложения. В него окрашивается, например, Toolbar .
  • colorPrimaryDark — затемнённый основной цвет приложения. В него окрашивается StatusBar , расположенный чуть выше Toolbar .
  • colorAccent — в него окрашиваются такие элементы интерфейса, как кнопки, переключатели и т.д. Как правило, используется цвет, отличный от colorPrimary .

Для цвета текста используются следующие правила (при условии использования светлого фона):

Урок 13. Работа с Toolbar и menu на примере UserInfoActivity

Код начала урока:

Знакомство с элементом Toolbar

Элемент Toolbar предназначен для быстрого и удобного доступа пользователя к часто используемым функциям. Создать его можно используя как упрощённый вариант, в котором о многом уже позаботились разработчики системы Android , так и полностью управляя всеми внутренними компонентами. В данном уроке мы рассмотрим упрощённый вариант.

На главном экране приложения с детальной информацией о пользователе нам необходимо создать такой toolbar :

Здесь у нас находится только один элемент: кнопка поиска, которая должна перенаправлять нас на экран для поиска других пользователей.

В ранних версиях Android использовался элемент ActionBar , теперь же его функцию выполняет Toolbar . Важно, использовать Toolbar из пакета android.support.v7.widget , чтобы у нас была совместимость со старыми устройствами (версия Android ниже 5.0).

Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию. Для этого нам нужно унаследовать главный стиль приложения (находится в файле styles.xml ) от необходимого нам Theme.AppCompat.Light.NoActionBar :

Теперь необходимо добавить элемент Toolbar в xml -файл activity_user_info.xml . Для этого добавим Toolbar над контейнером RelativeLayout , в котором находится вся информация о пользователе. Также добавим стиль для тулбара, чтобы переиспользовать его на других экранах.

Атрибуты элемента Toolbar

Остановимся на некоторых атрибутах:

  • «android:layout_height»>?attr/actionBarSize . Здесь мы указываем высоту тулбара. Таким синтаксисом мы можем получить доступ к значению высоты, которая применяется в атрибутах темы. По умолчанию, если мы не переопределяем значение, оно берётся из системного пакета темы support . Это значение лучше использовать, т.к. оно соответствует гайдам дизайна от Google . Подробнее можете изучить на сайте официальной документации.
  • theme>@style/ThemeOverlay.AppCompat.Dark.ActionBar . Мы пока закомментировали этот атрибут. Объясним его чуть позже более наглядно.

Таким образом, мы добавили в нашу Activity тулбар. Но этого мало. Нам нужно сообщить ей, что мы используем его в качестве замены элемента ActionBar . Это необходимо, чтобы на устройствах со старой версией Android (ниже Android 5.0 (API 21)) наш интерфейс выглядел также, как и на устройства с новой версией. Для этого нам просто нужно вызвать метод Activity setSupportActionBar(Toolbar toolbar) :

Важно, чтобы импорт вашего тулбара выглядел так: import android.support.v7.widget.Toolbar; . Именно тулбар из этого пакета нам и нужен.

Давайте запустим приложение и посмотрим, что получилось:

Видим, что текст в нашем тулбаре отображается тёмным цветом. Это потому что наше приложение по умолчанию использует Light тему Theme.AppCompat.Light.NoActionBar . Эта тема означает, что фоновый цвет будет светлым, а текст – тёмным.

Читать еще:  Java convert string to utf 8

Давайте раскомментируем атрибут тулбара, который указывает, что все его вложенные элементы должны использовать тему Dark . В тёмной теме весь текст будет отображать светлым цветом, а фоновый цвет – тёмным. Помним, что фоновый цвет тулбара мы тоже переопределяем, используя атрибут android:background .

Запустим приложение, посмотрим, что получилось:

Отлично, двигаемся дальше.

Осталось наполнить наш toolbar содержимым. Т.к. нашему тулбару необходима всего одна кнопка поиска, то мы можем обойтись стандартным способом добавления элементов в тулбар: при помощи Menu (помимо примера ниже также можете ознакомиться с данным уроком).

Скачивание png иконки

Давайте вначале скачаем иконку поиска, которая будет отображаться в menu . Как правило, для создания приложения достаточно пользоваться ресурсами, которые уже для разработчиков подготовил Google. Например, такая ситуация с иконками, которые рекомендует использовать Google. Их можно найти на этом сайте. В данном случае нам необходима иконка поиска, поэтому попробуем её найти, введя в поле поиска search :

Нашли подходящую иконку, выбрали в выпадающем списке тип Android и цвет, а теперь можем скачать .png -файлы. В первую очередь извлекаем архив для удобной работы с файлами. После извлечения архива видим, что в папке res содержится иконка промасштабированная для различных разрешений экранов, поэтому в зависимости от разрешения экрана устройство самостоятельно будет использовать наиболее подходящий ресурс для отображения.

Наша задача – обеспечить приложение иконками для разных разрешений. Подробнее об этом можно почитать в официальной документации.

Таким образом выделяем все папки внутри res ( drawable-hdpi , drawable-xhdpi и т.д.), копируем их, потом заходим в проект и вставляем их в папку res нашего приложения. После добавления иконок структура проекта выглядит так:

Т.е. мы скопировали несколько иконок для разных размеров экранов.

Если поменяем тип отображения файлов с Android на Project , то увидим, что физически создалось несколько папок, в каждой из которых лежит png для разного разрешения экрана.

Создание menu

Как мы с вами помним, для создания папки ресурсов menu необходимо нажать правой кнопкой по папке res и выбрать New -> Android resource directory . В появившемся диалоговом окне выбираем Resource type – menu . Все остальные поля заполнятся автоматически такими же значениями:

Нажимаем OK и видим, что папка создалась.

Затем создадим новый файл меню. Для этого правой кнопкой кликаем по папке menu и выбираем варианты New -> Menu resource file . Вводим имя user_info_menu.xml :

Из данного xml -файла можно увидеть, что наша иконка поиска будет всегда видна пользователю ( app_showAsAction=»always» ). Видим, что мы ссылаемся на иконку, которую только что добавили в проект ( android_icon=»@drawable/ic_search_white_24dp» ).

Теперь мы можем наполнить содержимым наш Toolbar , переопределив метод onCreateOptionsMenu в Activity . Это стало возможным благодаря тому, что мы вызвали метод setSupportActionBar(toolbar) .

Чтобы переопределить какой-то из методов мы можем нажать комбинацию клавиш Ctrl + O . После этого появится окно со всеми методами. Мы можем ввести название метода onCreateOptionsMenu . И выбрать его:

Давайте добавим в метод использование user_info_menu :

Отлично, дело за малым: выполнить необходимое нам действие по клику на кнопку – перейти на экран для поиска пользователей:

Единственная вещь, о которой ещё стоит упомянуть – это установка заголовка нашего экрана, отображающегося в тулбаре. Мы хотим устанавливать имя пользователя динамически в методе displayUserInfo . Для этого достаточно вызвать в необходимом месте метод тулбара setTitle(CharSequence title) . Помните, что мы вызывали строку setSupportActionBar(toolbar) . Также в Activity есть метод getSupportActionBar , который используется для совместимости со старыми устройствами. Его мы и будем использовать. Давайте добавим эту логику в метод displayUserInfo() :

AndroidStudio может подчёркивать вызов getSupportActionBar().setTitle , сообщая, что объект может быть null . Но мы помним, что мы вызвали метод setSupportActionBar(toolbar) , поэтому можем пока игнорировать это замечание.

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

В результате данного урока мы узнали:

  • что такое элемент Toolbar ;
  • что такое Menu и как его использловать с элементом Toolbar ;
  • каким образом наполнить Toolbar пользовательскими элементами.

Android Toolbar Example

Posted by: Chryssa Aliferi in Android December 11th, 2015 1 Comment Views

Android changed a lot the visual design patters, regarding the designing of modern Android applications, with the introduction of Material Design in in API 21 (Android 5.0 Lollipop). Among many changes that focus on rich user experience and advances, a new component, Android Toolbar has replaced the old Action Bar.

Android Toolbar is a complete replacement to the old ActionBar, as it provides the developer with great control to customise the appearance of the component unlike old ActionBar. Using Toolbar, developers can now, show multiple toolbars on the screen spanning only part of the width, change the colors and icons following the general Android guidelines, and opening the way to multiple animations even on the Toolbar of a modern application.

Android Toolbar was introduced in Android Lollipop (API level 21), and it is available for use from this API level and above. However with the help of the new AppCompat support library version 22.1 which introduces a lot of cool new features that allow easily to add Material Design/API 21+ features to our old, non-AppCompat Activities, we can use the Android Toolbar with backwards compatibility that covers Android API Level 7 and above.

In this tutorial we are going to implement Android Toolbar with the help of the AppCompat Support library. Our goal is to implement a toolbar which is supported by older versions of Android as well.

For our example will use the following tools in a Windows 64-bit or an OS X platform:

  • JDK 1.7
  • Eclipse 4.2 Juno
  • Android SDK 4.4.2

Let’s take a closer look:

1. Create a New Android Application Project

Open Android Studio and choose “Start a new Android Studio Project” in the welcome screen.

“Welcome to Android Studio” screen. Choose “Start a new Android Studio Project”.

Specify the name of the application, the project and the package.

“Configure your new project” screen. Add your application name and the projects package name.

In the next window, select the form factors your app will run on.

“Target Android Devices” screen.

In the next window you should choose “Blank Activity”. In our example, we choose to create a project with some basic configuration.

“Add an activity to Mobile”. Choose: “Add no activity”.

As we can see now, our project has some basic files, such as our value files that contain the strings, the styles and the default dimens. Now, our project has just been created. This is how it looks like in the “Android” project view:

A new Android Studio project has just been created. This is how it looks like.

2. Create the layout of the project

To add an Android Toolbar component, we declare our user interface with a Toolbar to the position we want to add it. In this example, we are going to have the Android Toolbar to its natural place on the top of our xml.

To begin with, we need to add a Toolbar component to our layout.

Open res/layout/activity_main.xml , go to the respective xml tab and paste the following:

3. Creating the source code of the main AndroidToolbarExample Activity

We have to instantiate the Toolbar and add it to your activity by using setSupportActionBar(Toolbar) method.

Open src/com.javacodegeeks.androidtoolbarexample/AndroidToolbarExample.java file and paste the code below.

We have also added an OnClickListener to the Toolbar in order to add a click event on it.

3. Modify application styles

Open res/layout/styles.xml , go to the respective xml tab and paste the following:

4. Composing Android Manifest

The AndroidManifest.xml of our project is simple but we must apply the above theme to Activity. Here in this step we need to apply the theme which we have created.

This can be done, by using android:theme attribute in your application AndroidManifest.xml.

5. Composing build.gradle file

We should add the App Compact V7 support support library in our project. We can add the App Compact V7 support support library dependency to our application via build.gradle file.

Читать еще:  Регулярное выражение для проверки email javascript

6. Build, compile and run

When we build, compile and run our project, the main Android Navigation Drawer application should look like this:

This is the Android Toolbar Activity.

7. Download the Eclipse Project

This was an example of Android AndroidToolbar Example.

Java android toolbar

There are two kind of bar with control items in activity

  • ActionBar is action control bar or navigation bar you usually see at the top of an app, it usually has an app logo icon on the left, name of the current screen next to the logo, and other menu list on the right. To use actionbar, you don’t have to define an actionbar in the layout file which is handy but it deosn’t give you much flexibilities when you want to do some customizations in the actionbar, such as adding background image, animations, place the actionbar on the bottom instead on the top.
  • Toolbar does evertying you can do with ActionBar, and gives you the freedom to do customiztions that you can’t do easily with ActionBar .

You can use either old ActionBar (without any declarations in XML) or define android.support.v7.widget.Toolbar in activity layout and customize it look and events (more coding in this way).

Let’s look at ActionBar and it’s parameters. Insert following lines in onCreate method and you’ll get ActionBar with icon

ToolBar was introduced in Android Lollipop, API 21 release and is the successor of the ActionBar . It’s a ViewGroup that can be placed anywhere in your XML layouts. ToolBar ‘s appearance and behavior can be more easily customized than the ActionBar .

There are two ways to use Toolbar

  1. Use a Toolbar as an ActionBar when you want to use the existing ActionBar facilities (such as menu inflation and selection, ActionBarDrawerToggle, and so on) but want to have more control over its appearance.
  2. Use a standalone Toolbar when you want to use the pattern in your app for situations that an ActionBar would not support; for example, showing multiple toolbars on the screen, spanning only part of the width, and so on.

So, you should replace ActionBar with ToolBar if you want the flexibilities that comes with the Toolbar (adding background image, animations, place the actionbar on the bottom instead on the top and so on). Note that the ActionBar continues to work and if all you need is a static bar at the top that can host icons and a back button, then you can safely continue to use ActionBar .

To use Toolbar as an ActionBar , first ensure the AppCompat-v7 support library is added to your application build.gradle (Module:app) file

Second, let’s disable the theme-provided ActionBar . The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant) within the res/styles.xml file

Now lets talk about the color scheme for our project, as you can see from the image below, there are attributes which you can set to get a basic color scheme of your App done, right now we are just dealing we App bar so we would talk about colorPrimary and colorPrimaryDark . colorPrimary as the name says is the primary color of your App and the App bar while with the colorPrimaryDark you can set the color of the status bar to a certain color.

Next, you need to add a Toolbar to your Activity layout file. Below I place the Toolbar at the top of a LinearLayout like the standard ActionBar

Next, in your Activity or Fragment , set the Toolbar to act as the ActionBar by calling the setSupportActionBar(Toolbar) method

Adding items to ActionBar or Toolbar

Menus are typically created in resource files using XML but they are stored in the res/menu directory though they can also be created in code. To create a menu resource, use the element.

The element defines each individual menu item and is enclosed in the element. A basic menu item looks as follows

The most common attributes are the following

  • id , this is the standard resource identifier;
  • title , this indicates the text to display;
  • icon , this is a draw-able resource;
  • showAsAction , this controls how the menu item is shown;
  • enabled , this is enabled by default.

The showAsAction attribute controls how the menu item is shown. The options include the following:

  • ifRoom , this menu item should be included in the Action Bar if there’s enough space;
  • withText , this indicates that both the title and the icon should be shown;
  • never , this indicates that the menu item should never be included in the Action Bar;
  • always , this indicates that the menu item should be always included in the Action Bar.

First, we will add a string resource to the strings.xml file for the menu title. Start by opening the /res/values/strings.xml file and add the following element to the element EMail

Create a new file in the res/menu directory (right click on res — New — Android resource directory ) and call it menu_main.xml .

Open the menu_main.xml file and add the following XML to define the menu

With the menu now created, we just have to override the onCreateOptionsMenu() method in our activity to inflate the menu

Add the following method to the application to see a Toast when the EMail menu is selected

If you want to show icon in overflow menu use following snippet

Creating sub menus

Sub menus are created and accessed in almost exactly the same manner as other menu elements and can be placed in any of the provided menus, although they cannot be placed within other sub menus. To define a sub menu, include a element within an element.

Here is the XML form this recipe with two sub menu items added

Grouping menu items

Another menu feature that Android supports is grouping menu items. Android provides several methods for groups, including the following

  • setGroupVisible() show or hide all items;
  • setGroupEnabled() enable or disable all items;
  • setGroupCheckable() set the checkable behavior.

Android will keep all grouped items with showAsAction=»ifRoom» together. This means all items in the group with showAsAction=»ifRoom» will be in the Action Bar or all items will be in the overflow.

To create a group, add the menu elements to a element. Here is an example using the menu XML from this recipe with two additional items in a group

A Toolbar is just a decorated ViewGroup and as a result, the title contained within can be completely customized by embedding a view within the Toolbar such as:

This means that you can style the TextView like any other. You can access the TextView inside your activity with:

Note that you must hide the default title using setDisplayShowTitleEnabled . This results in:

How to change color of menu in Toolbar

How to add back button to Toolbar

Android context menu example

First, define main activity layout

Second, describe context menu items

Third, define events and action in MainActivity class

onCreateContextMenu called when a context menu for the view is about to be shown. Unlike onCreateOptionsMenu , this will be called every time the context menu is about to be shown and should be populated for the view (or item inside the view for AdapterView subclasses, this can be found in the menuInfo ).

onContextItemSelected hook is called whenever an item in a context menu is selected. The default implementation simply returns false to have the normal processing happen. You can use this method for any items for which you would like to do processing without those other facilities.

Toolbar example in Kotlin

Following is MainActivity.kt file.

Following is activity_main.xml file.

Following is toolbar_menu.xml file.

Popup menu with icons example in Kotlin

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector
×
×