Как сделать баннер для андроид

Монетизация Android-приложения с помощью рекламы от AdMob с возможностью платного отключения. Часть первая

Всем привет! На Хабрахабре уже была статья о том, как сделать платное отключение рекламы в Android-приложении, где предлагалось использовать open-source библиотеку Android Billing Library. В данной статье я хочу рассказать о том, как реализовать подобный функционал при помощи системы внутренних платежей Android Market In-app Billing, не используя сторонних библиотек.

Статья состоит из двух частей. В первой части я подробно расскажу о том, как добавить рекламу от Google AdMob в свое приложение (данная часть в основном ориентирована на новичков), а во второй – как сделать ее платное отключение.

Для начала создадим проект простейшего приложения Android в среде Eclipse. О том, как это делается писать не буду (можете почитать об этом, например, здесь).

Установка необходимых компонентов

Для работы с AdMob нам необходимо установить Google AdMob Ads SDK, а также SDK для платформы Android версии 3.2 или выше (см. здесь). Также установим пакет Google Market Billing (о нем речь пойдет во второй части статьи).

Откройте «Android SDK Manager» с помощью команды главного меню Window > Android SDK Manager.

Выберите необходимые пакеты для установки и нажмите кнопку «Install packages…».

После установки пакетов подключим AdMob Ads SDK к проекту. Для этого:

• Нажмите правой кнопкой мыши по проекту в «Project Explorer» и выберите «Properties» (свойства проекта).
• В левой части окна выберите пункт «Java Build Path».
• Нажмите кнопку «Add External JARs…».
• Выберите файл GoogleAdMobAdsSdk-4.3.1.jar, который находится в папке «%ANDROID%\extras\google\admob_ads_sdk\».

В результате, файл GoogleAdMobAdsSdk-4.3.1.jar должен отобразиться в структуре проекта.

Настройка конфигурации приложения

Далее открываем файл конфигурации приложения AndroidManifest.xml и вносим следующие правки:

• Опционально можете добавить параметр android:installLocation=«preferExternal» в теге manifest. Использование этого параметра позволяет установить приложение на карту памяти.
• В теге uses-sdk добавляем параметр android:targetSdkVersion=«13». Версия 13 соответствует SDK для платформы Android версии 3.2. Если вы устанавливали SDK более поздней версии, то вставьте соответствующий номер версии.
• Далее нужно добавить разрешения ACCESS_NETWORK_STATE и INTERNET.
• И на последок, добавьте тег activity с параметрами android:configChanges=«keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize» и android:name=«com.google.ads.AdActivity» в теле тега application.

Ниже представлено содержание файла AndroidManifest.xml.

Теперь нам нужно снова вызвать свойства проекта. В левой части окна выберите пункт «Android». Затем в правой части выберите Android 3.2 на панели «Project Build Target». Если вы устанавливали SDK для Android более поздней версии, то выберите ее.

Получение AdMob Publisher ID

Далее, заходим на сайт www.admob.com (можете использовать для авторизации свой Google-аккаунт). Здесь нам нужно получить «Publisher ID» для привязки рекламы к нашему приложению. Заходим в раздел «Sites & Apps» и выбираем «Android App».

После ввода необходимых полей наше приложение должно появиться в списке «Sites & Apps». Теперь наводим курсор на название приложения и нажимаем появившуюся кнопку «Manage Settings».

После чего мы попадаем на страницу, на которой указан «Publisher ID» для нашего приложения. Скопируйте его, он нам пригодится далее.

Добавление рекламного баннера в приложение

Снова возвращаемся в проект. Откройте файл res/values/strings.xml и создайте следующее строковое значение:

Теперь откройте файл res/layout/main.xml.

Внесем в файл следующие изменения:

• Добавьте в корневой тег LinearLayout параметр xmlns:ads=«schemas.android.com/apk/lib/com.google.ads»
• Добавьте еще один LinearLayout и переместите в него TextView.
• Добавьте в новый LinearLayout параметр android:layout_weight=«1». Это нужно, чтобы он не перекрывал рекламный баннер.
• Добавьте компонент com.google.ads.AdView:

Ниже показано содержимое файла main.xml.

В режиме «Graphic Layout» разметка выглядит следующим образом:

Теперь подключаем свое устройство (или эмулятор) и нажимаем Run. Смотрим, что получилось.

Заключение

В результате проделанных действий мы добавили рекламу AdMob в свое приложение. Как видно, сделать это довольно не сложно.
Следующим этапом будет разработка функционала для платного отключения рекламы при помощи Android MArket In-app Billing, о чем я расскажу в следующей части статьи.

Исходники разработанного приложения можно скачать здесь.

Спасибо за внимание. Надеюсь, что кому-то материал будет полезен. Буду рад вашим комментариям.

Источник

Как внедрить баннеры в Android приложение не перекрыв другие элементы

Баннеры – один из наиболее популярных видов рекламы в мобильных приложениях. Они не занимают много места, как, например, полноэкранная (interstitial) реклама. И позволяют совместить их с элементами пользовательского интерфейса приложения. Их можно добавить на разные экраны в приложении.

Прочитав данную статью, вы узнаете, как лучше вставить баннеры таким образом, чтобы они не мешали пользователю и не портили вид приложения. При этом вам не придётся изменять layout xml и вносить много изменений в код приложения. Вы можете внедрить баннеры в своё готовое приложение, добавив всего несколько строк кода. Подход, описанный в статье, универсальный, вы можете использовать его для API любых рекламных сервисов. Статья будет интересна как для новичков, так и для опытных разработчиков. Если вы — новичок в разработке, то для того, чтобы понять предмет статьи, от вас не потребуется каких-либо глубоких знаний. Достаточно понимания базовых концепций разработки под Android. А опытные разработчики могут найти в ней готовое решение, которое они могут внедрить у себя. Но инициализация рекламного сервиса, работа с конкретными рекламными API и кеширование находятся за пределами данной статьи. Для решения таких вопросов, пожалуйста, обратитесь к руководству для вашего конкретного рекламного сервиса.

Идея статьи возникла от того, что в одном из наших приложений для Android нам было необходимо разместить баннеры в нескольких местах, но сделать это следовало таким образом, чтобы не испортить вид приложения и не перекрыть баннерами элементы управления. Код приложения был уже написан полностью и перекраивать его нам очень не хотелось, поэтому мы постарались сделать так, чтобы добавление баннеров было максимально простым, корректным и не затрагивало работу существующего кода. Другая причина — нам потребовалось создать платную версию приложения без рекламы. А если бы внедрение баннеров потребовало бы изменение layout xml, то это сильно бы усложнило создание версии без рекламы.

Чтобы было более наглядно и понятно то, о чём я пишу, посмотрите на следующий экран:

Элементы пользовательского интерфейса занимают всё пространство экрана. Пустых мест нет. В таком случае, мы можем разместить баннер внизу или вверху. Вариант размещения баннера снизу предпочтительнее, так как баннер будет находится подальше от кнопок и пользователь не заденет баннер, случайно пытаясь нажать на «Выбрать» или «Назад». Нам необходимо разместить баннер снизу экрана под GridView с фото. Так как баннер загружается по сети, он может быть не сразу и не всегда недоступен. Следовательно, не в каждый момент времени его можно показать и может получиться пустое место снизу. Если мы оставим это пустое место – получится очень некрасиво. Будет выглядеть, как будто это грубая недоработка дизайна интерфейса. Если мы разместим баннер поверх GridView, то он перекроет собой части фото и создаст неудобства пользователю, что тоже недопустимо.

Тогда сводим задачу к тому, что нам необходимо сделать так, чтобы не было дополнительных отступов. А когда баннер загружен и может быть показан – динамически добавить отступ снизу и показать баннер. С другой стороны, нам необходимо сделать код размещения баннеров максимально простым, без сложных инициализаций. Т.е. передавать id элементов или ссылки на контейнеры (ViewGroup) недопустимо. Вставлять баннеры в layout xml каждого экрана, куда нам необходимо добавить баннер – тоже недостустимо, т.к. потребует значительных изменений. В идеале, код установки баннера должен выглядеть следующим образом:

Всего одна строка кода, один вызов метода, которому передаётся только ссылка на Activity в которой будет размещён баннер. Такой код можно вставить в метод Activity onCreate.

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

Для того, чтобы это реализовать, нам необходимо знать, что находится в View и получить к этому доступ. Прямого метода для доступа к content view в Activity нет. Но благодаря пользователю nickes со StackOverflow мы нашли решение. Необходимо идти через Window, в котором находится Activity. У Window есть DecorView, а в DecorView находится ContentView. Первый дочерний элемент в нём – это и есть ViewGroup из layout xml.

Так что нам требуется Window, затем мы получаем DecorView, затем получаем ContentView и затем получаем первый дочерний элемент ContentView. И у этого дочернего элемента мы изменяем отступ:

Размещение баннера

Мы нашли решение, как динамически добавить отступ. Теперь нам необходимо разместить сам баннер. У разных рекламных сервисов разные API. У некоторых есть View баннера, который вы можете создать и добавить в ViewGroup. Но некоторые рекламные API не имеют доступа к View баннера, а имеют только метод, который показывает баннер. Рассмотрим оба варианта.

API, в котором есть View баннера

Назовём класс View баннера — Banner. (Чтобы узнать, как он реально называется в вашем случае и как с ним работать, пожалуйста, обратитесь к руководству вашего рекламного сервиса.)

Сначала, нам необходимо создать объект Banner:

Затем ему следует назначить слушатель событий. Нас интересует событие успешной загрузки баннера (это опять код — пример. Для того, чтобы узнать как слушатель называется и как его использовать, обратитесь, пожалуйста, к руководству вашего рекламного сервиса):

Когда баннер загружен, мы вызываем setupContentViewPadding, чтобы динамически добавить отступ снизу.

Затем мы добавляем наш баннер в Window. Мы добавляем его поверх существующих элементов. В классе Window есть метод addContentView для этого:

API без View баннера

У нас нет View баннера и мы не можем создать и разместить его явным образом. Но API имеет методы, вроде showBanner — показать баннер.

Я условно назову класс рекламного API — AdAPI (вам следует обратится к руководству вашего рекламного сервиса, чтобы узнать, как называется класс в которой есть методы размещения баннеров). В этом случае, код размещения баннера будет выглядеть примерно так:

Где BANNER_HEIGHT — константа равная высоте баннера.

Здесь возникают некоторые затруднения. Вам следует точно узнать или установить высоту баннера. У нас была такая проблема: мы запускали наше приложение на 3.7 дюймовом смартфоне и на 10.1 дюймовом планшете. Размеры баннера оказались разными на разных устройствах. На смартфоне баннер выглядел отлично, но на планшете он оказался слишком большим и отнял слишком много места у других элементов. Если ваш рекламный сервис позволяет явно задать высоту баннера — лучше задайте, чтобы не было таких неприятных неожиданностей.

Результат

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

Это то, что нам требовалось.

Использование

Подводя итог всему вышесказанному, привожу способ интеграции кода в ваше приложение.

Замените код в методе showBottomBanner на вызовы API вашего рекламного сервиса.

Чтобы разместить баннер, добавьте строчку кода Ads.showBottomBanner(this) в метод Activity onCreate.

Заключение

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

Надеюсь, статья была полезна для вас.

Пожалуйста, пишите ваши замечания в комментариях.

Благодарю за внимание. Успехов вам в разработке!

Источник

Добавление AdMob рекламы в Android приложение с использованием Firebase

Предисловие

Вводим «AdMob» в Google и первым сайтом уже будет не AdMob-ский, а Google-ский сайт. После перехода на оный Вас начнут по немногу переманивать на темную сторону Firebase (недавно купленный Google).

Firebase дает довольно обширные возможности по аналитике (по крайней мере для меня, как программиста, а не маркетолога) рекламы в вашем приложениее (рост, вес, страна, кол-во просмотров, версии Android куда установливалось и тд. и тп.).

Первым делом был найден пост, но он для Eclipse, а после первых попыток сделать по примеру — начались предупреждения о depricated да и вообще ошибки.

Прочитав больше информации стало понятно, что переход AdMob на firebase произошел недавно и разбиратся придется самому.

Давайте посмотрим как с этим жить теперь

Минимальные требования: (с учетом которых была написана статья).

• Android Studio 2.2.2
• Быть зарегистрированным в Google Developer Console
• Быть зарегистрированным на AdMob
• Мозг

Шаг 1

Добавляем зависимости в build.gradle файлы. Первым делом в ‘Module: app’:

Теперь во второй (‘Project: AdMobOnHabr’):

После чего рекомендуется сделать Tools → Android → «Sync Project with Gradle Files» и скомпилировать проект. Видимого результата еще нету, но главное — ошибок нету? Отлично! Идем дальше.

Шаг 2

Входим в свой аккаунт на AdMob. Выбираем ручное добавление приложения (если Ваше приложение уже опубликовано в Google Play — воспользуйтесь поиском в первой вкладке).

Добавим в наше приложение рекламный баннер (с другими видами предлагаю ознакомится самостоятельно). Частоту обновления Я выбрал минимально допустимую — 30 сек., название рекламного блока на Ваше усмотрение.

Дальше Вам предложат «Настройте Firebase Analytics (необязательно)» — нужное слово подчеркул. Пока что это ни к чему — пропускаем. Ознакамливаемся с «инструкциями по интеграции», жмем Готово. После переадресации видим страницу и долгожданный ID рекламного блока:

Добавляем ad unit ID в strings.xml:

Не забудьте, что для рекламного блока на другой Activity нужен новый ID.

Шаг 3

Добавляем AdView элемент на activity_admobbanner.xml:

В атрибут ‘ads:adUnitId’ записываем ресурс из strings.xml с ID рекламного блока.

Несколько советов и заметок:

Не перепутайте ads и app при добавлении namespace в родительский ViewGroup;

На API Совет по Code Style тэга

Google рекомендует писать тэг закрывая так:

Шаг 4

Инициализируем Google Mobile Ads SDK. Для этого Вам понадобится app ID взятый с AdMob. Жмем шестеренку справа вверху → Управление приложением:

Вот оно, счастье нужный app ID:

Пишем саму, собственно, инициализацию используя свой app ID:

Шаг 5

Последнее действие по версии Google — загрузить долгожданную рекламу в AdView элемент:

На эмуляторе следуя политике AdMob вы не можете выводить реальную рекламу (показывается только тестовая). Довольно логично. Но если у Вас есть реальное устройство — можете протестировать рекламу в действии на нем и порадовать себя успехом.

• Для отображения рекламы на реальном тестовом девайсе перепишите код вот так:

Остается вопрос — где взять волшебный DEVICE_ID_EMULATOR? Все в один голос рекомендуют очень «трушный» способ: пишите вместо DEVICE_ID_EMULATOR любое значение, к примеру:

После чего запускаете приложение на своем устройстве и смотрите logcat. Там найдете лог подобный этому:

Что делать дальше ясно — копируйте полученный код в метод упомянутый выше и радуйтесь жизни.

Заметка:
Дело было ночью, спать хотелось, в общем не повторяйте моих ошибок:
При поиске ID вашего реального устройства — не забудьте выбрать logcat девайса, на котором запущено приложение (у меня, к примеру, было запущено еще несколько эмуляторов и Я упорно не мог понять почему в лог эмулятора не выводится так нужный мне ID)

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

Шаг 6

Где-то между строк Вы должны были прочитать, что без google-services.json оно работать не будет. Скорее всего, даного файла у Вас еще нету. Давайте искать вместе.

Google любезно предоставляет Вам «простыни» инструкций как сделать google-services.json. Но у меня возник вопрос — неужели в 2к16 году нужно самому сидеть и писать этот файл, который, к всему, скорее всего довольно шаблонный?

Ответ находится в Google Developer Console, где все таки подумали про желание ленивого программиста.

Жмем Continue. Выбираем Google Sing-In. Дальше просто — Вы же знаете на память свой SHA-1?

Если вдруг запамятовали — могу помочь. SHA-1 можно узнать с помощью keyltool или немного по-топорному — через gradle в самой AS . Так как лишних действий делать не хочется — выберем второй способ:

Вставляем полученый SHA-1 код, жмем «Enable Google Sign-In» и «Continue to Generate configuration files».

Ну, вы поняли. Скачиваем сгенерированный файл и копируем в корневой каталог приложения:

Собираем свой проект — готово. Путем подобных несложных манипуляций в Вашем приложении теперь есть реклама.

Источник