ScrollView not scrolls my messages down in chat application. Android

Question

I'm developing an android chat application.

Here is my xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:emojicon="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/welcomeChat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Welcome to this chat"
        android:textAlignment="center"
        android:textColor="@color/textColor"
        android:textSize="20sp" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/messagePart"
        android:layout_below="@id/welcomeChat">

        <LinearLayout
            android:layout_gravity="bottom"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <RelativeLayout
        android:id="@+id/messagePart"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white">

        <ImageView
            android:id="@+id/emoji_btn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:padding="4dp"
            android:src="@drawable/smiley" />

        <ImageView
            android:id="@+id/submit_btn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:padding="4dp"
            android:src="@android:drawable/ic_menu_send" />

        <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
            android:id="@+id/emojicon_edit_text"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:layout_alignTop="@+id/emoji_btn"
            android:layout_toLeftOf="@id/submit_btn"
            android:layout_toRightOf="@id/emoji_btn"
            android:background="@drawable/edittext_corner"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@color/black"
            android:textSize="20dp"
            emojicon:emojiconSize="28sp" />

    </RelativeLayout>


</RelativeLayout>

I tried also ScrollView. Not works. My problem is, when I'm getting some messages and it goes out of screen, I can't scroll them down. I don't know where's the problem. ListView will fix my problems, but I also need to send images too.

or better, how is the listview usage is related to the send image functionality? — Pier Giorgio Misley, Apr 20 '18 at 13:09
In chat application you can send messages images and some other type of files. In my application user can send simple text and images. Watch the problem. If I create a listView, I need to create one item.xml for this listView right? In that xml I have to give textView. If I'll add there imageView too, then every item in listview must have text and image. — Hayk Mkrtchyan, Apr 20 '18 at 13:11

score 0 · Answer 1 · answered Apr 20 '18 at 13:26

Disclaimer: I wrote it by hand, with no compiler, so it might not be perfect and ready-to-use, so take the concept and the examples/links

The solution is a Recyclerview (or listview, as you want).

Your problem is more that you don't know how to show both text or image with a single list.

(this might be a solution, but I'm going to write anyway my personal explaination here)

For this you need to use a custom adapter. You can refer to this link for a little explaination.

Now, in your adapter you have now two choices:

Create an item.xml file with both a textView and an ImageView

something like this:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="7dp"
        card_view:cardBackgroundColor="@color/white"
        card_view:cardElevation="2dp"
        card_view:contentPaddingBottom="5dp"
        card_view:contentPaddingLeft="5dp"
        card_view:contentPaddingRight="5dp"
        card_view:contentPaddingTop="5dp">


        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="100dp"
            android:layout_marginEnd="45dp"
            android:layout_marginRight="45dp"
            android:text="@string/placeholder"
            android:textColor="@color/textGrey"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/iv"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            />
    </android.support.v7.widget.CardView>

</RelativeLayout>

Now, in the adapter's initialization (I do this in my onBindViewHolder, since I recycle my views), you can perform a quick check like this:

if(check for text){
  iv.setVisibility(View.GONE);
  tv.setVisibility(View.VISIBLE);
  tv.setText(the text);
} else if(check for image){
  tv.setVisibility(View.GONE);
  iv.setVisibility(View.VISIBLE);
  //set iv src as you prefer
}else{
  //dunno what else, maybe error
}

Another option is to create two different xml: textMsg.xml, imgMsg.xml

Now you have to customize your getItemViewType of the adapter

@Override
public int getItemViewType(int position) {
    if (isTextCheck) {
        return 1;
    } else {//it is img
        return 2;
    }
}

And finally in onCreateViewHolder you can return a different view for the viewType returned

 @NonNull
    @Override
    public InterventionActivityFieldViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // ...
        View inflatedView = LayoutInflater.from(ctx)
                .inflate(viewType == 1 ? R.layout.textitem :R.layout.imgitem, parent, false);
        return new myViewHolder();
    }

this is a possible viewholder example.

ScrollView not scrolls my messages down in chat application. Android

1 Answers1