Redraw Design UI form Xd adobe to xml Layout Android

Details: Category: บทความแอนดรอยด์ | Published: 18 June 2018 | Hits: 6383

หลังจากที่เราได้ Export รูปภาพ จาก การออกแบบ Xd ของ adobe ได้แล้ว

มาสเตอร์ Copy

ใน res และ Paste ทั้งหมดที่ได้ไปที่นี่ครับ

Paste ให้ครบทุกไฟร์

เรามาโค้ด บนแอนดรอยด์ กัน มาสเตอร์ สร้าง xml เปล่าๆ แบบนี้

และ โค้ด แบบนี่ ไปที่ ไฟร์ fragment_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/logo" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/email"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/password"
            android:hint="@string/password"
            android:inputType="textPassword" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_white"
            android:text="Login"
            android:textColor="@color/colorWhite"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:text="New Register"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            android:textStyle="bold" />


    </LinearLayout>

</RelativeLayout>