در فصل قبل شکل کلی فرم مورد نظر را ساختیم. الان نوبت قسمت اصلی یا همان فرم صفحه است…

شکل کلی صفحه ما شبیه عکس زیر است. تا اینجا Header یا سربرگ که عکس لوگوی ما در آن قرار گرفته است و Footer یا ته برگ که دو دکمه License و Guest در آن قرار گرفته است را ساخته ایم:

حالا می رویم سراغ فرم اصلی صفحه!

ابتدا یک EditText برای نام کاربری (Username) به صفحه اضافه می کنیم:

حالا به پنجره Properties بروید و در قسمت Hint عبارت Username را بنویسید.

نکته: Hint یا اشاره، متنی است که با رنگ خاکستری در EditText نمایش داده می شود و وقتی کاربری وارد EditText می شود از بین می رود. در واقع همانطور که از اسمش معلوم است، به محتوایی که که کاربر قرار است در آن وارد کند «اشاره» می کند.

حالا همین فرایند را مجدداً تکرار کنید. یک EditText از نوع password با «اشاره» Password به فرم اضافه کنید:

حالا می خواهیم دو دکمه Sign Up و Login را به فرم اضافه کنیم. از آنجایی که جهت یا orientation این LinearLayout عمودی (vertical) است، اگر همینطور عادی دو دکمه به چیدمان اضافه کنیم، به صورت عمودی به فرم اضافه می شوند:

برای حل این مشکل، قبل از اینکه دکمه ها را فرم اضافه کنیم، ابتدا یک LinearLayout با جهت یا Orientation افقی (horizontal) به فرم اضافه می کنیم و سپس این دو دکمه را به فرم اضافه می کنیم:

نتیجه کار شبیه عکس زیر می شود:

البته هنوز این شکل فرم با شکل مطلوب ما فاصله دارد. در عکس ما، این دو دکمه عرض برابر داشتند و هر کدام نصف عرض صفحه را اشغال می کردند. از جلسه قبل چاره حل این مشکل را هم می دانید! کافی است عرض هر دو دکمه را ۰dip تعریف کنید و به هر کدام وزن ۱ بدهید:

حالا نوبت دکمه های ورود با حساب کاربری گوگل و فیسبوک است. در ابتدا دو دکمه در فرم قرار دهید. متن آنها را مشخص کنید و عرض هر دوی آنها را match_parent قرار دهید:

حالا وقت آن است که رنگ دکمه ها را تغییر بدهیم. برای این کار به پنجره Properties بروید و Background دکمه ورود فیسبوک را مشابه عکس زیر به مقدار ۰e1f5b# تغییر دهید:

نتیجه کار شبیه عکس زیر می شود:

همانطور که می بینید، نوشته سیاه در این رنگ آبی، نمایش خوبی ندارد. حالا می خواهیم رنگ متن Facebook Login را سفید کنیم. برای این کار از پنجره Properties ویژگی Text Color دکمه را به مقدار FFFFFF# تغییر دهید:

ماحصل کار تا اینجا این شکلی است:

حالا Background دکمه Google+ Login را به مقدار DD1812 تغییر دهید. حاصل کار شبیه عکس زیر خواهد شد:

خب! تا حد زیادی شبیه کاری که ابتدا می خواستیم شد ولی هنوز یک نکته کوچک باقی مانده است: دکمه های ورود چرا به هم چسبیده اند؟ بهتر نیست کمی بین آنها فاصله باشد؟ بر می گردیم به پنجره Properties و برای هر دو دکمه Margin تعریف می کنیم:

این کار را برای هر دو دکمه ورود فیسبوک و ورود گوگل انجام می دهیم. حاصل کار را ببینید:

نکته: margin یا حاشیه، فاصله ای است که هر View در صفحه با سایر عناصر صفحه دارد. مثلاً وقتی برای یک دکمه، حاشیه یا margin به اندازه ۴dp تعریف می کنیم، یعنی هیچ View دیگری نمی تواند با این دکمه فاصله ای کمتر از ۴dp داشته باشد.

کد نهایی این صفحه:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- Logo -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <!-- Form -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Username" >

            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Login" />

            <Button
                android:id="@+id/button4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Register" />
        </LinearLayout>

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="#0e1f5b"
            android:text="Facebook Login"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="#DD1812"
            android:text="Google+ Login"
            android:textColor="#FFFFFF" />

    </LinearLayout>

    <!-- Footer -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="License" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Guest" />
    </LinearLayout>

</LinearLayout>

---

در فصل های بعدی با گرافیکها و RelativeLayout کار خواهیم کرد. با ما باشید!