This will be layout file which will provide interface for sending and receiving chat messages.
The layout contains:
i) A Listview which will have entries for sent and received messages.
ii) An EditText view for writing new message.
ii) A Button view to send message.
See the graphical Layout below:

We will be using a custom adapter for our Listview. So in order to follow that we will need another layout file for each entry of the listview.

In this layout file we have another LinearLayout inside the parent LinearLayout. This is done because we need to change the position of the message according to the sender of the message. For example if a message is sent by you, then it should be aligned right of the screen and if the message is received from another user then it should be aligned left of the screen.

Below is the graphical layout of th chatbubble.xml:

Now create a new package named com.marothiatechs.fragments inside src folder of your project.
create a new Java file in this new package and name it Chats.java
The contents of Chats.java will be :

Dear Friend, Thank you very much for this detailed post, that I have been looking for quite some time. I have followed all the steps so far but have had three problems
(1) The import android.support.v7 cannot be resolved : this was addressed through this post : http://stackoverflow.com/questions/24998368/the-import-android-support-v7-cannot-be-resolved
The bigger problem is this
(2) Once I do the change suggested in MainActivity, namely\
——————————————————————————
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new Chats();
} else
return PlaceholderFragment.newInstance(position + 1);
}
——————————————————————————-
i get an error on the return new Chats() statement as follows :
“Type mismatch: cannot convert from Chats to Fragment”

(3) I tried replacing return new Chats() with return new Fragment()
this removed the error, program compiled and executed BUT the chat_layout and the chatbubble screens did not come up. there was no text input area nor the send button.
So effectively the program was not working.

Would be grateful if you can help out with this problem.

Laxman Marothiya

Hi,

You cannot use “return new Fragment()” in place of “return new Chats()”. This might be the reason for your not getting the chat_layout and chatbubble screens.

The chat_layout.xml is used as a layout file inside Chats.java fragment class but you are simply returning a new Fragment() instead of Chats().

The error: “Type mismatch: cannot convert from Chats to Fragment” tells that your Chats.java class might not be extending a proper Fragment.
Make sure that wherever the Fragment name is used in your project, you import the below Fragment:

———————————————————————–
which is what was there in the sample program that you have kindly supplied

Laxman Marothiya

Please make sure that the same imports are there in your MainActivity.java

http://www.yantrajaal.com Prithwis Mukerjee

//import android.app.Fragment;
import android.support.v4.app.Fragment;
commented out the the original import, and put in the new import
now error on new Chats() gone by new error on public Fragment ..
—————————————
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new Chats();
} else
return PlaceholderFragment.newInstance(position + 1);
}
——————————————
Multiple markers at this line
– implements android.support.v13.app.FragmentPagerAdapter.getItem
– The return type is incompatible with
FragmentPagerAdapter.getItem(int)
———————————————
Eclipse suggest that I change it to
…
@Override
public android.app.Fragment getItem(int position) {
if (position == 1) {
…

but by doing that we get back the old error plus other errors.
sorry, for being such a pain … but appreciate your help

but with these support.v4 imports i get 8 errors (including the original error)
——————————————————
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.FragmentPagerAdapter;
——————————————————–
so clearly we are off the track here …

((ActionBarActivity) getActivity()).getSupportActionBar().setTitle(“Chats”);’
For me its working fine now

http://www.yantrajaal.com Prithwis Mukerjee

perhaps the problem lies somewhere here :

[2015-10-11 07:48:38 – PMChat2] WARNING: Found both android-support-v4 and android-support-v13 in the dependency list.

[2015-10-11 07:48:38 – PMChat2] Because v13 includes v4, using only v13.

will keep trying 🙂

http://www.yantrajaal.com Prithwis Mukerjee

End of the road for a bridge to far !
Could never eliminate that one last error.
Will now have to look for another solution. Thanks anyway

Fison

make sure that Chats and MainActivity classes are stored in the some folder(packages), i mean don’t put them in different location of your app. if you put them in defferent package then your will need to import the package.

even me i was face the same problem but new is ok
see the image:….

Fison

don’t replace Chats() with Fragments(). but put them in the same directory it will works.

Дамир Каримов

Hi! This is because chat_layout is located below the screen, and you can’t see it.
I changed expression if (position == 1) to if (position == 0) and see that numeric keyboard appeared. I entered some words and they appeared in the bottom of the screen.

Дамир Каримов

chat_layot-linearlayout
android:paddingBottom=”50dp”
and chat will be visible.

Abhishek Singh

thank you. Truly helpful….

great summit an

What string is R.string.server?

Pramod Raghav

its the name of your XMPP server.

Dominika K

I have a problem with it in MyXMPP.java file, in SendMessage method, it says: Cannot resolve symobl ‘server’. Does anybody know how to fix it?

Amitoj

Awesome tutorial. However, at the end of the tutorial, the “Chat” tab looks completely blank.
I just downloaded the latest Android Studio along with the SDK. The default “tabs” project has changed in new android studio and hence I had to make a few changes to your code.
1. ActionBarActivity is deprecated. So had to use AppCompatActivity in Chats.java.
2. Page titles are now hardcoded in “MainActivity.java” instead of “strings.xml”.

Also, preview images in android studio look exactly the same as in your tutorial. So I guess something breaks down at runtime.

I can’t figure out how these changes could have broken the code. Any suggestions?

Yea, that was my exact problem. I solved it using Linearlayout, instead of RelativeLayout. Is there any dis-advantage of using Linearlayout over RelativeLayout?

oops

Actually I am not getting you..can u plz explain this further???

Fison

May Be some change must be mode try this

if you get things like this “<” or “>” replace it with “sign”

for me to run it, i change this:
1)ActionBarActivity is deprecated. So i use AppCompatActivity in Chats.java.
2) public class MainActivity extends AppCompatActivity instead of ActionBarActivity
3) i made a modification in Activity_Main.xml

Even when i select the chat tab, i get empty layout. I am sure return
new Chats(), is being executed, as the welcome text gets cleaned up.
need help..

saif

I am new to android, excellent tutorial. As others posted there are few things I did change for example like the AppCompatActivity. I also changed &lt to “”. However, I am not see the chat bubble thing shown in the final screenshot of part-1, no errors either.. need help..

Mayank Patel

give me full code of this app

aamobile games

thanks for this tutorial.
But even if I did every thing same, when I click Chat tab a blank page comes up. But if I change RelativeLayout to LinearLayout in chat_layout.xml I can see the content. But Send message buttone is not the correct place. Can someone help me?

Дамир Каримов

chat_layot-linearlayout
android:paddingBottom=”50dp”
and chat will be visible.

I am making this chat app in Android studio…..there I couldn’t find “src” folder but created by by choosing file>new>package….after that it asked me to “choose destination directory” there I have chosen “…appsrcmainjavamarothiatechs” after that asked me to “enter new package name:” there I have entered “fragments”
.
.

I hope above step is right.
.
.
But the problem what I am facing is in Chats.java
chatlist = new ArrayList<ChatMessage>();
in the above line following errors are coming:
chatlist – Cannot resolve symbol ‘chatlist’
& – ‘(‘ or ‘[‘ expected
lt – Cannot resolve symbol ‘lt’
gt – Cannot resolve symbol ‘gt’
) – Expression expected
in the line
chatAdapter = new ChatAdapter(getActivity(), chatlist);
error is for chatlist as
Cannot resolve symbol ‘chatlist’
.
.
In ChatAdapter.java
similar errors are present
as well as additional error for
chatMessageList = list;
where for “chatMessageList” and “list” Cannot resolve symbol error is coming.
.
.

Kathureliz

Hi Crazy Student I’m having similar issues with my Chats.java and ChatAdapter.java how did you resolve your errors ?

It says ActionBarActivity is depricated and is unable to cast the object.
Which results in complete crash of the app. ??????
if i change the “public class Fragment to Appcompatactivity” oncreteview and onclick methods are not calling ??? wat to do ?

jude

Very very awesome tutorial. Please can you give a step by step instruction on how you setup XMPP (ejabberd) hosted on aws EC2 or alternatives.

Joe Henry Olsen

Dear Author, thanks for a good tutorial which actually works just fine on my side. however, i want to expand the ideal and use it for creating a chatbot. i have a string which contains guessed words from user and their replies respectively. the replies works fine on desktop version. problem is, i don’t know how to connect the reply considering user inputs using this style. how can i achieve separating user inputs and the replies on right and left side respectively? i can send the codes if necessary.
forgive me if my question is out of topic but i looked everywhere for this style of messages and this is the only one that worked. thanks.

Hi it’s nice tutorial, i am using android studio and i tried it with studio it didn’t work out for me. i followed your tutorial step by step, i got confused at the last class (SectionsPagerAdapter) which you said modify MainActivity. please could you help me out on this? or could you please send me the source code to email id? amadonlinkserv@gmail.com. Thanks in advance.

Srivathsan Rajagopal

Same problem for me too

Joel Fioti

Please guys, i need an help, i get empty layout how can i fixed this please…

01-08 23:22:07.170 5004-5004/com.marothiatechs.mchat E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.marothiatechs.mchat, PID: 5004
java.lang.NoClassDefFoundError: Failed resolution of: Lorg/jxmpp/util/XmppStringUtils;
at org.jivesoftware.smack.provider.ProviderManager.getKey(ProviderManager.java:314)
at org.jivesoftware.smack.provider.ProviderManager.removeIQProvider(ProviderManager.java:217)
at org.jivesoftware.smack.provider.ProviderManager.addIQProvider(ProviderManager.java:199)
at org.jivesoftware.smack.provider.ProviderManager.addLoader(ProviderManager.java:128)
at org.jivesoftware.smack.initializer.UrlInitializer.initialize(UrlInitializer.java:54)
at org.jivesoftware.smack.SmackInitialization.loadSmackClass(SmackInitialization.java:232)
at org.jivesoftware.smack.SmackInitialization.parseClassesToLoad(SmackInitialization.java:193)
at org.jivesoftware.smack.SmackInitialization.processConfigFile(SmackInitialization.java:163)
at org.jivesoftware.smack.SmackInitialization.processConfigFile(SmackInitialization.java:148)
at org.jivesoftware.smack.SmackInitialization.(SmackInitialization.java:116)
at org.jivesoftware.smack.SmackConfiguration.getVersion(SmackConfiguration.java:96)
at org.jivesoftware.smack.ConnectionConfiguration.(ConnectionConfiguration.java:38)
at com.marothiatechs.mchat.MyXMPP.initialiseConnection(MyXMPP.java:95)
at com.marothiatechs.mchat.MyXMPP.init(MyXMPP.java:88)
at com.marothiatechs.mchat.MyXMPP.(MyXMPP.java:54)
at com.marothiatechs.mchat.MyXMPP.getInstance(MyXMPP.java:62)
at com.marothiatechs.mchat.MyService.onCreate(MyService.java:32)
at android.app.ActivityThread.handleCreateService(ActivityThread.java:2877)
at android.app.ActivityThread.-wrap4(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1427)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: java.lang.ClassNotFoundException: Didn’t find class “org.jxmpp.util.XmppStringUtils” on path: DexPathList[[dex file “/data/data/com.marothiatechs.mchat/files/instant-run/dex/slice-support-annotations-23.4.0_10e0a06c36c1567287fdf3ee91fca4e3985be84d-classes.dex”, dex file “/data/data/com.marothiatechs.mchat/files/instant-run/dex/slice-

Hi. I followed this tutorial. lets say i want to send two sentences. i typed the first sentence and it is added to the listview. but when i type the 2nd sentence and hit send, the first sentence gets added to the list view. anyone else having this problem?

Harshal Jaware

Dear friend i am implement app same as to your post.but it gives the unfortunately error.please guide me.

Suvendu Pradhan

I have implemented this code in my app but chat history not displayed in this app.

ronak

03-21 09:01:30.874 21625-21625/com.marothiatechs.mchat E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.marothiatechs.mchat, PID: 21625
java.lang.ClassCastException: com.marothiatechs.mchat.MainActivity cannot be cast to android.support.v7.app.ActionBarActivity
at com.marothiatechs.mchat.Chats.onCreateView(Chats.java:40)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:2189)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1299)
at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1528)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1595)
at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:757)
at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2355)
at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2146)
at android.support.v4.app.FragmentManagerImpl.optimizeAndExecuteOps(FragmentManager.java:2098)
at android.support.v4.app.FragmentManagerImpl.execSingleAction(FragmentManager.java:1979)
at android.support.v4.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:626)
at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:143)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1268)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1116)
at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1642)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.support.design.widget.CoordinatorLayout.onMeasureChild(CoordinatorLayout.java:714)
at android.support.design.widget.HeaderScrollingViewBehavior.onMeasureChild(HeaderScrollingViewBehavior.java:90)
at android.support.design.widget.AppBarLayout$ScrollingViewBehavior.onMeasureChild(AppBarLayout.java:1375)
at android.support.design.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:784)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:139)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
at android.view.View.measure(View.java:18809)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
at com.android.internal.policy.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2643)
at android.view.View.measure(View.java:18809)
at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2112)
at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1228)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1464)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1119)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6060)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858)
at android.view.Choreographer.doCallbacks(Choreographer.java:670)
at android.view.Choreographer.doFrame(Choreographer.java:606)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
at andro

Khalifa Kane

tanks you!

Oleh Jazz

Good day, sir. I think, i did all step by step from your tutorial. Realy thank you for it.
But i have a problem with application. Idk why, but i cant open this application on device emulator. Without any errors. Only “MChat has stopped”. Can you help me, pls? my e-mail: olegtruefalse@gmai.com / or here.

Shachak Gil

Hi, thanks for this post, it’s really helpful.
I ran into a problem that I don’t know how to fix and maybe someone here could help. Everything runs perfectly, I followed every step of this post and there are no errors in my code. The only problem is that when I try to send a text, nothing happens when I press the send button.
Does anyone know why this might happen, and perhaps it happened to anyone else here?
I know this is a very general question, but thanks for the helpers.

Simran Sharma

it show me error in chatsadapter and chats .java fie in chatlist and chatmessagelist how i solve what i do please help me reply soon as possible

Gustavo M. Severo

Very nice! But I didn’t understand where you specify when you send message from tab “Chat” the message goes to tab “Chat”, do you understand what I’m saying?
Thank you for your attention

Ashwin Parmar

When tap on Chats Tab it will be blank. nothing to show.

Akash Kumar

Thank you tutorials Face I got whatsApp row ui and special thanks for icons.

There are multiple ready-made solutions is spread out in the ready-go market. To build a chat app like WhatsApp the best and instant way is choosing the readymade solution. One should try! http://bit.ly/2AfTrPY