ابي افكار حلو للتصميم لغة xml للتطبيق الاندرويد

لقد بحثت لك عن تصميم جميل في أحد المواقع الرابط .

يحوي على تصميم واجهة لتسجيل الدخول تحوي عدة حقول مع صورة خلفية وألوان جميلة (الصورة ضمن المرفقات*).

(يحوي الرابط على الكود المصدري  الذي يجب عليك تضمينه في مشروعك و إضافة جميع الملفات و الأوامر البرمجية 

.. dependencies, activity, colors , styles).

لدينا اول قسم من التطبيق و هو ال main activity و الممثلة بملف ال xml التالي activity_main.xml:

سأضع الشروحات في تعليقات بجبانب الكود المرفق ..

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.appsnipp.formdesigns.MainActivity">MainActivity  الربط مع  ال
 
    <android.support.design.widget.AppBarLayout  // تصميم شريط العنوان أعلى شاشة التطبيق
        android:id="@+id/app_bar"  // المعرف الخاص بشريط العنوان
        android:layout_width="match_parent"      // جعل العرض يطابق الأب 
        android:layout_height="@dimen/form_app_bar_height" // الارتفاع هو قيمة من ملف اخر 
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay"  // الثيمة التي يتبعها التصميم 
        android:background="@drawable/centre_background">  // drawable صورة الخلفية من ملف 
 
        <android.support.design.widget.CollapsingToolbarLayout // شريط عنوان قابل لتغيير الحجم
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"// colors.xml جلب قيمة اللون من ملف 
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/centre_background">
 
                <ImageView //  المكان الذي سنعرض فيه الخلفية _صورةالشاب و الفتاة
                    android:layout_width="wrap_content"   //  كل القيم التالية لضبط الحجم و المحاذاة
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentBottom="true"
                    android:layout_marginTop="10dp"    // الهوامش من الاعلى اي فراغ عن الحافة العليا
                    android:adjustViewBounds="true"    // مراعاة حروف الشاشة المدورة
                    android:cropToPadding="true"       // قص الحواف الزائدة
                    android:src="@drawable/enquiry_bk" />  // مصدر ملف الصورة
 
            </RelativeLayout>
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"  // actionBarSize جلب القيمة من المتحول 
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" /> // تضمين تصميم 
 
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
 
    <include layout="@layout/content_main" />   //   تضمين التصميم الخاص بفورم التسجيل
 
</android.support.design.widget.CoordinatorLayout>

ذلك التصميم هو حاوية تحوي على الفورم الخاص بالتسجيل و الذي يمثل ب content_main عن طريق التعليمة في اخر الملف السابق <include layout="@layout/content_main" />

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:id="@+id/scrollFeed"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.appsnipp.formdesigns.MainActivity"
    tools:showIn="@layout/activity_main"
    android:background="@drawable/centre_background"
    android:focusableInTouchMode="true">

    <android.support.v7.widget.CardView // كارت يحوي على العناصر الأخرى
        android:id="@+id/personalDetailsCard" // المعرف الخاص بالكارت 
        style="@style/centreLocatorCardDesign" // التصميم 
        android:layout_marginTop="10dp"  // هوامش من الأعلى
        app:cardCornerRadius="16dp"
        app:cardElevation="10dp">

        <LinearLayout      // تصميم يحوي على عدة عناصر بتنسيق خطي متتالي
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center" // محاذاة للوسط 
            android:focusableInTouchMode="false"
            android:orientation="vertical"  // شعاع التوجيه عمودي ليعرض الأبناء فوق بعضهم البعض
            android:padding="20dp"> // هوامش داخيلية لتباعد الأبناء عن الحافة الخارجية للكارت

            <android.support.design.widget.TextInputLayout // العنصر الذي نكتب به الاسم  اي حقل الادخال
                android:id="@+id/txtInputName" // المعرف الخاص بحقل ادخال الاسم
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/txtName"  // المعرف الخاص بحقل ادخال الاسم
                    style="@style/modifiedEditText" // تصميم مسبق
                    android:hint="@string/name" // نص افتراضي مساعد
                    android:singleLine="true" />

            </android.support.design.widget.TextInputLayout>

			// الحقل التالي مثل السابق لكن خاص بادخال حقل الايميل (البريد الالكتروني)
            <android.support.design.widget.TextInputLayout
                android:id="@+id/txtInputEmail"  // المعرف الخاص بحقل ادخال البريد
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/txtEmail"  // المعرف الخاص بحقل ادخال الاسم
                    style="@style/modifiedEditText"
                    android:ems="10"
                    android:hint="@string/email"   // نص افتراضي مساعد
                    android:inputType="textEmailAddress" />

            </android.support.design.widget.TextInputLayout>

			// حقل الادخال المخصص لرقم الجوال
            <android.support.design.widget.TextInputLayout
                android:id="@+id/txtInputMob"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/txtMob"
                    style="@style/modifiedEditText"
                    android:hint="@string/mobno"
                    android:inputType="phone" />
            </android.support.design.widget.TextInputLayout>


            <android.support.design.widget.TextInputLayout
                android:id="@+id/txtInputReg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/txtReg"
                    style="@style/modifiedEditText"
                    android:hint="@string/reg_no" />

            </android.support.design.widget.TextInputLayout>

			// ادخال نص كتوصيف للدعم الفني
            <android.support.design.widget.TextInputLayout
                android:id="@+id/txtInputFeedback"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/txtFeed"
                    style="@style/modifiedEditText"
                    android:hint="@string/message"
                    android:inputType="textMultiLine"
                    android:minLines="2" />

            </android.support.design.widget.TextInputLayout>

			// الزر المسئول عن ارسال الفورمة
            <Button
                android:id="@+id/btnSend"   // المعرف الخاص بحقل ادخال الاسم
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:background="@drawable/centre_button"
                android:text="@string/send" // النص الذي يظهر على الزر
                android:textColor="@color/whiteTextColor" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>

XML تقويم بتوصيف البنية للتصميم على شكل بنية شجرية اي كل عنصر يمكن أن يحتوي على عناصر أخرى 

و يمكن أن يرث (يكسب صفات) الأب مثل خاصية الطول و العرض و التصميم و الألوان ..

الملف المسؤول عن قيم الألوان التي نستخدمها بالتطبيق

<!--colors for modern ui-->
    <color name="whiteTextColor">#fff</color>
    <color name="primaryTextColor">#00a5ff</color>

مثال لجلب قيمة لونية محددة : color/whiteTextColor@

أرفقت بنية لمشروع أندرويد يحوي على الهرمية و مواضع وضع الملفات ..

قم بتجربة هذا التصميم و أخبرنا بالنتائج و سوف نجيب على أي أسئلة إضافية.

تحياتي

يوجد مواقع توفر تصاميم جميلة و مميزة يمكنك الاستغفادة منها:

تصاميم أندرويد

عمل مؤثرات بصرية جميلة

و أنصحك بالاطلاع على مكتبة التصميمات الشهيرة Material design الخاصة ب غوغل لتصميم الأندرويد

Material Design