Pembuatan Chat Layout - 2 dengan Android

Perubahan Layout Utama

Buka file activity_main.xml dan silakan ubah menjadi seperti berikut.

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/img_background"

    android:orientation="vertical"

    android:paddingBottom="@dimen/vertical_margin_8dp"

    android:paddingLeft="@dimen/horizontal_margin_8dp"

    android:paddingRight="@dimen/horizontal_margin_8dp"

    android:paddingTop="@dimen/vertical_margin_8dp"

    tools:context=".MainActivity">




    

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">




        

            android:id="@+id/radio_button_my_self_activity_main"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:checked="true"

            android:text="My Self" />




        

            android:id="@+id/radio_button_user_activity_main"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="User" />




    

android:id="@+id/edit_text_chat_activity_main"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Message"

android:inputType="text"

android:maxLines="1"

android:singleLine="true" />

android:id="@+id/recycler_view_chat_activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="@dimen/vertical_margin_8dp" />

Jadi, pada layout activity_main.xml ada melakukan perubahan sedikit yakni, penambahan RadioButton dan EditText. RadioButton Anda gunakan sebagai pembeda bahwa message tersebut berasal dari siapa (My Self atau User). Sedangkan EditText yang digunakan sebagai tempat untuk melakukan input message-nya.

Perubahan Logic Utama

Buka file MainActivity.kt dan ubah menjadi seperti berikut.

/*

 * Created by YSN Studio on 5/12/18 11:26 AM

 * Copyright (c) 2018. All rights reserved.

 *

 * Last modified 5/12/18 11:24 AM

 */




package com.ysn.chatlayout




import android.os.Bundle

import android.support.v7.app.AppCompatActivity

import android.support.v7.widget.LinearLayoutManager

import android.view.inputmethod.EditorInfo

import android.widget.Toast

import com.ysn.chatlayout.adapter.AdapterChat

import com.ysn.chatlayout.adapter.model.Chat

import kotlinx.android.synthetic.main.activity_main.*

import java.text.SimpleDateFormat

import java.util.*




class MainActivity : AppCompatActivity() {




    private lateinit var listViewType: MutableList

    private lateinit var listChat: MutableList

    private lateinit var adapterChat: AdapterChat




    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        edit_text_chat_activity_main.setOnEditorActionListener { _, actionId, _ ->

            if (actionId == EditorInfo.IME_ACTION_DONE) {

                val idTypeChat = radio_group_activity_main.checkedRadioButtonId

                val typeChat = if (idTypeChat == R.id.radio_button_my_self_activity_main) {

                    AdapterChat.VIEW_TYPE_MY_SELF

                } else {

                    AdapterChat.VIEW_TYPE_USER

                }

                val message = edit_text_chat_activity_main.text.toString().trim()

                if (message.isEmpty()) {

                    Toast.makeText(this@MainActivity, "Message is empty", Toast.LENGTH_SHORT)

                            .show()

                } else {

                    val dateTime = SimpleDateFormat("dd-MM-yyyy HH:mm", Locale.US)

                            .format(Date())

                    val chat = Chat(message = message, dateTime = dateTime)

                    listViewType.add(typeChat)

                    listChat.add(chat)

                    adapterChat.notifyDataSetChanged()

                }

            }

            true

        }

        setupAdapterRecyclerView()

    }




    private fun setupAdapterRecyclerView() {

        listViewType = mutableListOf()

        listChat = mutableListOf()

        adapterChat = AdapterChat(listViewType = listViewType, listChat = listChat)

        recycler_view_chat_activity_main.layoutManager = LinearLayoutManager(this)

        recycler_view_chat_activity_main.adapter = adapterChat

    }

}

Jadi, perubahan logic-nya cukup sederhana. hanya perlu menghilangkan semua coding statik untuk data chat-nya. Kemudian, set adapter si RecyclerView diawal dengan list data yang masih kosong. Selanjutnya beri event setOnEditorListenerpada EditText message dimana, didalamnya ada menambahkan pengkondisian apabila si user tap button done pada soft keyboard-nya maka, app akan melakukan eksekusi untuk mengecek apakah data message-nya kosong atau tidak. Jika tidak kosong maka, app akan melanjutkan pemasukan data chat-nya kedalam listChat. Namun, sebelumnya app juga ada melakukan pengecekan dimana, apabila radio button yang terpilih merupakan radio button my self maka, app akan memasukkan type 1 kedalam listViewType dan apabila radio button user maka, app akan memasukkan type 2. Setelah semua data valid maka, ada memberikan perintah untuk melakukan refresh data pada RecyclerView yakni pada syntax notifyDataSetChanged() .

Output