问题
My app has a chat activity which contains a recyclerview. This recyclerview contains two items that display the messages received by the user and the messages sent by the user.
The messages received by the user is aligning from the left of the recyclerview as expected but the messages sent by the user is not aligning from the right of the recyclerview as expected.
This is how it looks right now: The blue colored messages are the messages received and the gray colored messages are the messages sent.
How I need the ui to look: I want the grey colored messages to align from the right of the screen like in the picture below.
CODE
The activity.java file:
public class IMActivity extends AppCompatActivity{
private RecyclerView recyclerView;
private ImAdapter imAdapter;
private List<ChatMsg> chatMsgList = new ArrayList<>();
Socket mSocket;
EditText etIM;
ImageButton ibSend;
String otherUserName;
List<Msg> msgList;
DBAct db;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_im);
Toolbar toolbar = (Toolbar)findViewById(R.id.imlist_toolbar);
setSupportActionBar(toolbar);
etIM = (EditText)findViewById(R.id.et_im);
recyclerView = (RecyclerView)findViewById(R.id.rv_im);
imAdapter = new ImAdapter(chatMsgList);
LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
layoutManager.setStackFromEnd(true);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(imAdapter);
db = new DBAct(IMActivity.this,otherUserName);
msgList = db.getAllMessages();
db.close();
prepareChatData();
}
private void prepareChatData() {
for (int i=0; i<msgList.size(); i++) {
ChatMsg chatMsg = new ChatMsg(msgList.get(i).getMessage(),msgList.get(i).getOther());
chatMsgList.add(chatMsg);
}
imAdapter.notifyDataSetChanged();
}
}
The adapter class file:
public class ImAdapter extends RecyclerView.Adapter <RecyclerView.ViewHolder> {
private List<ChatMsg> chatMsgList = new ArrayList<ChatMsg>();
final int VIEW_TYPE_USER = 1;
final int VIEW_TYPE_OTHER = 0;
public ImAdapter(List<ChatMsg> chatMsgList){
this.chatMsgList = chatMsgList;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType==VIEW_TYPE_USER){
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_msg_user,parent,false);
return new ImUserViewHolder(itemView);
}else {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_msg_other,parent,false);
return new ImOtherViewHolder(itemView);
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder.getItemViewType()==VIEW_TYPE_USER){
ChatMsg chatMsg = chatMsgList.get(position);
ImUserViewHolder imUserViewHolder = (ImUserViewHolder)holder;
imUserViewHolder.msg.setText(chatMsg.getMsg());
}else {
ChatMsg chatMsg = chatMsgList.get(position);
ImOtherViewHolder imOtherViewHolder = (ImOtherViewHolder) holder;
imOtherViewHolder.msg.setText(chatMsg.getMsg());
}
}
@Override
public int getItemViewType(int position) {
ChatMsg chatMsg = chatMsgList.get(position);
if (chatMsg.getOther().equals("true")){
return VIEW_TYPE_OTHER;
}else {
return VIEW_TYPE_USER;
}
}
@Override
public int getItemCount() {
return chatMsgList.size();
}
public class ImOtherViewHolder extends RecyclerView.ViewHolder{
public TextView msg;
public ImOtherViewHolder(View itemView) {
super(itemView);
msg = (TextView)itemView.findViewById(R.id.tv_chat_msg_other);
}
}
public class ImUserViewHolder extends RecyclerView.ViewHolder{
public TextView msg;
public ImUserViewHolder(View itemView) {
super(itemView);
msg = (TextView)itemView.findViewById(R.id.tv_chat_msg_user);
}
}
}
The activity layout.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_im"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.abdralabs.talksee.IMActivity"
android:weightSum="10">
<android.support.design.widget.AppBarLayout
android:id="@+id/im_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/im_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/title">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_im"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:layout_weight="8.7"/>
<RelativeLayout
android:id="@+id/rl_im"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_weight="1.3">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<EditText
android:id="@+id/et_im"
android:layout_width="290dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter message..."
android:inputType="textPersonName">
</EditText>
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/ib_cam_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_camera"
android:layout_gravity="end|center_vertical"/>
</FrameLayout>
<ImageButton
android:id="@+id/ib_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="send"
app:srcCompat="@android:drawable/ic_menu_send" />
</RelativeLayout>
</LinearLayout>
The xml layout of the messages received (blue colored messages):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_im_chat_msg_other"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
android:id="@+id/tv_chat_msg_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is other"
android:textSize="16dp"
android:layout_alignParentTop="true"
android:textColor="@color/black"/>
<TextView
android:id="@+id/tv_time_chat_msg_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textSize="11dp"
android:layout_alignLeft="@+id/tv_chat_msg_other"
android:layout_alignStart="@+id/tv_chat_msg_other"
android:layout_below="@+id/tv_chat_msg_other"/>
</RelativeLayout>
The xml layout of the messages sent (gray colored messages):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:background="@drawable/bg_im_chat_msg_user"
android:gravity="right">
<TextView
android:id="@+id/tv_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is me"
android:background="@drawable/bg_im_chat_msg_user"
android:textColor="@color/black"
android:textSize="16dp"
android:layout_alignParentTop="true" />
<TextView
android:id="@+id/tv_time_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textSize="11dp"
android:layout_alignLeft="@+id/tv_chat_msg_user"
android:layout_alignStart="@+id/tv_chat_msg_user"
android:layout_below="@+id/tv_chat_msg_user" />
</RelativeLayout>
I have set the relative layout's android:gravity="right" so that the gray message will be aligned to the right but apparently this isn't working. I even tried setting the android:layout_gravity="right" but the result is still the same. Could someone please point out what I'm doing wrong?
回答1:
You can for example wrap your RelativeLayout in the gray colored message layout in a FrameLayout and change android:gravity="right" to android:layout_gravity="right".
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_im_chat_msg_user"
android:layout_gravity="right"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp">
<TextView
android:id="@+id/tv_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/bg_im_chat_msg_user"
android:text="this is me"
android:textColor="@color/black"
android:textSize="16dp"/>
<TextView
android:id="@+id/tv_time_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/tv_chat_msg_user"
android:layout_alignStart="@+id/tv_chat_msg_user"
android:layout_below="@+id/tv_chat_msg_user"
android:text="00:00"
android:textSize="11dp"/>
</RelativeLayout>
</FrameLayout>
You could also warp your RelativeLayout in another RelativeLayout and change from android:gravit="right" to android:layout_alignParentRight="true".
来源：https://stackoverflow.com/questions/43104511/item-in-recyclerview-not-aligning-as-expected