
در این آموزش قصد داریم به طراحی صفحه لاگین در اندروید استودیو شبیه به تصویر بالا بپردازیم. بنابراین یک پروژه جدید در اندروید استودیو ساخته و یک اکتیویتی جدید در آن ایجاد میکنیم.
آماده کردن تصاویر و ریسورس های لازم
در اولین قدم باید تصاویر و آیکن های لازم را آماده کنیم.
برای این کار باید لوگوی مورد نظر خود را مانند بالا یا به هر شکلی که مد نظرمان بود با کمک نرم افزار های طراحی مانند فتوشاپ و ایلستریتور آماده کرده و خروجی png از آن گرفته و آن را در فولدر drawable در اندروید استودیو کپی کنیم.
دو آیکن برای نام کاربری و پسورد نیز نیاز داریم که پس از دریافت و آماده کردن، آنها را نیز در فولدر drawable کپی میکنیم


یافتن آیکن متریال دیزاین
وبسایت های متعددی برای دریافت آیکن های متریال دیزاین وجود دارند که یکی از بهترین موارد موجود، وبسایت materialdesignicons می باشد.
در این پست توضیحات کاملی در مورد این سایت و نحوه استفاده از آن وجود دارد.
اضافه کردن فونت مناسب
برای اضافه کردن فونت به برنامه ابتدا فونت مورد نظر خود را با فرمت ttf آماده میکنیم.
وارد اندروید استودیو می شویم. با راست کلیک روی فولدر res و مسیر new -> android resource directory را طی میکنیم. در پنجره باز شده در قسمت resource type گزینه font را انتخاب میکنیم

پس از ایجاد فولدر font کافیست فونت مورد نظر خود را در این فولدر کپی کنیم.

ایجاد پس زمینه گرادیانت برای طراحی صفحه لاگین در اندروید
#f77062
و #fe5196
می باشند.
برای ایجاد گرادیانت در اندروید، روی فولدر drawable رات کلیک میکنیم و از مسیر new -> drawable resourse file یک فایل جدید با نام gradient_bg می سازیم.
حال کد زیر را با کد داخل فایل ایجاد شده جایگزین میکنیم.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#f77062" android:endColor="#fe5196" /> </shape>

ایجاد پسزمینه نام کاربری و رمز عبور
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="25dp"/> <solid android:color="#5fff"/> <stroke android:color="#afff" android:width="1dp" /> </shape>
ایجاد پس زمینه دکمه لاگین
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="25dp"/> <solid android:color="#fff"/> </shape>
تکمیل طراحی صفحه لاگین در اندروید
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".LoginActivity" android:background="@drawable/gradient_bg"> <androidx.appcompat.widget.AppCompatImageView android:id="@+id/logo" android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="80dp" android:src="@drawable/logo" android:adjustViewBounds="true" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/logo_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hetbo Academy" android:textColor="#fff" app:fontFamily="@font/myfont" android:textSize="30sp" app:layout_constraintTop_toBottomOf="@id/logo" android:gravity="center" android:layout_marginTop="50dp"/> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/logo_subtitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="مرجع آموزش برنامه نویسی اندروید" android:textColor="#fff" app:fontFamily="@font/myfont" android:textSize="20sp" app:layout_constraintTop_toBottomOf="@id/logo_title" android:gravity="center"/> <androidx.appcompat.widget.AppCompatEditText android:id="@+id/username" android:layout_width="300dp" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/logo_subtitle" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="50dp" android:drawableEnd="@drawable/user2" android:background="@drawable/text_bg" android:hint="نام کاربری" android:fontFamily="@font/myfont" android:textColorHint="#fff" android:gravity="center" /> <androidx.appcompat.widget.AppCompatEditText android:id="@+id/password" android:layout_width="300dp" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/username" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="20dp" android:drawableEnd="@drawable/password" android:background="@drawable/text_bg" android:hint="رمز عبور" android:gravity="center" android:fontFamily="@font/myfont" android:textColorHint="#fff" /> <androidx.appcompat.widget.AppCompatButton android:id="@+id/login" android:layout_width="300dp" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/password" android:layout_marginTop="40dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:text="ورود" android:fontFamily="@font/myfont" android:textColor="#F06292" android:background="@drawable/button_bg" android:textSize="18sp"/> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/signup" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/login" android:text="حساب کاربری ندارید؟ ایجاد حساب" android:textColor="#fff" android:gravity="center" android:layout_marginTop="10dp" android:fontFamily="@font/myfont" /> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/forget" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="فراموشی رمز عبور" android:textColor="#fff" android:gravity="center" android:fontFamily="@font/myfont" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="20dp" /> </androidx.constraintlayout.widget.ConstraintLayout>
اگر تمام مراحل را به درستی طی کرده باشید با تصویر زیر رو به رو خواهید شد

با تشکر از شما برای دنبال کردن این آموزش.
برای دریافت آموزش های بیشتر می توانید اینستاگرام ما را دنبال کنید.
1 پاسخ به "آموزش طراحی صفحه لاگین در اندروید"