Programing

ทำระบบสั่งอาหารบนAndroid เพิ่มยอดขาย

10 August, 2020

ในปัจจุบันถึงแม้จะมีบริการรับส่งอาหาร Delivery อยู่มากมายหลายต่อหลายเจ้าให้เลือกใช้บริการ แต่จะดีแค่ไหน ถ้าหากเราสามารถสร้างระบบสั่งอาหาร Delivery ขึ้นมาได้ด้วยตัวเอง เพื่อใช้กับร้านอาหารของเราเอง ซึ่งหากใครสนใจจะทำก็มาปรึกษา หรือมาจ้างพวกเรา Twin Synergy ได้นะครับ

ในบทความนี้ผมจะมาแชร์เรื่องการทำระบบ Food Order บน Android โดยจะใช้ภาษา kotlin ในการเขียน และใช้ Cloud Firestore ของ Firebase เป็นฐานข้อมูล

เนื่องจากวิธีการถือว่าค่อนข้างเยอะ เราเลยจะแยกออกเป็นหลาย ๆ ตอน หากใครสนใจก็อย่าเพิ่งปิดหน้านี้หนีไป ลองมาดูวิธีการกัน

ในตอน 1 นี้ จะมาสร้างหน้า Dashboard กับ หน้ารายการอาหารและเครื่องดื่มกันครับ

เริ่มต้นสร้าง Application

เมื่อจะเริ่มพัฒนาแอปฯ บนระบบแอนดรอยด์ อันดับแรกคุณต้องสร้างโปรเจ็ดใหม่ใน Android Studio ดังนั้นให้คุณรัน android Studio ขึ้นมากับหน้าจอ Welcome to Android Studio

2. คลิก Start a new Android Studio project จะปรากฏหน้า Create New Project

ขั้นตอนที่ 1 คลิกที่ Empty Activity

ขั้นตอนที่ 2 คลิก Next

3. ตั้งชื่อ โปรเจค และ เลือก ภาษาในการเขียน เป็น kotlin แล้วคลิก Finish

สิ่งที่ต้องติดตั้ง

หากต้องการภาพที่ใช้ในการทดสอบระบบเบื้องต้น สามารถโหลได้ที่นี่ URL: https://drive.google.com/drive/folders/0B08PZSOd4UmOOXJjaGVESFg0Skk

แล้วทำการวางภาพทั้งหมดลงใน folder ที่ app->res->drawable ดังภาพตัวอย่าง:

library ที่ต้องติดตั้ง คัดลอกไปวางที่ build.gradle(Module: app)

//CircleImageView
implementation 'de.hdodenhof:circleimageview:3.1.0'

//CounterFab
implementation 'com.github.andremion:counterfab:1.2.2'

//viewpager2
implementation "androidx.viewpager2:viewpager2:1.0.0"

เปิดไฟล์ colors.xml นี้คือ code สี ที่เราจะใช้ในการทำหน้า Dashboard และ หน้ารายการอาหารและเครื่องดื่ม

//colors.xml 
<resources>
    <color name="colorPrimary">#03DAC6</color>
    <color name="colorPrimaryDark">#000000</color>
    <color name="colorAccent">#00a294</color>
    <color name="colorTeal">#008081</color>
    <color name="colorRed">#FF0000</color>
    <color name="colorDivider">#EEEEEE</color>
    <color name="colorGray12">#888888</color>
    <color name="colorWhite2">#ccffffff</color>
    <color name="colorGray1A">#1affffff</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
    <color name="colorDarkGreen">#0E6251</color>
</resources>

เปิดไฟล์ strings.xml

//strings.xml 
<resources>
    <string name="app_name">Android-Order-Food-In-Kotlin</string>
    <!--food_drink Screen-->
    <string name="no_data">ไม่มีข้อมูล</string>
    <string name="no_data_cal">"??"</string>
    <string name="price">ราคา</string>
    <string name="todo">TODO</string>
    <string name="baht">บาท</string>
    <string name="kilo_calories">กิโลแคลอรี่</string>
    <string name="calorie_content">ปริมาณแคลอรี่</string>
    <string name="food_and_drink">อาหารและเครื่องดื่ม</string>
    <string name="add_to_list">เพิ่มในรายการ</string>
    <string name="added">เพิ่มแล้ว</string>
    <!--food_drink Screen End-->
</resources>

เริ่มเขียนแอปฯ

นั้นเราจะมาเริ่มสร้างหน้า Dashboard กันก่อน

เราจะไปสร้าง btn_bg.xml ที่ app->res->drawable โดย btn_bg.xml ตัวนี้ คือ ลูกเล่นเมื่อผู้ใช้งานกด CardView

//btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <stroke android:width="2dp"
                android:color="@color/colorGray12" />
            <solid android:color="@color/colorWhite2"/>
            <corners android:radius="15dp" />
        </shape>
    </item>

    <item>
        <shape>
            <stroke android:width="2dp"
                android:color="@color/colorGray1A" />
            <solid android:color="@color/colorWhite"/>
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>

นี้ Code Layout หน้า Dashboard น่ะครับ

//activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@drawable/asset1xxxhdpi"
    android:orientation="vertical"
    tools:context=".ui.MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:maxLines="1"
            android:text="@string/app_name"
            android:textColor="@color/colorBlack"
            android:textSize="22sp" />

    </androidx.appcompat.widget.Toolbar>

    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/my_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignmentMode="alignMargins"
        app:columnCount="2"
        app:rowCount="4">

        <androidx.cardview.widget.CardView
            android:id="@+id/food_and_drink"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/icons8_food_and_wine_80" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/food_and_drink"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/empty" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/empty" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/empty" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/empty" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="6dp"
            app:layout_columnWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:background="@drawable/btn_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:contentDescription="@string/todo"
                    android:src="@drawable/empty" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorBlack"
                    android:textSize="18sp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </androidx.gridlayout.widget.GridLayout>
</LinearLayout>

เราจะประกาศ id CardView อาหารและเครื่องดื่ม ว่า android:id=”@+id/food_and_drink” เพื่อเรียกใช้งาน ในการคลิกไปหน้ารายการอาหารและเครื่องดื่ม

นี้ คือ หน้า Layout ที่เราได้

อย่าลืมไปสร้างหน้า รายการอาหารและเครื่องดื่ม สำหรับลิงค์ไปหน้ารายการอาหารและเครื่องดื่ม

โดยขั้นตอนสร้าง Activity นั้นคือ

คลิก ที่ File
คลิก ที่ New
คลิก ที่ Activity
คลิก ที่ Empty Activity

เมื่อคลิก Empty Activity จะขื้นหน้า New Android Activity ให้ใส่ชื่อ Activity Name

เมื่อสร้างเสร็จแล้ว เรามาทำฟังก์ชั่น ลิงค์ไปหน้ารายการอาหารและเครื่องดื่มกัน

โดยเราจะใช้ id ประกาศไว้ในหน้า activity_main.xml คือ food_and_drink

kotlin นั้นสามารถเชื่อมต่อ view กับ code ได้เลย โดยไม่ต้องประกาศ findViewById(R.id.food_and_drink) เหมือนกับ Java เพราะ kotlin ใช้ kotlinx.android.synthetic ในการเชื่อมต่อ view กับ code

ประกาศต่อ .setOnClickListener{} เมื่อคลิกที่ CardView

food_and_drink.setOnClickListener {
           ....
}

จากนั้นเพิ่มโค๊ด สองบรรทัดนี้ลงไป ใน setOnClickListener

val intent = Intent(this, FoodDrinkMainActivity::class.java)
startActivity(intent)

โค๊ด สองบรรทัดนี้ คือ เราจะสร้างออปเจ็ค intent ขึ้นมา โดยจะรับ parameter 2 ตัว ตัวแรก คือ Context ภายใน Activity แรก และ parameter ตัวที่สองคือ Activity ที่เราต้องการเปิด

อันนี้ Code ตัวเต็ม

//MainActivity.kt
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.android_order_food_in_kotlin.R
import com.example.android_order_food_in_kotlin.ui.fooddrink.FoodDrinkMainActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initInstances()
    }

    private fun initInstances() {
        food_and_drink.setOnClickListener{
            val intent = Intent(this, FoodDrinkMainActivity::class.java)
            startActivity(intent)
        }
    }
}

เรามาทำหน้ารายการอาหารและเครื่องดื่มกันต่อ

//activity_food_drink_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/food_drink_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/asset1xxxhdpi">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar_food"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme">

            <TextView
                android:id="@+id/tv_toolbar_title_food"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:maxLines="1"
                android:textColor="@color/colorDarkGreen"
                android:textSize="22sp" />

        </androidx.appcompat.widget.Toolbar>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout_food_drink"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/black"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="20dp"
            app:tabPaddingStart="20dp"
            app:tabSelectedTextColor="@android:color/black"
            app:tabTextColor="@color/colorDarkGreen"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager_food_drink"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" />
    </androidx.core.widget.NestedScrollView>

    <com.andremion.counterfab.CounterFab
        android:id="@+id/counter_fab_food_drink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:padding="10dp"
        android:src="@drawable/ic_shopping_basket_black_24dp"
        android:tint="@color/colorWhite"
        app:badgeBackgroundColor="@color/colorRed" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

ก่อนจะไปสร้าง Adapter เราจะมาสร้างหน้า ListFoodFragment และ หน้า ListDrinkFragment กันก่อน

ขั้นตอนการสร้าง Fragment

คลิกที่ File
คลิกที่ New
คลิกที่ Fragment
คลิกที่ Fragment(with ViewModel)

เมื่อคลิก Fragment(with ViewModel) จะขื้นหน้า New Android Component ให้ใส่ชื่อ Fragment Name

เมื่อสร้างเสร็จแล้ว เราจะมาสร้าง Adapter กัน โดยโปรเจคนี้ เราจะใช้ ViewPager2

ViewPager2 คืออะไร ทำงานอย่างไง สามารถอ่านที่นี้ได้เลยครับ URL: https://akexorcist.dev/view-pager-will-be-replace-with-view-pager-2/

//FoodDrinkPagerAdapter.kt
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.lifecycle.Lifecycle
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.android_order_food_in_kotlin.ui.listdrink.ListDrinkFragment
import com.example.android_order_food_in_kotlin.ui.listfood.ListFoodFragment

class FoodDrinkPagerAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) :
    FragmentStateAdapter(fragmentManager, lifecycle) {

    override fun getItemCount(): Int = 2

    override fun createFragment(position: Int): Fragment {
        return if (position == 0) {
            ListFoodFragment.newInstance()
        } else ListDrinkFragment.newInstance()
    }
}

เมื่อเราสร้างหน้า Adapter เสร็จ เราจะเอา FoodDrinkPagerAdapter ต่อกับ FoodDrinkMainActivity.kt กัน

เรามาสร้าง Toolbar ใน FoodDrinkMainActivity.kt กันก่อน

        setSupportActionBar(toolbar_food)
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        supportActionBar!!.setDisplayShowHomeEnabled(true)
        supportActionBar!!.title = null
        toolbar_food.setNavigationIcon(R.drawable.ic_chevron_left_black_48dp)
        toolbar_food.setNavigationOnClickListener {
            onBackPressed()
        }
        tv_toolbar_title_food.text = "รายการอาหารและเครื่องดื่ม"

เมื่อสร้าง Toolbar เสร็จแล้วเราทำ Adapter ต่อกับ FoodDrinkMainActivity.kt กัน

private fun setUpPagerAdapter() {
        val adapter = FoodDrinkPagerAdapter(supportFragmentManager, lifecycle)
        view_pager_food_drink.adapter = adapter

        TabLayoutMediator(tab_layout_food_drink, view_pager_food_drink,
            TabLayoutMediator.TabConfigurationStrategy { tab, position ->
                when (position) {
                    0 -> {
                        tab.text = "อาหาร"
                    }
                    1 -> {
                        tab.text = "เครื่องดื่ม"
                    }
                }
            }).attach()
    }

view_pager_food_drink , tab_layout_food_drink คือ id ประกาศไว้ใน activity_food_drink_main.xml

อันนี้คือ โค้ดทั้งหมดครับ

//FoodDrinkMainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.android_order_food_in_kotlin.R
import com.example.android_order_food_in_kotlin.Adapter.FoodDrinkPagerAdapter
import com.google.android.material.tabs.TabLayoutMediator
import kotlinx.android.synthetic.main.activity_food_drink_main.*

class FoodDrinkMainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_food_drink_main)
        initToolbar()
        setUpPagerAdapter()
    }

    private fun initToolbar() {
        setSupportActionBar(toolbar_food)
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        supportActionBar!!.setDisplayShowHomeEnabled(true)
        supportActionBar!!.title = null
        toolbar_food.setNavigationIcon(R.drawable.ic_chevron_left_black_48dp)
        toolbar_food.setNavigationOnClickListener {
            onBackPressed()
        }
        tv_toolbar_title_food.text = "รายการอาหารและเครื่องดื่ม"
    }

    private fun setUpPagerAdapter() {
        val adapter = FoodDrinkPagerAdapter(supportFragmentManager, lifecycle)
        view_pager_food_drink.adapter = adapter

        TabLayoutMediator(tab_layout_food_drink, view_pager_food_drink,
            TabLayoutMediator.TabConfigurationStrategy { tab, position ->
                when (position) {
                    0 -> {
                        tab.text = "อาหาร"
                    }
                    1 -> {
                        tab.text = "เครื่องดื่ม"
                    }
                }
            }).attach()
    }
}

เพิ่มโค้ด ที่ styles.xml ใน values

อันนี้ คือ โค้ด Layout Design ที่จะเอาไปใช้กับ Button add to list กับ Button added ที่ใช้ในหน้า food_drink_row.xml

//styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="FoodDrinkButton">
        <item name="android:stateListAnimator">@null</item>
        <item name="android:textSize">@dimen/text_body_2</item>
    </style>

    <style name="FoodDrinkButton.Active">
        <item name="android:background">@drawable/btn_active_selector</item>
        <item name="android:textColor">@color/colorWhite</item>
    </style>

    <style name="FoodDrinkButton.Active.Boarder">
        <item name="android:background">@drawable/btn_active_border_selector</item>
        <item name="android:paddingEnd">@dimen/default_padding_margin_large</item>
        <item name="android:paddingStart">@dimen/default_padding_margin_large</item>
        <item name="android:textColor">@color/btn_inactive_text_color_selector</item>
    </style>
</resources>

สร้าง food_drink_row.xml ที่ layout

food_drink_row คือ รูปแบบที่เราจะนำข้อมูลมาแสดง

//food_drink_row.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:id="@+id/card_view_food_drink"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    app:cardCornerRadius="8dp"
    tools:ignore="RtlSymmetry">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

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

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:paddingStart="15dp"
                android:paddingLeft="15dp">

                <TextView
                    android:id="@+id/tvName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/no_data"
                    android:textColor="@color/colorTeal"
                    android:textSize="26sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="18dp"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/calorie_content"
                            android:textColor="#DF6A90B5"
                            android:textSize="15sp" />

                        <TextView
                            android:id="@+id/tvCal"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/no_data_cal"
                            android:textColor="#6A90B5"
                            android:textSize="20sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/kilo_calories"
                            android:textColor="#DF6A90B5"
                            android:textSize="14sp" />

                    </LinearLayout>

                    <ImageView
                        android:layout_width="10dp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="8dp"
                        android:layout_marginLeft="8dp"
                        android:contentDescription="@string/todo"
                        android:src="@drawable/split" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="10dp"
                        android:layout_marginLeft="10dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/price"
                            android:textColor="#EE6A90B5"
                            android:textSize="15sp" />

                        <TextView
                            android:id="@+id/tvPrice"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/no_data_cal"
                            android:textColor="#6A90B5"
                            android:textSize="20sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/baht"
                            android:textColor="#EE6A90B5"
                            android:textSize="14sp" />

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="133dp"
                android:gravity="center">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/imageView"
                    android:layout_width="140dp"
                    android:layout_height="130dp"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="10dp"
                    android:src="@drawable/empty"
                    app:civ_border_color="@color/colorTeal"
                    app:civ_border_width="2dp" />
            </RelativeLayout>
        </LinearLayout>

        <Button
            android:id="@+id/btn_add_to_list"
            style="@style/FoodDrinkButton.Active"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:layout_margin="8dp"
            android:text="@string/add_to_list" />

        <Button
            android:id="@+id/btn_added"
            style="@style/FoodDrinkButton.Active.Boarder"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:layout_margin="8dp"
            android:text="@string/added"
            android:visibility="gone"
            tools:visibility="visible" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

หน้าอาหาร และ หน้าเครื่องดื่ม เราจะใช้ RecyclerView ในการแสดงข้อมูล ที่เราดึงมาจาก Cloud Firestore

//list_food_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.listfood.ListFoodFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_food_list"
        android:paddingBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/food_drink_row" />

</LinearLayout>

//list_drink_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.listdrink.ListDrinkFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_drink_list"
        android:paddingBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/food_drink_row"/>

</LinearLayout>

ตอนนี้เราได้หน้า Dashboard กับ หน้ารายการอาหารแล้ว แต่ยังไม่มีข้อมูลที่จะนำมาแสดง ในตอนหน้าเราสร้างข้อมูลกัน พร้อมกับติดตั้ง Firebase สร้าง Cloud Firestore กับวิธีเพิ่มข้อมูลลงใน Cloud Firestore โดยผ่านแอป ส่วนรูปภาพ เราเก็บใน Cloud Storage for Firebase กันนะครับ

หรือใครเริ่มท้อ คิดว่ามันยากเกินไป จะมาปรึกษา หรือ จ้างเราทำก็ได้นะ ราคาคุยกันได้

Twinsynergy #ออกและพัฒนาเว็บไซต์ #ทำเว็บไซต์และแอปพลิเคชั่น #พัฒนาซอฟแวร์ #Website #MobileApplication #Dev #WebDesign

📌สนใจติดต่อ📌
💻 twinsynergy.co.th
📱 063-789-9059

KamonthepMaya

ทำงานที่ Twin Synergy Co., Ltd.
เคยเขียน Kotlin Native , Flutter และ Web React.js

เริ่มต้นสร้าง Application

สิ่งที่ต้องติดตั้ง

เริ่มเขียนแอปฯ

LEAVE A REPLY Cancel reply