سورس متریال دیزاین profile UI برای اندروید

Ui یکی از موثر ترین عناصر در جذب کاربران به اپلیکیشن شماست.

ما Ui های زیادی توی سایت هایی از جمله uplabs میبینم اما طراحی اونها ممکنه کمی مشکل به نظر بیاد و اکثرشون هم با چندین کتابخانه نمای نهایی رو ایجاد کردند.

اما میتونیم با کمی خلاقیت و استفاده از ابزار های مناسب از جمله constraint layout که کار طراحی رو در حد نقاشی کشیدن راحت کرده , طرح های جالبی پیاده کنیم.

سورس کد متریال دیزاین profile UI برای اندروید

در ادامه طرح لایه پروفایل که یکی از پرکاربرد ترین Ui ها هست رو با هم طراحی میکنیم همچنین میتونید برای دریافت سورس پروژه همچنین اپ apk پروژه به کانال تلگرام ما مراجعه کنید 🙂
خب یه پروژه رو داخل اندروید استودیو ایجاد کنید پروژه میتونه از نوع Blank Activity باشه چون ما فقط با فایل xml کار داریم!
مستقیم میریم سراغ فایل xml پروژه و مرحله به مرحله طرح رو پیاده میکنیم

(برای راحتی و سرعت بیشتر میتونید قبل از پیاده سازی طرح داخل اندروید استودیو ,اول طرح رو روی کاغذ پیاده کنید تا بدونید دنبال چی هستید و سردرگم نشید!)
ابتدا قسمت بالایی یا به اصطلاح head لایه رو پیاده میکنیم

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


    <android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/backImage"
            android:layout_width="0dp"
            android:layout_height="50dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@color/colorPrimary" />

        <ImageButton
            android:id="@+id/more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            android:background="@null"
            app:layout_constraintRight_toRightOf="@+id/backImage"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_more" />
    </android.support.constraint.ConstraintLayout>

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="parent">

         
    </ScrollView>

    <ImageView
        android:id="@+id/userImage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/circle_border"
        android:padding="15sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_user"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1" />

</android.support.constraint.ConstraintLayout>

حالا نتیجه ای مشابه تصویر زیر رو داریم

profileui1

این قسمت از لایه ثابت هست و طی scroll شدن حرکت نمیکنند حالا میریم سراغ قسمت اطلاعات کاربر که هرکدوم رو داخل یک CardView نمایش خواهیم داد.

توجه کنید که این کد هارو باید داخل تگ <ScrollView> که داخل کدهای بالا بود قرار بدیم چون این قسمت رو نیاز دارم که حرکت کنه

<LinearLayout>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/profile_layout"
    android:orientation="vertical">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="match_parent"
        android:layout_height="145dp"
        android:background="@drawable/shadow"
        android:layout_marginLeft="15sp"
        android:layout_marginRight="15sp"
        android:layout_marginBottom="15sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1">


        <TextView
            android:id="@+id/voteCount"
            android:layout_width="118dp"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/messageCount"
            app:layout_constraintLeft_toRightOf="@+id/messageCount"
            app:layout_constraintRight_toRightOf="parent" />

        <ImageView
            android:id="@+id/voteImage"
            android:layout_width="118dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="11dp"
            app:layout_constraintLeft_toRightOf="@+id/messageImage"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/voteCount"
            app:srcCompat="@drawable/ic_vote" />

        <TextView
            android:id="@+id/messageCount"
            android:layout_width="117dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="67dp"
            android:gravity="center_horizontal"
            android:text="12"
            app:layout_constraintLeft_toRightOf="@+id/alertCount"
            app:layout_constraintRight_toLeftOf="@+id/voteCount"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/alertImage"
            android:layout_width="117dp"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/messageImage"
            app:layout_constraintTop_toTopOf="@+id/messageImage"
            app:srcCompat="@drawable/ic_alert" />

        <TextView
            android:id="@+id/alertCount"
            android:layout_width="117dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="67dp"
            android:gravity="center_horizontal"
            android:text="11"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/messageCount"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/messageImage"
            android:layout_width="117dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@+id/alertImage"
            app:layout_constraintRight_toLeftOf="@+id/voteImage"
            app:layout_constraintTop_toTopOf="@+id/voteImage"
            app:srcCompat="@drawable/ic_question_answer" />


    </android.support.constraint.ConstraintLayout>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="15sp"
        android:layout_marginRight="15sp">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/name"
                android:layout_width="21dp"
                android:layout_height="23dp"
                android:layout_marginEnd="7dp"
                android:layout_marginRight="7dp"
                android:layout_marginTop="8dp"
                android:gravity="center_vertical"
                android:text="@string/name"
                android:textColor="@android:color/background_dark"
                android:textSize="18sp"
                app:layout_constraintRight_toLeftOf="@+id/infoImage"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/infoImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_info" />

            <TextView
                android:id="@+id/nameText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:text="@string/nameText"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/name" />

            <TextView
                android:id="@+id/familyText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:text="@string/familyText"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/family"
                app:layout_constraintVertical_bias="1.0" />

            <ImageView
                android:id="@+id/infoImage2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="10dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/nameText"
                app:srcCompat="@drawable/ic_info" />

            <TextView
                android:id="@+id/family"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="7dp"
                android:layout_marginRight="7dp"
                android:layout_marginTop="16dp"
                android:gravity="center_vertical"
                android:text="@string/family"
                android:textColor="@android:color/background_dark"
                android:textSize="18sp"
                app:layout_constraintRight_toLeftOf="@+id/infoImage2"
                app:layout_constraintTop_toBottomOf="@+id/nameText" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="15sp">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <TextView
                android:id="@+id/mobile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="10dp"
                android:gravity="center_vertical"
                android:text="@string/mobile"
                android:textColor="@android:color/background_dark"
                android:textSize="18sp"
                app:layout_constraintRight_toLeftOf="@+id/mobileImage"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/mobileText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:text="@string/mobileNum"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/mobile" />

            <ImageView
                android:id="@+id/mobileImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_phone" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="15sp">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <TextView
                android:id="@+id/bio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="10dp"
                android:gravity="center_vertical"
                android:text="@string/bio"
                android:textColor="@android:color/background_dark"
                android:textSize="18sp"
                app:layout_constraintRight_toLeftOf="@+id/bioImage"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/bioText"
                android:layout_width="fill_parent"
                android:layout_height="290dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="50dp"
                android:layout_marginTop="8dp"
                android:gravity="right"
                android:text="@string/bioText"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/bio"
                app:layout_constraintVertical_bias="0.0"
                tools:layout_editor_absoluteX="22dp"
                tools:layout_editor_absoluteY="42dp" />

            <ImageView
                android:id="@+id/bioImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_info" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>


</LinearLayout>

حالا UI ما تکمیل شد و به شکل زیر درخواهد اومد

برای دانلود سورس کد و فایل apk پروژه همچنین انواع آموزش های کاربردی به کانال تلگرام ما بپیوندید.

profileui2