Освой программирование играючи!

Kotlin: Настраиваем проект под себя

Лайфхак: Файлы с кодом на Kotlin смотрятся странно в папке java в проекте студии. Переключаемся в режим Project, выбираем из контекстного меню папки main меню New | Directory и создаём папку kotlin. Перетаскиваем в папку все файлы классов из папки вашего пакета, например, main/com.example.kitty. Папку java с пустой подпапкой можно удалять. Приложение будет работать по-прежнему.

Адаптивные значки

В Android 8.0 Oreo появилась поддержка адаптивных значков.

Для работы с адаптивными значками следует использовать API 26 и выше. Адаптивные значки состоят из двух слоёв: фон и основная часть.

В манифесте по-прежнему остаётся старая запись о значке.


<application
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
</application>

Читать на сайте

Библиотека CatLoadingView

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

Домашняя страница: Гитхаб

Установим зависимость в Gradle.


compile 'com.roger.catloadinglibrary:catloadinglibrary:1.0.3'

Хотя автор на своей странице приводит пример с версией 1.0.1, есть более свежая версия 1.0.3, которая позволяет установить свой текст под анимацией. По умолчанию выводится текст "LOADING...".

Поместим на экране кнопку для запуска диалогового окна.


package ru.alexanderklimov.cat;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.roger.catloadinglibrary.CatLoadingView;

public class MainActivity extends AppCompatActivity  {

    CatLoadingView mView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mView = new CatLoadingView();
    }


    public void onClick(View view) {
        mView.show(getSupportFragmentManager(), "");
        // Установим свой текст
        mView.setText("М Я У ...");
    }

}

Если не устанавливать свой текст, то увидим следующую картинку.

Стоит отметить, что на некоторых устройствах вы можете не увидеть надпись. Это связано с не очень удачным макетом для фрагмента. Поэтому вы можете форкнуть проект и переделать под себя.

Android: WebP

WebP - новый графический формат, разработанный в Google. По словам разработчиков формата, WebP сочетает возможности JPEG и PNG, поддерживая прозрачность и лучшую компрессию (25-34%).

Изображения формата WebP поддерживаются с Android 4.0 (API 14) и с Android 4.3 (API 18) для прозрачных изображений.

В Android Studio 2.3 появилась встроенная конвертация форматов PNG, JPG, BMP, статических GIF в WebP (9 Patch не поддерживаются).

Щёлкните правой кнопкой мыши на файле картинки в ресурсах и выберите команду Convert to WebP....

Появится диалоговое окно.

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

Возможен и обратный процесс - щелкаем правой кнопкой мыши на файле WebP и выбираем команду Convert to PNG....

Android Studio: Перевод на новую строку

Если курсор находится в середине выражения и вы хотите начать новую строку, не обязательно гнать курсор в конец строки. Просто нажмите комбинацию Shift+Enter.

TextInputEditText

В одном из обновлений Android Support Library 24.2.0 появилась интересная возможность использовать новый компонент android.support.design.widget.TextInputEditText, построенный на основе AppCompatEditText, который в свою очередь является родственником стандартного EditText.

Компонент специально разработан для работы в связке с TextInputLayout (Android Design Support Library).

Особый интерес представляет режим ввода пароля. Посмотрим на примере.

На панели инструментов его пока нет, поэтому пишем вручную.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleContentDescription="description"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorAccent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Пароль"
            android:inputType="textPassword"/>

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

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

Справа видим значок глаза. Нажимаем на него, и пароль весь как на ладони.

Можно попробовать заменить значок глаза на свой через атрибут app:passwordToggleDrawable="@drawable/another_toggle_drawable" (я не пробовал).

Данный режим включится при использовании в android:inputType значений textPassword, numberPassword, textWebPassword, не действует для textVisiblePassword.

Обратите также внимание на атрибуты у TextInputLayout: passwordToggleContentDescription, passwordToggleDrawable (см. выше), passwordToggleEnabled, passwordToggleTint, passwordToggleTintMode - разберитесь с ними сами. Естественно, они также доступны и программным способом.

Android. TextView: Выделить текст для копирования

По умолчанию, текст в TextView нельзя выделить для копирования. Но в API 11 появилась такая возможность, которая может пригодиться. Делается либо при помощи XML-атрибута android:textIsSelectable, либо через метод setTextIsSelectable().

Добавьте в разметку два компонента TextView и одно текстовое поле EditText для вставки скопированного текста. У первой текстовой метки установим возможность выделения текста декларативно.


<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Выдели слово Кот для проверки"
    android:textIsSelectable="true"
    android:textSize="26sp"/>

Для второго компонента возможность выделения создадим программно.


TextView secondTextView = (TextView) findViewById(R.id.textView2);
secondTextView.setTextIsSelectable(true);

Сделайте долгий тап на тексте в любом TextView. Увидите стандартные ползунки для выбора длины текста. Скопируйте текст, сделайте длинный тап в EditText и вставьте текст.

SwitchCompat

Если вы разрабатываете приложение под Material Design, то используйте SwitchCompat, который специально переработали под новые требования. Сравните внешний вид двух компонентов, чтобы увидеть разницу.


<android.support.v7.widget.SwitchCompat
    android:id="@+id/switch_compat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="50dp"
    android:checked="false"
    android:text="SwitchCompat"
    android:textOff="OFF"
    android:textOn="ON"
    app:showText="true"/>

<Switch
    android:id="@+id/switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/switch_compat"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="55dp"
    android:checked="false"
    android:text="Switch"
    android:textOff="Кошка"
    android:textOn="Кот"/>

Как видите, новый компонент из библиотеки использует цвета темы (colorAccent).

Библиотека Android Support Design

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

Для старых проектов

Если вы вручную будете переводить старые проекты под новый дизайн и использовать библиотеку, то установите через SDK Manager репозиторий Android Support Repository последней версии. Далее в Gradle пропишите зависимость. Первая версия имела номер 22.2.0. В проектах используйте свежую версию.


compile 'com.android.support:design:23.0.1'

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


dependencies {
    classpath 'com.android.tools.build:gradle:1.3.0'
}

Используем новый шаблон

В новых проектах всё уже настроено. Вам достаточно создать проект при помощи шаблона Blank Activity.

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

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

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


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

Корневым элементов разметки служит новый компонент 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. Вы можете установить собственное изображение, подходящее по контексту. На данный момент Гугл рекомендует отказываться от растровых изображений и активно использовать векторные изображения.

Заменим значок электронной почты на изображение лапы кота.

Переходим к программной части.

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

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

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

Объявим объект класса FloatingActionButton и напишем код для сообщения при щелчке.


FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

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

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


Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).show();

Сообщение появляется на несколько секунд с указанным текстом и исчезает через несколько секунд. Практически аналогичное поведение у старого Toast.

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

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

Метод dismiss()

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


private Snackbar mSnackbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mSnackbar = Snackbar.make(view, "Пора кормить кота!", Snackbar.LENGTH_INDEFINITE)
                    .setAction("Action", null);
            mSnackbar.show();
        }
    });

    Button dismissButton = (Button) findViewById(R.id.buttonDismiss);
    dismissButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mSnackbar.dismiss();
        }
    });
}

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

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


fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        mSnackbar = Snackbar.make(view, "Пора кормить кота!", Snackbar.LENGTH_INDEFINITE)
                .setAction("Action", null);

        View snackbarView = mSnackbar.getView();
        snackbarView.setBackgroundColor(Color.BLUE);
        mSnackbar.show();
    }
});

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


mSnackbar = Snackbar.make(view, "Пора кормить кота!", Snackbar.LENGTH_INDEFINITE)
        .setAction("Action", null);

View snackbarView = mSnackbar.getView();
snackbarView.setBackgroundColor(Color.BLUE);
TextView snackTextView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
snackTextView.setTextColor(Color.RED);
snackbar.show();

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

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

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


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    ...

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mSnackbar = Snackbar.make(view, "Покормил кота?", Snackbar.LENGTH_INDEFINITE)
                    .setAction("Да", snackbarOnClickListener);
            mSnackbar.show();
        }
    });
}

View.OnClickListener snackbarOnClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(), "Молодец!", Toast.LENGTH_LONG).show();
    }
};

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

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


Snackbar
        .make(parent, "Покормил кота?", Snackbar.LENGTH_LONG)
        .setAction("Да", snackOnClickListener)
        .setActionTextColor(Color.MAGENTA) // цвет текста у кнопки действия
        .show();

Переопределяем внешний вид стандартного значка меню в виде трёх точек по вертикальной линии

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


<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>

<!-- Стиль для замены значка меню в ActionBar. Установите 'android:actionOverflowButtonStyle' в AppTheme -->
<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@mipmap/ic_launcher</item>
</style>