Уроки Андроид программирования | #8 — Красивый дизайн приложения

Автор Ivan Samoilov
Уроки Андроид программирования | #8 — Красивый дизайн приложения

Привет.

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

АйТи прогер..

Здесь вы найдете домашнее задание готовые кот и много другой полезной информации ссылка на этот урок в описании к видео я создал пустой проект в нём абсолютно ничего нету — это пустая страничка. Я даже удалил текстовое поле. — это самое, что ни на есть пустая который мы с вами создавали ещё в первых видео уроках. Тут ничего сложного нету теперь я тебе прежде чем мы приступим к дальнейшим этапом. Я хотел бы показать вам одну интересную вещь. Например можно изменить тему нашего приложения. Примерно сейчас тема приложения заключается в том, что у нас есть некая некий actionbar вот вверху и внизу ещё вот есть такие кнопочки на которые например видны можно нажать на. МТС и здесь её поменять и здесь очень много действительно очень много сами можете попробовать различные темы посмотреть, что они из себя представляют я же просто выберу например зайду было. Это просто всё по категориям разбито вот. Для более удобного и выберу на actionbar тему материал лайкнул actionbar. Таким образом у нас удалиться в actionbar мы дополнительно можем здесь ещё подставить например новый actionbar — это вот например и, тогда у нас вообще удаляется все элементы например — это для меня. Мне кажется уже перебор поэтому я просто оставлю на actionbar вот такую штучку. Кроме того еще одна полезная вещь которую я ранее забыл сказать — это то, что мы можем поменять тему на Android Android Studio вообще всю её тему — это очень. Удобная штучка и давайте я даже её не примет. например тему мы поставим как darcula она намного удобнее. Например если вы работаете вечером или она действительно намного красивее и удобнее поэтому я например сейчас буду в день работать в дальнейшем наверное тоже в ней буду работать теперь давайте поменяем задний фон нашего приложения к примеру сейчас он белый, что не совсем прям. Круто И мы. Давайте поменяем на некитакой темноватый цвет для этого мы зайдём CS Source в эту папочку здесь. Блюз Colors not то есть сюда мы её откроем и здесь у нас есть не хотим для нашего приложения. То есть например Color primary Dark — это цвет просто поменяем все эти цвета вы можете найти прямиком например Google если просто. Напишите colorpicker воздействие как подбирать какие только вам вздумается вот здесь вот — это всё копировать непосредственно пример и сюда вставлять. Ну то есть место того, что у вас было. Например у вас уже будет здесь зелёный. Какой цвет. Я же уже их просто выписала и поэтому я их просто сюда пишу то есть 35-3. Е4 А вот такой цвет достаточно темноватые такое синеватый цвет очень прикольно теперь мы зайдём Activity Main то есть вот — это вот наши основную страничку здесь есть графического дизайнера перейдём к тексту и напишу тебе ещё Android дальше двоеточие background Color Color primary Dark соответственно сразу же у нас он поменялся теперь нам необходимо добавить называемый layout. То есть у вильярреал и причём он бывает горизонтальным и бывает вертикали пример в моём случае необходимо вертикально потому, что я хочу чтобы элемент находились друг подружками просто были в таком состоянии. Да поэтому его сюда перекидываю нас создал. Вот такая вот область которую мы можем в свою очередь просто ещё что-либо по закидывать к примеру. Мы сюда закинем e-mail то есть — это у нас приложение для входа в для авторизации. Вот соответственно должно быть поле e-mail должно быть поле пароль, а также должна быть кнопка по которой мы будем выходить например на сайт до соответствуют элементам ещё и добавили далее мы добавим сюда ещё картинку поэтому здесь найдём такую штучку как Image View. Вот и перетягивания в самый верх. Кроме того он конечно же спросит нас про картинку которую я ещё сюда не поместил не поместил поэтому мы поместим вот — это вот картинку я её просто копирую. Ну то есть получается скопировать вот я сюда я её заставляю. То есть я тут вот ну и соответственно логин бензином всё — это подходит дальше иначе где мы как раз уже теперь туда добавляем и вот у нас логин картинка здесь есть картинку можно откуда угодно взять. Я просто для примера взял картинку и дополнительно последние, что мы сделаем — это добавим ещё сюда не ти текст какой-то текст. Теперь когда все элементы присутствуют на страничке мы займемся её оформление для этого мы. Для начала зайдем в текстовый редактор потому, что на примере если мы хотим какие зимние добавить к нашей картинки там и заметил, что здесь не особо-то и много этих есть свойств которые можно добавить тем не менее быть текстовом редакторе мы можем тут добавлять очень много войск. Значит первое свойство которое я бы хотел добавить — это так называемый отступ сверху, а также снизу поэтому мы пишем Android дальше указываем этим бортом и укажи, что он будет например 40sp вот примеру так как же мы укажем чтобы был у нас Android padding Top и он у нас будет пускай пускай даже вот так вот будет если 70 пикселей будем — это так называть вот таким образом наши картинках более-менее. Неплохо выглядите и я думаю мы так всё — это и оставим теперь по поводу текста. Вот с текстом тут уже многое настройка соответственно мы туда их по добавлять. Например у него будет Swift. Пускай 25 он будет находиться по центру соответственно выставляем его по центру. Также для него устроим, что цвет его будет не то установил свет его будет белым, а соответственно сейчас прогрузится я всегда пишу White White. О'кей Вот его у него теперь белый цвет font-family мы установим как например monospace. Ну так вот такой теперь будешь здесь шрифт и напишем здесь следующее авторизация авторизация. О'кей Да и всё-таки чуть-чуть поменяем цвет на примерно. Никита Артур. Грей премьеру. После такой у нас будет я думаю так намного будет лучше выглядеть сети текст.

0 комментариев
0

Читайте также