Material Design (OnBoarding), и сказ о том, как я обмен прошляпил.

Привет, человеки!


Очень давно ничего не писал по тематике MD (да и вообще в целом), виной тому очень печальный график, по которому пришлось работать, ну и чаще читаю ленту чем пишу в ней что то.


Сегодня речь пойдет про создание splash screen в стиле MD в приложении Gift Exchange для Pikabu, которое я не успел подготовить, @Kpoxaru уже все провернула (и я записался в последний момент), поэтому покажу то, что успел сделать.


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

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

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

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

Пример того, как выглядит анимация:

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

Следующим шагом будет посещение страницы чувака с ником saulmm (ссылка в конце), смотрим его пример, изучаем, берем нужный код из активности:

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

Я изменил некоторые параметры в коде (некоторые из них используются только для версии JELLY_BEAN, некоторые можно упростить), а именно:


- Убираем выставление стиля в коде


- Выставляем принудительно портретную ориентацию setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);


- Убираем Toolbar через requestWindowFeature(Window.FEATURE_NO_TITLE);


- И добил это дело стилем, который указывается в манифете, где жестко прописал цвет статус бара (для android 5 и выше, и указал, что я точно не хочу видеть toolbar).


Наверное я параноик, раз сделал это дважды.

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

Теперь нам нужна иконка. Посещаем бесплатный ресурс со стоковой графикой, находим более менее симпатичную иконку с тематикой НГ (ссылка в конце):

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

Изображение у нас векторное, засовываем его в люстру (Adobe Illustrator), обрезаем под размер иконки для ведроид (512х512), получаем следующее:

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

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

Material Design (OnBoarding), и сказ о том, как я обмен прошляпил. Новогодний обмен, Тайный Санта, Android, Материальный дизайн, Программирование, Гифка, Длиннопост

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


Анимация красиво воспроизводится, кнопочки тыкаются.


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


https://github.com/saulmm - гитхаб чувака

http://www.freepik.com/free-vector/christmas-color-icon-set_818976.htm#term=happy new year icon&page=1&position=23 - иконки

Android Developers

86 постов2K подписчиков

Добавить пост

Правила сообщества

Друзья!


Давайте адекватно относиться к тематике сообщества. Посты, не удовлетворяющие требованиям канала, будут отклоняться. Разработка под Android - это не только описание того, что надо сделать

(освоить Java / покормить кота / установить студию), но и реальные примеры того, что Вы описываете.

2
Автор поста оценил этот комментарий
Погоди, тут твой код есть или все копипаста?
раскрыть ветку