Snackbar - логічний фінал Toast

Сьогодні поговоримо про компонент з Android design support library під назвою “Snackbar”.

Snackbar - логічний фінал Toast

“Providing lightweight, quick feedback about an operation is a perfect opportunity to use a snackbar.”

Snackbar компонент доступний в design support library. Використовуючи Snackbar, ми можемо показувати швидкі повідомлення в нижній частині екрану (в осносному). Даний компонент дуже схожий на Toast, але більш гнучкий:

• Він автоматично зникає після таймауту чи після взаємодії з користувачем.
• Опціонально містить в собі дію.
• Можна відмінти FAB свайпом з екрану.
• На відміну від Toast перекриває екран, а не накладається
• Являється частиною UI та є контексозалежним.
• Тільки один snackbar може відображатися в один проміжок часу.

Snackbar успадквує ті ж методи та атрибути що й Toast, наприклад LENGTH_LONG та LENGTH_SHORT для налаштування тривалості.

Синтаксис:

Поглянемо на маленький приклад:

Snackbar.make(view, message, duration)        .setAction(action message, click listener)        .show();

Методи:

• make() – Змусити Snackbar відображати повідомлення;
• setAction() – Налаштувати дію;
• show() – Показати Snackbar;

Арибути:

• Перший параметр методу make() це view, snackbar спробує знайти батьківський view для утримання snackbar. Snackbar прогляне все дерево шарів і закріпиться на верхньому.
• Як вже згадувалось раніше, аргумент тривалості такий же як і в Toast, але тільки LENGTH_SHORT чи LENGTH_LONG, так тут не можна явно вказати тривалість.

Приклад:

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT)        .setAction("Undo", new View.OnClickListener() {            @Override            public void onClick(View v) {                // Perform anything for the action selected            }        })        .show();

Тут, кореневий шар (layout) framelayout має FAB, який в свою чергу викликає Snackbar.
Натисніть на FAB та перевірте результат:



Так, все працює але на жаль не так як мало б взаємодіяти з UX. Насправді снекбар мав би зсунути FAB трох вверх, як зображено нижче, а також сказано в документації:

Having a CoordinatorLayout in your view hierarchy allows Snackbar to enable certain features, such as swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

Ми поговоримо про CoordinatorLayout в наступній статті.

Налаштування Snackbar

Ми можемо використовувати деякі додаткові налаштування в snackbar наприклад: setActionTextColor та setDuration:

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT)        .setAction("Undo", new View.OnClickListener() {            @Override            public void onClick(View v) {                // Perform anything for the action selected            }        })        .setActionTextColor(R.color.material_blue)        .setDuration(4000).show();

Завантажити приклад можна за посиланням: https://github.com/PareshMayani/DesignSupportLibraryExamples
Джерела:

• https://developer.android.com/reference/android/support/design/widget/Snackbar.html

Підсумкт

Ми трохи поговорили про Snackbar, що функціонує подібно до TOAST але з більш ширшими та гнучкішими налаштуваннями, він може також вміщувати в собі єдину дію та бути відхиленим простим свайпом з екрану або автоматично після закінчення виділеного інтервалу часу, чи навіть після взаємодії з користувачем.
Ми безумовно побачимо більше ефектів та поведінки завдяки підключенню CoordinatorLayout, але це буде в наступній статті.

source

4. Кнопка, ресурси, xml

Зовнішній вид нашої кнопки бажає кращого. Сьогодні ми трохи над нею попрацюємо.
Є у нас така-собі звичайна кнопка, нічим не примітна, ніяк не виділяється. Виглядає ось так:

А описана ось так:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"
        />

Трохи видозмінимо її. Для початку додамо декілька ресурсів: розмір тексту в файл dimens.xml і сам текст, якщо він у вас ще не там в strings.xml.

<dimen name="btnTextSize">24sp</dimen>
<string name="Play">Play</string>

sp — Scale-independent Pixels одиниця виміру, що основана на відношенні діагоналі екрану до його роздільної здатності та на системних налаштуваннях розміру шрифту.

 <Button

        android:textStyle="italic|bold"                 курсив

        android:textSize="@dimen/btnTextSize"    посилання на ресурс розміру шрифту

        android:gravity="center|center_vertical"  положення тексту зліва, вертикально по центру

        android:layout_width="match_parent"      заповнити "предка"

        android:layout_height="wrap_content"     розмір відносно вмісту кнопки

        android:text="@string/Play"                    посилання на ресурс тексту

        android:id="@+id/button"                       створення посилання на кнопку

        android:layout_below="@+id/imageView"   знизу відносно зображення

        android:onClick="pause"                         виклик методу після натискання

        android:layout_centerHorizontal="true"     розміщення горизонтально посередині

        />

Завантажимо декілька зображень. Перше переіменовуємо на rama.9.png. Це особливий тип зображень nine-patch drawable, що може змінювати свою форму відносно зображення, тобто розтягуватися в залежності від потреб, зазвичай використовується як фон. Саме так ми його і будемо використовувати. Зберегти це зображення необхідно в одну з папок drawable.
Наступне зображення помістимо в drawable-hdpi і назвемо його musicico.png.

<Button
        android:background="@drawable/rama"              посилання на ресурс рамки
        android:drawableLeft="@drawable/musicico"        посилання на ресурс іконки
        android:textStyle="italic|bold"
        android:textSize="@dimen/btnTextSize"
        android:gravity="center|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"

        />

Задамо відступ в нашому RelativeLayout щод кнопка не зливалася з краями екрану і все не виглядало так дико і потворно.

android:padding="6dp"

dp - Density-independent pixel міра що задає однакове маштабування на різних пристроях, заснована на тому ж відношенні діагоналі і роздільної здатності. Звичайно, ми може вказати px (pixel) але тоді на кожному пристрої буде різний відступ. На одних пристроях замалий, а на інших завеликий.

Вже не погано, але можна краще. Кнопка може бути "не натиснутою", "натиснутою", і "в фокусі" (натиснутою в даний момент, коли ви тримаєте на ній палець). Але біда в тому, що ми не можемо в тексті одної кнопки вказувати background декілька разів. Отже доведеться створити окремий файл background для кнопки. 
В папці drawable створимо файл button_background.xml. res->new->android resourse file тип drawable, кореневий ресурс - selector.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/infocus" android:state_focused="true" />
    <item android:drawable="@drawable/rama" />

</selector>

і точно те ж саме зробимо для іконки

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/musicico_inv" android:state_pressed="true" />
    <item android:drawable="@drawable/musicico" />

</selector>

Текст залишається чорним і не читається не темному фоні. Зробимо файл-ресурс і для кольору. why not?
В каталог color додаємо файл text_color.xml з таким вмістом.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_pressed="true" />
    <item android:color="#484848" />
</selector>

Кнопка виглядає так:

  <Button
        android:textColor="@color/text_color"
        android:background="@drawable/button_background"
        android:drawableLeft="@drawable/button_image"
        android:textStyle="italic|bold"
        android:textSize="@dimen/btnTextSize"
        android:gravity="center|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"
        />

Вийшло багатувато тексту. А якщо трба зробити 10 таких кнопок? Ну його в баню стільки писати. Перенесемо весь цей непотріб в стиль.

Після таких маніпуляцій текст кнопки скоручується до невпізнанності.

<Button
        android:text="@string/Play"
        android:id="@+id/button"
        android:onClick="pause"
        style="@style/btn_style" />

Все що можна ми винесли до стилю.

<style name="btn_style">
        <item name="android:textColor">@color/text_color</item>
        <item name="android:background">@drawable/button_background</item>
        <item name="android:drawableLeft">@drawable/button_image</item>
        <item name="android:textStyle">italic|bold</item>
        <item name="android:textSize">@dimen/btnTextSize</item>
        <item name="android:gravity">center|center_vertical</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_below">@+id/imageView</item>
        <item name="android:layout_centerHorizontal">true</item>
    </style>

і отже при додаванні наступної подібної кнопки нам не треба писати все занова, просто додамо

style="@style/btn_style"

і все готово.

Да прибуде з вами сила.

3. Android - Аудіо, Текст

Продовжуємо творити прекрасне. В минулому уроці у нас був створений перший додаток настільки крутий, що крім тексту міг показувати ще й зображення. Сьогодні спробуємо додати аудіо. Такий-собі рагульний плеєр. Для сміху.
У нас є лінк на аудіотрек. Завантажуємо. В проекті створюємо папку з назвою "raw", і копіюємо туди наш файл. Додаємо на activity_my.xml кнопку, на якій пишимо "Play", при натисканні на яку буде включатися наша завантажена мелодія, і пауза після повторного натискання. Відкриваємо файл MyActivity.java і додаємо в початок класу такі змінні:

    MediaPlayer song; // екземпляр класу пісні
    Button btn;// екземпляр кнопки

В методі onCreate() додамо значенння цим посиланням.

        song = MediaPlayer.create(this,R.raw.war); // war - ім'я нашого аудіофайлу
        btn = (Button) findViewById(R.id.button); // button - ім'я кнопки

далі створимо метод:

        public void pause(View view){
                if(song.isPlaying()) {
                    song.pause();
                    btn.setText("Play");
                }
                 else{
                     song.start();
                     btn.setText("Pause");
                 }
            }
Додамо можливість зупинити музику при покиданні додатку. Для цього нам необхідно перевизначити метод onPause().

    @Override
    protected void onPause() {
        super.onPause();
        song.stop();
    }
В кнопку, в файлі activity_my.xml, додамо рядок, що відповідатиме за виклик методу запуску музики:

          android:onClick="pause"

Запускаємо.
Перевіряємо.

Не погано було б додати текст до нашої пісні. Перш за все створимо в файлі strings.xml ресурс під назвою lyrics з текстом пісні. Не забуваємо відмітити всі недопустимі символи.

В файлі activity_my.xml створимо TextViev для перегляду тексту пісні, та завчасно помістимо його в ScrolView, щоб забезпечити можливість прокрутки тексту.

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/button"
    android:id="@+id/scrollView"
    android:onClick="translateOnClic">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lyrics"
        android:id="@+id/textView2"
        android:textSize="18dp"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/scrollView"
        android:layout_alignEnd="@+id/scrollView" />
</ScrollView>

Виглядає непогано, як для новачків, але що ж в горизонтальному положенні? Біда. Але і для цього є вихід.

Створимо окремий файл для альбомного виду нашого додатку. Для цього на папці "res" правою кнопкою "New" -> "resoursse file". Файл назвати точно так же як і вже існуючий для вертикальної (портретної) орієнтації екрану і помістити в папку layout-land. Копіюємо всі елементи з уже існуючого файлу і налаштовуємо під горизонтальну орієнтацію.
Перевіряємо.
Готово.
Все.
Радий був для вас старатися.

2. Android "Перша програма"

Якщо ти прочитав мій перший урок, він тобі сподобався і ти вирішив продовжити, то я глибоко здивований, чесне слово.
В цьому уроці:

1. Перша програма;
2. Структура проекту;
3. Створення .apk файлу.

Кому хочеться сидіти і зубрити теорію? Це ж фігня для ботанів, нам треба одразу ж в бій. Отже робимо наш перший проект. Зазвичай, перший проект, перша програма на будь-якій мові - це "Hello World", але якщо ти пройшов мій перший урок, то там було щось на кшталт цього, і це тупо, тому що IDEA зробила все за нас, ми навіть довбаного рядка не написали.
Запускаємо Android Studio i Genymotion це обов'язково, інакше нічого не вийде.

Рисунок 1 - запуск Android Studio

Рисунок 2 - Запуск Genymotion

Рисунок 3 - Вікно запущеного віртуального пристрою

В Android Studio створимо новий проект File -> New Project. Вводимо назву нашого додатку (Application Name), ну нехай це буде "BestApp1" щоб конкуренти знали з ким зв'язались. Далі необхідно ввести "Company Domain, тобто сайт вашої компанії, чи ваш сайт, але це по любому має бути унікальне ім'я і не співпадати з існуючими вже. Якщо вже хтось раніше публікував на Google Play додатки з таким доменним ім'ям то виникне конфлікт імен, ваш додаток не опублікують на сайті, а світ втратить ще одного розробника, і десь заплаче котик.

Рисунок 4 - Котик, якого ти розчарував

Ви ж не хочете засмучувати маленького?
За використанням вашого доменного імені та імені додатку утвориться унікальна назву пакету для вашого додатку типу com.YOURNAME.bestapp1. А ще автоматично утвореться каталог з вашим проектом C:\Users\YOURNAME\Documents\GitHub\BestApp1. Тут майже нічого й робити не треба, все робиться автоматично. Халява.
"Next"
Вибираємо платформу для якої будемо розробляти наш додаток в мене це "Phone and Tablet", minimum sdk я вибрав "API 16: Android 4.1 (Jelly Bean)", що охоплює 72.0% існуючих пристроїв. Можна звичайно вибрати API 8: Android 2.2 (Froyo) щоб задіяти всі існуючі пристрої, але це марна трата часу та сил, тим паче, що функціонал API 8 значно обмеженіший.

Якщо ви попередньо не завантажили SDK з якими збираєтесь працювати, то без сумніви ви зараз застряли і не можете нічого вибрати. "Tools" -> "Android" -> "SDK Manager"

"Blank Activity" - пустий екран, все що треба ми додамо самі. "Next" нічого не змінюємо "Finish".

Чекаємо доки Gradle збере наш додаток. З повільним підключенням до інтернет, це може бути проблемно. Виберемо offline режим


Запускаємо пустий додаток кнопкою зеленим трикутником, або РРРРРРРРРРР, перед нами з'являється вікно вибору пристроїв, де ми вибираємо свій.

Рисунок 5 - Вікно вибору пристрою

Пам-Пара-Пам.

Рисунок 6 - BestApp1 в дії

Програма, яка нічого толкового не робить. Ура :-(
Додамо декілька змін. Але для цього необхідно трохи розібратися з структурою проекту.

Рисунок 7 - Дерево проекту в Android Studio

Дерево проекту - це такий собі перелік файлів і папок проекту, що розміщено за адресою вказаною навроти імені проекту BestApp1 (C:\Users\astefanovskiy\Documents\GitHub\BestApp1). Можна відкрити в Explorer і подивитися в звичному вам виді.

Рисунок 8 - Дерево проекту в Explorer

Розглянемо основні необхідні нам каталоги, щоб зрозуміти, що і до чого тут.
src - вихідний код ПО;
java - вихідний код Java;
res - вихідний XML код Activity та ресурси ПО (зображення, звуки, відео, тексти, бази даних)
drawable - каталоги зображень для різної роздільної здатності пристроїв від 320х240 до 1920х1080;
layout - XML файли компонування екрану Activity;
menu - меню ПО;
values - строкові ресурси, кольори та розміри;
AndroidManifest.xml - файл, що вказує точку входу в додаток та задає дозволи на використання ресурсів додатком будь то камера, місце знаходження чи інтернет з'єднання.
R.java - важливий файл, про який знати просто необхідно. Він знаходиться в BestApp1 -> app -> build -> generated -> sourse -> r. Це файл, що генерується автоматично і містить в собі посилання на всі компоненти, унікальні ідентифікатори (ID). Імена ID співпадають з іменанми ресурсів. Змінювати будь-які значення не рекомендується, та це й не має сенсу, так як файл генерується автоматично, як я вже й сказав.

Таксс... основу заложено.
Почнемо наші зміни. Переходимо в BestApp1->app->src->main->res->layout і відкриваємо наш файл activity_my.xml

Рисунок 9 - Вигляд вікна Android Studio

Знизу є дві вкладки "Design" та "Text". Нам потрібно змінити на "Text".

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:paddingLeft="@dimen/activity_horizontal_margin"
6.     android:paddingRight="@dimen/activity_horizontal_margin"
7.     android:paddingTop="@dimen/activity_vertical_margin"
8.     android:paddingBottom="@dimen/activity_vertical_margin"
9.     tools:context=".MyActivity">
10. 
11.     <TextView
12.         android:text="@string/hello_world"
13.         android:layout_width="wrap_content"
14.         android:layout_height="wrap_content" />
15. 
16. </RelativeLayout>

Змінимо текст: в коді вище, червоним виділений рядок в якому заданий ресурс, що відповідає за текст. Зараз про це розповідати не буду, просто видаліть 12-ий рядок, а замість нього вставте два нових:
android:text="Linkin Park - War"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"

Перший - це просто текст, другий означає, що текст буде зверху, а третій означає, що текст буде розміщено по центру по горизонталі.
Додамо зображення: припустимо у вас є зображення але воно занадто велике. А, як відомо, мобільні пристрої обмежені в ресурсах. Нам необхідно зменшити розмір зображення, та ще й підготувати декілька його варіантів для різних видів екранів (одна з найбільших морок розробки під андроід це наявність великої кількості пристроїв з різними розмірами екранів та різною роздільною здатністю). Є дуже корисна штука для вашого PhotoShop, що автоматично створює різні розміри зображення завантажити Action Script  можна за вказаним лінком. Встановлюється дуже просто. В Photoshop тиснемо Alt+F9, з'явиться вікно з операціями, завантажуємо скачану нами операцію. Вибираємо зображення, тиснемо F9 і конвертоване зображення зберігаємо в папку проекту починаючи з найбільшого, тобто drawable-xxhdpi. Імена файлів можуть бути тільки латинськими маленькими буквами, цифрами та знаком "_". В іншому разі вас чекатиме помилка.
Повертаємось в Android Studio і в файл activity_my.xml  додаємо наступні рядки:
1    <ImageView
2        android:layout_width="wrap_content"
3        android:layout_height="wrap_content"
4        android:id="@+id/imageView"
5        android:src="@drawable/cover"
6        android:layout_below="@+id/textView"
7        android:layout_alignParentLeft="true"
8        android:layout_alignParentStart="true" /> 
Якщо ви назвали всі зображення cover то все добре, в інакшому випадку назва зображень має бути однаковою і, якщо вона відрізняється від cover то необхідно це виправити в 5 рядку.

Настав момент створити з цього чуда, власний .apk файл щоб друзі могли з тебе посміятися.
Build -> Generate Signed APK... -> Перед вами з'явиться вікно

Рисунок 10 - Створення підписаного APK файлу

Необхідно створити ключ, яким ми будемо підписувати свої програми. Це необхідно для того щоб всі знали хто тут татко  щоб при завантаженні ПО в магазин Google компанія могла виявити належність автора, і щоб ваші програми не продавали різні лузери.
Тиснемо "Create new..."

Рисунок 11 - Створення сховища для ваших ключів

Вводмо необхідні дані. По мінімуму необхідно вказати розташування, паролі, alias - ім'я ключа, знову паролі, ім'я ваше, краще вводити своє, щоб уникнути проблем при отриманні гонорарів. Далі - Далі - Готово. І у вас є збережений apk файл, яким тепер можна поділитися.

Все.
Радий був для вас старатися.
"Дружелюбный сосед Человек-Паук"

1. Android "Те про що пишуть всі і на чому, в основному, і закінчується жага до викладальницької діяльності

Ти хочеш створювати програми на Android тому що це в тренді, популярно і престижно. Ти або знаєш вже Java або тільки вивчаєш, або ще ні. Вчити Java тобі доведеться все-одно, бо без неї нікуди не подінешся в нашій тяжкій справі программерів.
З чого почати навчання? З встановлення необхідного програмного забезпечення, на кшталт: середовище розробки (Eclipse, IDEA), JDK, альтернативна віртуальна машина відмінна від стандартної (Genimotion, Jar of Beans, Native Android Emulator, YouVawe, BlueStacks). Цим і займемося сьогодні.
Не бачу сенсу описувати супердетально процес встановлення програм. Приведу лінки та порядок встановлення.
1. JDK
Переходимо за посиланням, вибираємо вашу операційну систему, скачуєму. Процес встановлення стандартний ("Згоден", "Далі", "Далі", "Готово")
2. ADT
Можна скачати просто ADT і налагодити для роботи з Eclipse, IDEA чи чимось іншим на ваш розсуд. Я рекомендую Android Studio, хоча дане ПО зараз і знаходиться в бета тесті, але воно має багато переваг перед конкурентами.
"Завантажити" - "Встановити"

3. Genymotion
Genymotion на відміну від стандартного емулятора працює на базі VirtualBox за рахунок чого і являється швидшим, а також має багато додаткових функцій в розробці, що можуть виявитися корисними в розробці та тестуванні ваших шедеврів.
a) Завантажуємо і встановлюємо VirtualBox.
b) Заходимо на головну Genymotion, реєструємось (важливо вибрати пункт, для власного користуванн, тобто безкоштовний варіант, для початку і цього вистачить, якщо вам сподобається даний емулятор то пізніше зможете купити), підтверджуємо реєстрацію, завантажуємо ПО, стандартне встановлення. Тепер вибираємо віртуальні девайси, що вам необхідні для тестуванн - Genymotion все завантажить та встановить.
c) Налагодження в Android Studio емулятора.
Тут неочікувано нам необхідно створити нашу першу програму. Вибираємо все за стандартом. "Далі"-"Далі"-"Готово"
І ось тут момент з налагодженням Genymotion. Run->Edit Configurations->General->Target Device->Show Chooser Dialog або USB Device. В першому випадку вам запропонують вибрати з запропонованого переліку можливих пристроїв, будь то віртуальні девайси вбудованого емулятора, реальні підключені пристрої чи створений наш в Genimotion. (Перед запуском додатку необхідно запустити віртуальний пристрій.) 
Натискаємо на клавішу Run (зелений трикутник) і перед нами з'являється вікно вибору. Вибираємо наш пристрій і вуаля - все працює швидко, круто і красиво.

Дякую за увагу.

Ліниві курси Android.