منوهای نصب در پنل مدیریت

آموزش طراحی صفحه لاگین در اندروید

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

آماده کردن تصاویر و ریسورس های لازم

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

آیکن نام کاربری
لوگوی hetbo academy در طراحی صفحه لاگین در اندروید

یافتن آیکن متریال دیزاین

وبسایت های متعددی برای دریافت آیکن های متریال دیزاین وجود دارند که یکی از بهترین موارد موجود، وبسایت materialdesignicons می باشد.
در این پست توضیحات کاملی در مورد این سایت و نحوه استفاده از آن وجود دارد.

اضافه کردن فونت مناسب

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

ایجاد فولدر font در اندروید استودیو

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

آموزش طراحی صفحه لاگین در اندروید 1

ایجاد پس زمینه گرادیانت برای طراحی صفحه لاگین در اندروید

ابتدا باید گرادیانت مورد نظر خود را پیدا کنیم، سپس آن را در اندروید استودیو بسازیم و از آن استفاده کنیم. برای یافتن گرادیانت های مناسب نیز وبسایت های متعددی وجود دارد. یکی از این وبسایت ها webgradients می باشد. میتوانید با مراجعه به این سایت و پیدا کردن گرادیانت مورد نظر خود به اندروید استودیو بازگردید و از آن استفاده کنید. گرادیانت مورد استفاده ما، یک گرادیانت با استفاده از دو رنگ و از بالا به پایین می باشد. رنگ های مورد استفاده ما #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>
 
آموزش طراحی صفحه لاگین در اندروید 2

ایجاد پس‌زمینه نام کاربری و رمز عبور

همانطور که در تصویر ابتدای صفحه مشاهده کردید، برای بخش نام کاربری و رمز عبور نیز یک پس‌زمینه دلخواه طراحی کرده ایم. برای این کار مجددا مانند بخش قبل یک فایل جدید در فولدر drawable با نام text_bg ایحاد میکنیم و کد زیر را در آن قرار می دهیم
<?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>

ایجاد پس زمینه دکمه لاگین

دکمه لاگین نیز نیاز به یک پس زمینه اختصاصی اما خیلی ساده دارد. همانند مرحله قبل یک فایل جدید با نام button_bg ایجاد میکنیم و کد زیر را در آن قرار میدهیم.
<?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 مربوط به اکتیویتی لاگین یعنی login_activity.xml می رویم و کد زیر را با کد موجود جایگزین میکنیم.
<?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>
 

اگر تمام مراحل را به درستی طی کرده باشید با تصویر زیر رو به رو خواهید شد

آموزش طراحی صفحه لاگین در اندروید 3

با تشکر از شما برای دنبال کردن این آموزش.
برای دریافت آموزش های بیشتر می توانید اینستاگرام ما را دنبال کنید.

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

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hetbo.net 2016 - 2020