But beautiful in android

Creating a beautiful Button: Android

Oct 4, 2019 · 3 min read

Creating a custom Button from scratch.

This article will be a quick one, to demonstrate how can you create a Button in Android effectively. We’ll do it in a concise way so that lots of xmls are not spread across App. Lets start without wasting time.

Choosing Colors

Creating Gradients

We will create 2 gradients one for default and one for pressed state. Lets create one reverse of other.

Creating a Selector

This is where your press and default state will be defined.

Declare a style for button

Declaring in styles in such a way that even if we drag a button from component palette it must be our button. Next step is to declare button in layout and check our progress.

Try it!!

Possible result can be seen without running our application. We need some padding and button text to be white. Lets quickly update this in styles.

That’s great progress. Our Button is supported to most of the phones with API KitKat and above(As it was the lowest API selected when created project).

What about Ripple?

Ripples are modern requirement and adds more sugary effect on button feed back. So next we will go ahead and wrap our button with ripple and when prompted with error we will create one more button_selector for API v21 and above.

Lets first create a ripple color.

We have finally reached to our end state of designing button. This is the most affordable way to create a button where one have total control over it. Do you think it is too much to create a button? Well it is worth investing. Once a button like this is created and declared in style any developer when creating a layout will not have to worry about styling a button. And the button dragged and dropped in layout will be a branded one.

I told you there will be less XMLs. So once you have a good hands on and you have created couple of buttons, you may club together some xmls to create one file and rest is past.

Design, so that you design something new next time

Источник

Top 10 Practical Android App UI Design Examples for Inspiration

May 27, 2018 · 7 min read

How to make an elegant UI design for Android app? This article collected 10 practical Android app UI design examples that are very popular in people’s daily life.

A market study showed that the market gap between iOS and Android is growing. Android devices are becoming the leading actor in the mobile application market. Apple’s flat design style is very hot in recent years, but the Material Design-led Android app UI design is also worth to be noticed and studied by designers.

How to make an ele g ant UI design for Android app? There are a lot of resource and reference materials dispersed on the Internet. So here Mockplus collected 10 best Android app UI design examples that are very popular in people’s daily life.

1. Eye In Sky Weather

Be the same with Apple’s App Store, there are plenty of weather apps in the Google Play Store. Eye in SkyWeather stands out for its minimalist, holographic themes and the basic features of a weather app should be expected by users. This application includes the 14 best weather icon sets that you can add your own. Four widgets and one scalable notification are available, which is highly customizable. There is also a DashClock extension.

2. Snapseed

Snapseed is a comprehensive photo editing application from Google. In addition to the basic editing features provided by Instagram, I also appreciate this type of editing, making photo editing easier than ever. Many photo editing applications make this process cumbersome, but Snapseed keeps it simple and offers many options that can be easily adjusted.

Of course, you can change the lighting and add filters, but the ability to refocus the image and change the style of the film makes their toolbox unique. And finally, based on the saving, re-editing capabilities you’ve built in the past, make this app be my favorite photo editor.

3. YouTube

YouTube, the world’s largest video-sharing website, has been benefiting from their smart design since its founding in 2005. The same inspiration runs through today and you can see the easy-to-use services of mobile apps on iOS and Android.

Likewise, while YouTube is not a dedicated mobile application,but more than half of YouTube’s video is viewed on mobile devices. The need for such an application in 2017 is very clear. So it’s UI for Android and iOS app is the same important to some degree.

YouTube has done a great job keeping the design accessible and fresh, updating applications every two weeks and adapting the design to the changes they make to the platform. In fact, most users prefer the mobile version.

4. Pinterest

One of the newest contenders for the most beautiful Android app UI design is the social scrapbooking Pinterest. From a carefully implemented sign up process to a full-scale display of photos, Pinterest added enough detail to the user interface to keep the images and content at the center.

5. Trello

Trello is a project management and organization tool whose main job is what they call “the board of directors.” Each board can correspond to different tasks or responsibilities and needs to be completed. Simple and obvious design makes the work can be completed faster, and reduce the communication error between the parties.

Trello is a good example of user experience design because it does not have too many unnecessary functions. Everything on the home screen of the app is easy to understand and works exactly the way the app does, without any confusion about any task going from one board to another. Interface design is very intuitive, the first user of the application can easily browse different pages.

6. Slack

Slack is a team communication tool of all shapes and sizes. Whether you’re planning an event, working on a project, or just getting tired of e-mail, Slack is becoming one of the most widely used tools among professionals. The key to this success is their simple yet powerful design.

Although Slack is not a specialized mobile application, his user experience on mobile devices is no worse than on a computer. Everything you need is very clearly placed on the left drop-down menu, and the team feed is always updated in the main area of the app.

7. Duolingo

Duolingo is a language learning company that teaches users how to speak different languages through mini-games and short courses. Founded in 2009, the company has reached 100 million users and continues to grow, mainly due to the simplicity of their applications and the constant innovation of technology.

Anyone using Duolingo understands the simplicity of the application. By completing a mission or game you can go to more advanced categories. It is also a great idea to combine the addictiveness of mobile gaming applications and use it to learn new languages, on the basis of which the user experience is also one of the factors that appeals to the user.

8. Wickr

Wickr is as easy as many effective mobile application UI designs. It perfectly handles the safety message while maintaining its basic black and white design. Whether the user is out of business or personal choice, are safe ways to send encrypted messages. It has group messaging capabilities, as well as one-to-one communication. The sender of the message can control how long a message, image or video can be viewed. Messages like Snapchat can only show 1–10 seconds, and over time it will digitally fragments the deleted message.

9. Hipmunk

Hipmunk is the quickest and easiest way to plan your trip. This app will save you time by comparing all top travel sites, including reminding you of where you want to travel, viewing reviews of other passengers, booking flights, searching for hotel rooms for the closest destination you want Wait.

The design aspect I really like about it is that it can tailor your view to your needs, such as city-based card layouts, or the best time for a budget hotel. This is a truly customizable application for booking travel arrangements.

10. PEAR Sports

PEAR is a personalized fitness app that puts thousands of workout and personal trainers right in your palm. This app surprised me because it exercises your health data in real time to suit your specific needs. It requires some exercise, such as running, cycling and weight training, and based on which one you choose to provide encouraging sound. It syncs with all the major fitness trackers and applications to keep all exercise data easy to manage.

Most importantly, you can turn the phone on or off as you wish. If you are doing yoga or something that requires both hands, your coach can guide you purely through audio. For example, if you run on a treadmill, it provides useful heart rate graphics, burning calories, and overall progress. Overall, this is a very useful application, considering personal fitness, as well as its customizable features and design

More Android App UI Design Resources

Developer.android

As Android developers, you can refer to Google’s Android Design specifications, the official for how to make Android App UI design has always had a lot of guidance and suggestions.

Android UI on Github

Github’s UI Design section gathers lots of design-related material and great design sites. Not only limited to Android application interface design.

Video Tutorial for Android App UI Design

How to Design Android UI/GUIs in Android Studio

This video explains to Eclipse users how to create a graphical user interface for your application using Android Studio. The video is long (nearly an hour), but the process is logically easy.

Android UI Tutorial: Layouts and Animations

One of the best tutorials for Android UI layout and animation. It teaches you how to use Android Studio to create different layouts (frame layout, linear layout, relative layout and grid layout), views (TextView, ListView, ImageView, GridView, RecyclerView) and actions (Attribute Animation, Drawable Animation). This tutorial is for beginners and advanced designers and is available on GitHub.

Источник

Темы и стили в Android-приложениях

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

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

О чем пойдет речь:

Начнем с основ

По своей структуре темы и стили имеют общее строение:

Для создания используется тег style . У каждого cтиля есть имя и он хранит в себе параметры key-value .

Все достаточно просто. Но в чем же разница между темой и стилем?

Единственное отличие заключается в том, как мы их используем.

Тема — это набор параметров, которые применяются ко всему приложению, Activity или View-компоненту. Она содержит базовые цвета приложения, стили для отрисовки всех компонентов приложения и различные настройки.

В теме переопределены основные цвета приложения ( colorPrimary , colorSecondary ), стиль для текста ( textAppearanceHeadline1 ) и некоторых стандартных компонентов приложения, а также параметр для прозрачного статус-бара.

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

Стиль

Стиль — это набор параметров для стилизации одного View-компонента.

Атрибут

Атрибутом принято называть ключ стиля или темы. Это маленькие кирпичики из которых все строится:

Все эти ключи являются стандартными атрибутами.

Мы можем создавать свои атрибуты:

Атрибут myFavoriteColor будет указывать на цвет или ссылку на ресурс цвета.

В формате мы можем указать вполне стандартные значения:

По своей природе атрибут является интерфейсом. Его необходимо реализовать в теме:

Теперь мы можем на него ссылаться. Общая структура обращения выглядит так:

Ну и, наконец, давайте поменяем, например, цвет текста у поля:

Благодаря атрибутам мы можем добавлять какие-угодно абстракции, которые будут изменяться внутри темы.

Наследование тем и стилей

Как и в ООП, мы можем перенимать функционал существующей реализации. Сделать это можно двумя способами:

При явном наследовании мы указываем родителя с помощью ключевого слова parent :

При неявном наследовании мы используем dot-notation для указания родителя:

Никакой разницы в работе этих подходов нет.

Очень часто мы можем встретить подобные стили:

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

То есть будет создан стиль с именем Widget.MyApp.Snackbar , который является наследником Widget.MaterialComponents.Snackbar .

ThemeOverlay

ThemeOverlay — это специальные «легковесные» темы, которые позволяют переопределить атрибуты основной темы для View-компонента.

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

С основной темой поле ввода выглядит так:

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

Окей, как мы можем решить такую задачу?

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

Написать свою вьюшку по гайдлайнам и с кастомными параметрами?

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

Переопределить основной цвет в теме?

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

Правильное решение — это использовать ThemeOverlay.

Создаем ThemeOverlay и переопределяем основной цвет темы:

Далее указываем его с помощью специального тега android:theme в наш TextInputLayout :

Все работает так, как нам и нужно.

Конечно же возникает вопрос — как это работает под капотом?

Эту магию позволяет провернуть ContextThemeWrapper . При создании View в LayoutInflater будет создан контекст, где за основу будет взята текущая тема и в ней будут переопределены параметры, которые мы указали в нашей Overlay теме.

Аналогичным образом мы можем самостоятельно переопределить любой параметр темы в приложении.

Последовательность применения тем и стилей ко View-компоненту

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

Следующий приоритет имеет стиль View:

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

Если параметры не были найдены, то используются атрибуты темы:

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

Да прибудет с нами Material Components

Material Сomponents была представлена на Google I/O 2018 и является заменой Design Support Library.

Библиотека дает нам возможность использовать обновленные компоненты из Material Design 2.0. Кроме того, в ней появилось множество интересных настроек по кастомизации. Все это позволяет писать яркие и уникальные приложения.

Вот некоторые примеры приложений в новом стиле: Owl, Reply, Crane.

Перейдем к практике

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

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

Подробнее с новыми атрибутами можно познакомиться на material.io.

Если по каким-то причинам вы сейчас не можете переключиться на новую тему, то вам подойдут Bridge темы. Они наследуются от AppCompat тем и имеют все новые атрибуты Material Components. Нужно всего лишь добавить постфикс Bridge и использовать все возможности без опасений:

А вот и наша тема:

Важно понимать, что когда вы переопределяете стиль в теме, он применится ко всем View этого типа в приложении (Activity).

Если же вы хотите применить стиль только к одной конкретной View, то нужно использовать тег style в файле с разметкой:

Одно из нововведений, которое меня действительно впечатлило — это ShapeAppearance. Оно позволяет изменять форму компонентов прямо в теме!

Каждый View-компонент относится к определенной группе:

shapeAppearanceSmallComponent

shapeAppearanceMediumComponent

shapeAppearanceLargeComponent

Как мы можем понять из названия, в группах вьюшки разных размеров.

Проверим на практике:

Мы создали Widget.MyApp.SmallShapeAppearance для «маленьких» компонентов. Закруглили верхний левый угол на 20dp и правый нижний угол срезали на 15dp .

Получили такой результат:

Выглядит интересно. Будет ли это работать в реальной жизни? Время покажет.

Как и для стилей, мы можем применить ShapeAppearance только для одного View-компонента.

Что там по темной теме?

Совсем скоро состоится релиз Android Q, а вместе с ним к нам придет и официальная темная тема.

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

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

Разрешаем перекрашивать приложение (по умолчанию запрещено):

Атрибут android:forceDarkAllowed доступен с API 29 (Android Q).

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

Согласитесь, что для одной строчки кода выглядит очень круто.

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

Уверен, что потратив не так много времени, можно решить основные проблемы. Например, отключив автоматический темный режим для отдельных вьюшек (да, так тоже можно — android:forceDarkAllowed доступен для View в файле-разметке).

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

Рекомендации по работе можно почитать в документации и на material.io.

А если мы хотим все делать самостоятельно?

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

В API 8 (Froyo) был добавлен квалификатор -night , который и по сей день используется для применения темной темы. Он позволяет автоматически применять нужную тему в зависимости от времени суток.

В темах DayNight уже используется такая реализация, нам достаточно отнаследоваться от них.

Давайте попробуем написать свою:

Нам теперь на каждую версию API делать тему со всеми параметрами? Нет, конечно! Мы сделаем базовую тему, где будут определены базовые атрибуты, доступные для всех версий API и отнаследуемся от нее в нужной версии API:

9. Тема, стиль или… ?

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

10. Использовать TextAppearance

Хорошим тоном будет расширить основные стили для текста и везде их использовать.

Много полезной информации можно найти на сайте Material Design: Typography, Typography Theming.

Заключение

В заключение хочется сказать, что стилизация приложения — это обязанность не только разработчиков, но и дизайнеров. Только благодаря тесному взаимодействию мы сможем получить по-настоящему хороший и красивый продукт. Дизайнеры должны иметь представления о платформе и возможностях Material Components. Ведь именно на их плечи ложится ответственность по поддержке визуальной составляющей приложения. Дизайнерам доступен специальный плагин для Sketch — Material Theme Editor. В нем очень просто выбирать цвета для приложения и строить экраны на основе стандартных компонентов. Если ваши дизайнеры еще не знают о нем, то обязательно расскажите им.

Начать изучать Material Components можно с репозитория на GitHub — Modular and customizable Material Design UI components for Android. В нем собрано очень много информации по стандартным стилям и их возможностям. Кроме того, там есть приложение — sample, чтобы все сразу попробовать на практике.

Источник