Let's move back to the Android implementation. This part is easy, we have already mapped the UI logic to the ChatPresenter
so let's get straight into building the interface. For our ChatView.xml
file, we are going to introduce a TableLayout
. TableLayouts are similar to Grids in Xamarin.Forms
; we simply split an area into rows and columns. We are able to set UI objects to specific rows and columns as well as span specific UI objects across multiple rows and columns.
Let's add a new file called ChatView.xml
to the Resources | layout folder and implement the following:
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tableLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="100dp" android:padding="5dip"> <EditText android:id="@+id/chatField" android:hint="Enter message" android:textColor="#000000" android:layout_weight="2" android:layout_column="1" /> <Button android:id="@+id/sendButton" android:text="Send" android:textColor="#417BB5" android:background="@android:color/transparent" android:focusableInTouchMode="false" android:layout_weight="1" android:layout_column="3" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="fill_parent" android:layout_weight="1" android:padding="5dip"> <ScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" android:layout_weight="2" android:layout_span="4"> <LinearLayout android:id="@+id/scrollViewInnerLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </ScrollView> </TableRow> </TableLayout>
Each row is declared using the <TableRow>
tag; our first row contains an EditText
item for the messages, and a button to call the SendChat
function on the SignalRClient
.
52.15.214.27