Messages ListFragment

15. Messages ListFragment

For the chat screen create a layout file activity_chat.xml with the following content.

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="@android:color/darker_gray">

     

    <fragment

        android:name="com.appsrox.instachat.MessagesFragment"

        android:id="@+id/msg_list"

        android:layout_width="match_parent"

        android:layout_height="0dip"

        android:layout_weight="1"/>

 

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@android:color/white">

        <Button

            android:id="@+id/send_btn"

            style="?android:attr/buttonStyleSmall"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentRight="true"

            android:text="Send"/>

        <EditText

            android:id="@+id/msg_edit"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_alignBottom="@+id/send_btn"

            android:layout_toLeftOf="@+id/send_btn">

        </EditText>

    </RelativeLayout>

 

</LinearLayout>

                    

We'll use ListFragment to implement the list view. Create a MessagesFragment class that extends ListFragment and implement LoaderCallbacks interface just like before but this time specify DataProvider.CONTENT_URI_MESSAGES as the Uri for CursorLoader.

publicclass MessagesFragment extendsListFragment implementsLoaderManager.LoaderCallbacks<Cursor> {

 

    privateOnFragmentInteractionListener mListener;

    privateSimpleCursorAdapter adapter;

     

    @Override

    publicvoid onAttach(Activity activity) {

        super.onAttach(activity);

        try{

            mListener = (OnFragmentInteractionListener) activity;

        }catch(ClassCastException e) {

            thrownew ClassCastException(activity.toString() + " must implement OnFragmentInteractionListener");

        }

    }  

 

    @Override

    publicvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

         

        adapter = newSimpleCursorAdapter(getActivity(),

                R.layout.chat_list_item,

                null,

                newString[]{DataProvider.COL_MSG, DataProvider.COL_AT},

                newint[]{R.id.text1, R.id.text2},

                0);

        adapter.setViewBinder(newSimpleCursorAdapter.ViewBinder() {

             

            @Override

            publicboolean setViewValue(View view, Cursor cursor, intcolumnIndex) {

                switch(view.getId()) {

                caseR.id.text1:

                    LinearLayout root = (LinearLayout) view.getParent().getParent();

                    if(cursor.getString(cursor.getColumnIndex(DataProvider.COL_FROM)) == null) {

                        root.setGravity(Gravity.RIGHT);

                        root.setPadding(50,10,10,10);

                    }else{

                        root.setGravity(Gravity.LEFT);

                        root.setPadding(10,10,50,10);

                    }

                    break;                 

                }

                returnfalse;

            }

        });

        setListAdapter(adapter);

    }  

 

    @Override

    publicvoid onActivityCreated(Bundle savedInstanceState) {

        super.onActivityCreated(savedInstanceState);

         

        Bundle args = newBundle();

        args.putString(DataProvider.COL_EMAIL, mListener.getProfileEmail());

        getLoaderManager().initLoader(0, args, this);

    }

 

    @Override

    publicvoid onDetach() {

        super.onDetach();

        mListener = null;

    }

 

    publicinterface OnFragmentInteractionListener {

        publicString getProfileEmail();

    }

}

                

We define an interface which an activity must implement that uses this fragment. This is how the fragment knows about the selected chat email ID.

---

The layout for the list row is very simple. We already took care of the alignment (differentiating sent and received messages) by setting a ViewBinder to the list adapter.

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

     

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:background="@drawable/box">

        <TextView

            android:id="@+id/text1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textAppearance="?android:attr/textAppearanceLarge"/>

        <TextView

            android:id="@+id/text2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="right"

            android:textAppearance="?android:attr/textAppearanceSmall"/>

     

    </LinearLayout>

     

</LinearLayout>

                        

The rounded box as seen in the UI is obtained by specifying a shape drawable as background in the row layout. Create a box.xml file in drawable directory.

<?xmlversion="1.0"encoding="utf-8"?>

<shapexmlns:android="http://schemas.android.com/apk/res/android">

    <solid

        android:color="@android:color/white"/>

    <corners

        android:radius="5dp"/>

    <padding

        android:left="10dp"

        android:top="5dp"

        android:right="10dp"

        android:bottom="5dp"/>

</shape>