Как убрать toolbar android studio

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

Создадим разметку с использованием Toolbar:

Запускаем и видим две цветные полоски Toolbar, а между ними приютился TextView.

Я пока не видел практического применения Toolbar на экране активности в виде отдельной дополнительной панели, поэтому сосредоточимся на первой панели, которая должна служить заменой ActionBar. На данный момент панель совсем не похожа на заголовок приложения - нет ни значка, ни текста, ни меню. Просто пустая полоска.

Чтобы подсказать приложению, что панель является заменой ActionBar, нужно присоединить её в коде через метод setSupportActionBar().

 // Kotlin override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val toolbar: Toolbar = findViewById(R.id.toolbar) setSupportActionBar(toolbar) title = "Toolbar Demo" > 
// Java package ru.alexanderklimov.toolbar; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity import androidx.appcompat.widget.Toolbar import android.view.View; public class MainActivity extends ActionBarActivity < private Toolbar mToolbar; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mToolbar = findViewById(R.id.toolbar); setSupportActionBar(mToolbar); //setTitle("Toolbar Demo"); >> 

Теперь мы видим привычный заголовок приложения. Панель стала частью заголовка. Сейчас в заголовке выводится имя приложения. Если вы уберёте комментарий со строки setTitle(), то увидите, что этот метод активности действует и на Toolbar - ещё одно доказательство, что панель встроилась в активность и стала её родной частью. Если вы добавите код для меню, то в панели появятся также и три вертикальные точки.

Добавим различные настройки для него, они вам знакомы по ActionBar:

 // Kotlin title = "Стандартный заголовок" // работает toolbar.title = "Стандартный заголовок" // не работает toolbar.subtitle = "Подзаголовок" toolbar.setLogo(R.mipmap.ic_launcher) // Java setTitle("Стандартный заголовок"); // работает mToolbar.setTitle("Стандартный заголовок"); // не работает mToolbar.setSubtitle("Подзаголовок"); mToolbar.setLogo(R.drawable.ic_launcher); 

Это только часть методов. В документации найдёте остальное. Метод Toolbar.setTitle() у меня не заработал, в заголовке всё равно выводился текст из ресурсов app_name. Но работает метод активности setTitle().

Upd. Насколько я понял, в методе onCreate() рано вызывать метод Toolbar.setTitle(), так как текст заголовка переписывается текстом из манифеста (android:labed). Нужно сделать это чуть позже. Как вариант, вызвать в методе onPostCreate(), который сработает после onCreate(). Если действовать через щелчок кнопки, то текст меняется без проблем.

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

Если вы используете дизайн Material, то для фона желательно использовать соответствующие цвета, например, так.

 android:background="?attr/colorPrimary" 

 android:minHeight="?attr/actionBarSize" 

В качестве темы используйте следующий вариант.

 app:theme="@style/ThemeOverlay.AppCompat.ActionBar" 

Обратите внимание, что используется пространство имён xmlns:app="http://schemas.android.com/apk/res-auto".

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

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

Стилизация

Соберём все стили вместе.

Ещё один стиль добавляет пустое место сверху (добавить в MyToolbar). Редко используется.

 ?actionBarSize 

Применим через style, tittleTextAppearance and subtittleTextAppearance:

Прозрачность достигается через windowTranslucentStatus:

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

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

Добавим кнопку действия на Toolbar. Так как в нашем случае Toolbar служит заменой ActionBar, то наш код ничем не будет отличаться от старого способа для панели действий. Просто освежим память.

В файле res/menu/menu_main.xml добавим новый пункт (при необходимости создайте папку и файл вручную).

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

Созданная кнопка будет использоваться для перехода на вторую активность. Создайте её самостоятельно.

Перейдём в класс основной активности и добавим код для перехода на вторую активность.

 @Override public boolean onCreateOptionsMenu(Menu menu) < getMenuInflater().inflate(R.menu.menu_main, menu); return true; >@Override public boolean onOptionsItemSelected(MenuItem item) < int switch (id)< case R.id.action_settings: return true; case R.id.action_next: // Запускаем вторую активность Intent intent = new Intent(MainActivity.this, SecondActivity.class); startActivity(intent); return true; default: return super.onOptionsItemSelected(item); >> 

Используем

Во многих примерах часто используют приём включения одного файла разметки в другой.

Создадим файл action_toolbar.xml в папке res/layout и укажем в качестве корневого элемента Toolbar.

Переходим в разметку основной активности и добавим созданную панель через тег include.

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

Если вставлять код в шаблон с RelativeLayout, то текст "Hello World" может наложиться на панель. Поэтому укажем ему место под панелью.

Напишем код. Объявим переменную типа Toolbar и присоединим её к экрану активности.

 private Toolbar mToolbar; @Override protected void onCreate(Bundle savedInstanceState)

Запустим код и получим прозрачную панель.

Вряд ли мы ожидали такого варианта. Добавим фон.

Смотрим на результат. Видим, что панель имеет отступы, которые были добавлены в шаблоне.

Для панели, которая выступает в качестве ActionBar, таких отступов быть не должно. Очистим лишние атрибуты у корневого элемента RelativeLayout.

Теперь мы получили правильную панель.

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

Старый способ через аппаратную кнопку меню. Меню будет вызвано из другого места.

Можно изменить цвет меню, добавив дополнительный атрибут.

Можно задать свою отдельную тему для панели, определив цвет текста, который должен быть достаточно контрастным на фоне панели. Добавим в файл styles.xml

Подключим стили к панели.

Я намеренно задал разные цвета для атрибутов android:textColorPrimary и android:textColorSecondary, чтобы было заметно, где они используются.

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

Для Toolbar также можно указать следующие атрибуты:

 android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" 

Системный размер высоты для панели приложения можно использовать и в стандартном атрибуте высоты:

 android:layout_height="?attr/actionBarSize" 

Если хотите использовать стандартную тему для панели, не переопределяя никаких атрибутов, то так и пишите:

 android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar" 

Если мы хотим использовать Toolbar не как замену ActionBar, а как отдельную панель, то её создание и присоединение к ней меню может быть следующим.

 @Override public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = findViewById(R.id.my_toolbar); // Добавляем меню к отдельной панели toolbar.inflateMenu(R.menu.your_toolbar_menu); // Set an OnMenuItemClickListener to handle menu item clicks toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() < @Override public boolean onMenuItemClick(MenuItem item) < // Handle the menu item return true; >>); > 

При использовании SearchView на панели также были внесены изменения. Можно задать стили для данного компонента. Не проверял, оставлю на память.

 values/themes.xml   

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

 values-21 //Activity theme:  //Popup style  

В API 21 также появились новые стили для элементов меню.

Применим к панели.

Вложенный Toolbar

Toolbar можно вложить в какой-нибудь контейнер, например, CardView. Сам на практике не использовал. Но для общего развития оставлю.

Добавим пару ресурсов в файл dimens.xml:

 112dp 32dp 

Создадим разметку экрана.

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

Также обратите внимание на компонент View с высотой 1dp оранжевого цвета, который добавляет полоску под панелью. Вы можете усложнить пример, добавив тень и другие эффекты.

Добавим на вторую панель кнопку действия. Для этого создадим ресурс меню res/menu/menu_main.xml:

Код для активности.

 package ru.alexanderklimov.toolbar; // замените support на compat-версии import android.os.Bundle; import android.support.v4.view.MenuItemCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.SearchView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar nestedToolbar = findViewById(R.id.nestedToolbar); Toolbar generalToolbar = findViewById(R.id.generalToolbar); generalToolbar.setNavigationIcon(android.R.drawable.ic_menu_camera); setSupportActionBar(nestedToolbar); getSupportActionBar().setTitle("Вложенный Toolbar"); >@Override public boolean onCreateOptionsMenu(Menu menu) < getMenuInflater().inflate(R.menu.menu_main, menu); return true; >@Override public boolean onQueryTextSubmit(String query) < return false; >@Override public boolean onQueryTextChange(String newText) < return false; >> 

Значок возврата

Если вторая активность зависит от первой, то в манифесте прописывают атрибут parentActivityName.

В этом случае на панель у второй активности можно добавить специальный значок возврата обратно в родительскую активность в виде стрелки.

 supportActionBar?.apply

Вам не придётся писать код для возврата на родительскую активность, система сама сделает возврат по щелчку на значке.

Цвет значка определяется системой. Можно программно изменить его. Поменяем цвет стрелки на красный.

 toolbar.navigationIcon?.apply < if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) < colorFilter = BlendModeColorFilter(Color.RED, BlendMode.SRC_IN) >else < setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN) >> 

Если вы хотите заменить системный значок стрелки на что-то своё, то добавьте стиль в MyToolbar (см. выше):

 @drawable/ic_pets_24 

Можно переопределить поведение значка возврата. Не хотите возвращаться на родительскую активность? Напишите свой код.

 // Kotlin toolbar.setNavigationOnClickListener < Toast.makeText(this, "Не хочу возвращаться!", Toast.LENGTH_LONG).show() > 
// Java toolbar.setNavigationOnClickListener(new View.OnClickListener() < @Override public void onClick(View view) < // Может быть другой код onBackPressed(); >>); 

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

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

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

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

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

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

resources>  Base application theme. --> style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  Customize your theme here. --> item name="colorPrimary">@color/colorPrimaryitem> item name="colorPrimaryDark">@color/colorPrimaryDarkitem> item name="colorAccent">@color/colorAccentitem> style>  Остальные элементы ниже не изменились --> resources>

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

xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android.support.v7.widget.Toolbar android:id="@+id/toolbar" style="@style/Toolbar"/> RelativeLayout>  Весь контент информации о пользователе --> RelativeLayout> LinearLayout>

resources>  Остальные элементы выше не изменились --> style name="Toolbar"> item name="android:layout_width">match_parentitem> item name="android:layout_height">?attr/actionBarSizeitem>  @style/ThemeOverlay.AppCompat.Dark.ActionBar --> item name="android:background">@color/colorPrimaryitem> style>  Остальные элементы ниже не изменились --> resources>

Атрибуты элемента 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) :

public class UserInfoActivity extends AppCompatActivity < // Остальной код выше не изменился private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) < // Остальной код выше не изменился toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); // Остальной код ниже не изменился > >

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

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

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

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

resources>  Остальные элементы выше не изменились --> style name="Toolbar"> item name="android:layout_width">match_parentitem> item name="android:layout_height">?attr/actionBarSizeitem> item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBaritem> item name="android:background">@color/colorPrimaryitem> style>  Остальные элементы ниже не изменились --> resources>

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

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

Осталось наполнить наш 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 version="1.0" encoding="utf-8"?> menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> item android:id="@+id/action_search" app:showAsAction="always" android:icon="@drawable/ic_search_white_24dp" android:title="@string/search_hint"/> menu>

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

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

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

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

public class UserInfoActivity extends AppCompatActivity < // Остальной код выше не изменился @Override public boolean onCreateOptionsMenu(Menu menu) < getMenuInflater().inflate(R.menu.user_info_menu, menu); return true; > // Остальной код ниже не изменился >

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

public class UserInfoActivity extends AppCompatActivity < // Остальной код выше не изменился @Override public boolean onOptionsItemSelected(MenuItem item) < if(item.getItemId() == R.id.action_search) < Intent intent = new Intent(this, SearchUsersActivity.class); startActivity(intent); > return true; > // Остальной код ниже не изменился >

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

public class UserInfoActivity extends AppCompatActivity < private void displayUserInfo(User user) < // остальной код выше не изменился getSupportActionBar().setTitle(user.getName()); > >

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

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

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

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

• Русскоязычные:
  • Material Design. Динамический Toolbar на живом примере
  • Официальная документация. Поддержка экранов с различной плотностью пикселей
  • Создание меню
  • Официальная документация. Меню
  • Официальная документация. Toolbar
  • Официальная документация. Работа с toolbar

  Полный листинг изменений кода:

  Похожие публикации:

  1. В txt файле иероглифы как исправить
  2. Как включить караоке на музыкальном центре lg
  3. Как закомментировать несколько строк в python visual studio
  4. Как сделать ползунок в html