Android - การออกแบบUI หน้าlogin พื้นฐาน

Mobile Application Developing- Android, iOS, Window Phone สอนเขียนโปรแกรมบนมือถือ ระบบปฏิบัติการต่าง แอนดรอยด์ ไอโอเอส วินโดโฟน สอนเขียนโปรแกรมบนมือถือ

Moderators: mindphp, ผู้ดูแลกระดาน

phennapa
PHP Jr. Member
PHP Jr. Member
Posts: 20
Joined: 15/06/2020 10:27 am

Android - การออกแบบUI หน้าlogin พื้นฐาน

Post by phennapa »

Android - ออกแบบUI หน้าlogin
หลังจากเปิดโปรเจ็ค android studio ก็ทำตามด้านล่างเลยค่ะ
แก้ไขที่ไฟล์ / activity_main.xml
เปลี่ยน androidx.constraintlayout.widget.ConstraintLayout เป็น RelativeLayout

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>
ตามโค้ดด้านล่างนี้คือเปลี่ยน RelativeLayout แล้ว

Code: Select all

<RelativeLayout 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=".MainActivity">


</RelativeLayout>
ขั้นตอนต่อไปคือ ออกแบบหน้าUI Login
1) ImageView ใส่รูปตามที่กำหนด ชื่อไฟล์รูป abc

Code: Select all

<ImageView
    android:id="@+id/imageView"
    android:layout_width="153dp"
    android:layout_height="139dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="121dp"
    android:layout_marginBottom="522dp"
    android:src="@drawable/abc" /> //ไฟล์รูปชื่อ abc
1.png
1.png (6.99 KiB) Viewed 355 times
2) กำหนดTextView .ใส่ชื่อหัวข้อ “Login”

Code: Select all

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="209dp"
    android:text="Login"
    android:textSize="35dp" />
2.png
2.png (7.14 KiB) Viewed 355 times
3) <EditText> สร้างช่องใส่ Name

Code: Select all

<EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:layout_marginStart="-3dp"
        android:layout_marginLeft="-3dp"
        android:layout_marginTop="179dp"
        android:layout_marginEnd="3dp"
        android:layout_marginRight="3dp"
        android:focusable="true"
        android:hint="Enter Name"
        android:textColorHighlight="#ff7eff15"
        android:textColorHint="#ffff25e6" />

3.png
3.png (7.11 KiB) Viewed 355 times
4) editText2 สร้างช่องใส่ Password

Code: Select all

 <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_alignEnd="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="-3dp"
        android:layout_marginLeft="-3dp"
        android:layout_marginTop="9dp"
        android:layout_marginEnd="-3dp"
        android:layout_marginRight="-3dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:textColorHint="#ffff299f" />
4.png
4.png (7.11 KiB) Viewed 355 times
5) <Button> คือการสร้างปุ่ม Login

Code: Select all

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginEnd="-9dp"
    android:layout_marginRight="-9dp"
    android:layout_marginBottom="138dp"
    android:layout_toStartOf="@+id/textview"
    android:layout_toLeftOf="@+id/textview"
    android:text="login" />
5.png
5.png (7.08 KiB) Viewed 355 times
6) <Button2>คือการสร้างปุ่ม cancle

Code: Select all

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="-6dp"
    android:layout_marginLeft="-6dp"
    android:layout_marginBottom="137dp"
    android:layout_toEndOf="@+id/textview"
    android:layout_toRightOf="@+id/textview"
    android:text="Cancel" />

6.png
6.png (7.08 KiB) Viewed 355 times
ทั้งหมดนี้คือการขั้นตอนการออกแบบ UI บน android
Mosboom2

Re: Android - การออกแบบUI หน้าlogin พื้นฐาน

Post by Mosboom2 »

[size=150][/size][quote=phennapa post_id=190714 time=1592221185 user_id=28863]
Android - ออกแบบUI หน้าlogin
หลังจากเปิดโปรเจ็ค android studio ก็ทำตามด้านล่างเลยค่ะ
แก้ไขที่ไฟล์ / activity_main.xml
เปลี่ยน androidx.constraintlayout.widget.ConstraintLayout เป็น RelativeLayout
[code]<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>
[/code]

ตามโค้ดด้านล่างนี้คือเปลี่ยน RelativeLayout แล้ว
[code]<RelativeLayout 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=".MainActivity">


</RelativeLayout>
[/code]
ขั้นตอนต่อไปคือ ออกแบบหน้าUI Login
1) ImageView ใส่รูปตามที่กำหนด ชื่อไฟล์รูป abc
[code]<ImageView
android:id="@+id/imageView"
android:layout_width="153dp"
android:layout_height="139dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="121dp"
android:layout_marginBottom="522dp"
android:src="@drawable/abc" /> //ไฟล์รูปชื่อ abc
[/code]
1.png
2) กำหนดTextView .ใส่ชื่อหัวข้อ “Login”
[code]<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="209dp"
android:text="Login"
android:textSize="35dp" />
[/code]
2.png
3) <EditText> สร้างช่องใส่ Name
[code]<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginStart="-3dp"
android:layout_marginLeft="-3dp"
android:layout_marginTop="179dp"
android:layout_marginEnd="3dp"
android:layout_marginRight="3dp"
android:focusable="true"
android:hint="Enter Name"
android:textColorHighlight="#ff7eff15"
android:textColorHint="#ffff25e6" />

[/code]
3.png
4) editText2 สร้างช่องใส่ Password
[code] <EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText"
android:layout_alignEnd="@+id/editText"
android:layout_alignRight="@+id/editText"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="-3dp"
android:layout_marginLeft="-3dp"
android:layout_marginTop="9dp"
android:layout_marginEnd="-3dp"
android:layout_marginRight="-3dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#ffff299f" />
[/code]
4.png

5) <Button> คือการสร้างปุ่ม Login
[code]<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="-9dp"
android:layout_marginRight="-9dp"
android:layout_marginBottom="138dp"
android:layout_toStartOf="@+id/textview"
android:layout_toLeftOf="@+id/textview"
android:text="login" />
[/code]
5.png
6) <Button2>คือการสร้างปุ่ม cancle
[code]<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="-6dp"
android:layout_marginLeft="-6dp"
android:layout_marginBottom="137dp"
android:layout_toEndOf="@+id/textview"
android:layout_toRightOf="@+id/textview"
android:text="Cancel" />

[/code]
6.png
ทั้งหมดนี้คือการขั้นตอนการออกแบบ UI บน android
[/quote]
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Mobile Application Developing- Android, iOS”

Who is online

Users browsing this forum: No registered users and 2 guests