I made the FriendlyChat using firebase
However all the texts are appearing in same line, both from sender and receiver!
I want to apply chat bubbles with left and right alignment but have no idea where to start
I also want to wrap the text view inside chat bubble images? but i have no idea how to do that?
any help!
public class MessageAdapter extends ArrayAdapter<FriendlyMessage> {
public MessageAdapter(Context context, int resource, List<FriendlyMessage> objects) {
super(context, resource, objects);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.item_message, parent, false);
}
ImageView photoImageView = (ImageView) convertView.findViewById(R.id.photoImageView);
TextView messageTextView = (TextView) convertView.findViewById(R.id.messageTextView);
TextView authorTextView = (TextView) convertView.findViewById(R.id.nameTextView);
FriendlyMessage message = getItem(position);
boolean isPhoto = message.getPhotoUrl() != null;
if (isPhoto) {
messageTextView.setVisibility(View.GONE);
photoImageView.setVisibility(View.VISIBLE);
Glide.with(photoImageView.getContext())
.load(message.getPhotoUrl())
.into(photoImageView);
} else {
messageTextView.setVisibility(View.VISIBLE);
photoImageView.setVisibility(View.GONE);
messageTextView.setText(message.getText());
}
authorTextView.setText(message.getName());
return convertView;
}
}
item_message.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:orientation="vertical">
<ImageView
android:id="#+id/photoImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/messageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0"
android:background="#drawable/messenger_bubble_large_white"
android:padding="2dp"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Message" />
<TextView
android:id="#+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:textAppearance="?android:attr/textAppearanceSmall"
tools:text="Name" />
</LinearLayout>
Hi #Parjanya you have have to check type and based upon condition yo can hide one and show other
for me I used 2 different viewHolder and 2 different xml. My code is below;
MessageChatAdapter.java;
public class MessageChatAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private List<ChatMessage> mChatList;
public static final int SENDER = 0;
public static final int RECIPIENT = 1;
public MessageChatAdapter(List<ChatMessage> listOfFireChats) {
mChatList = listOfFireChats;
}
#Override
public int getItemViewType(int position) {
if (mChatList.get(position).getRecipientOrSenderStatus() == SENDER) {
return SENDER;
} else {
return RECIPIENT;
}
}
#Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
RecyclerView.ViewHolder viewHolder;
LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
switch (viewType) {
case SENDER:
View viewSender = inflater.inflate(R.layout.layout_sender_message, viewGroup, false);
viewHolder = new ViewHolderSender(viewSender);
break;
case RECIPIENT:
View viewRecipient = inflater.inflate(R.layout.layout_recipient_message, viewGroup, false);
viewHolder = new ViewHolderRecipient(viewRecipient);
break;
default:
View viewSenderDefault = inflater.inflate(R.layout.layout_sender_message, viewGroup, false);
viewHolder = new ViewHolderSender(viewSenderDefault);
break;
}
return viewHolder;
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
switch (viewHolder.getItemViewType()) {
case SENDER:
ViewHolderSender viewHolderSender = (ViewHolderSender) viewHolder;
configureSenderView(viewHolderSender, position);
break;
case RECIPIENT:
ViewHolderRecipient viewHolderRecipient = (ViewHolderRecipient) viewHolder;
configureRecipientView(viewHolderRecipient, position);
break;
}
}
private void configureSenderView(ViewHolderSender viewHolderSender, int position) {
ChatMessage senderFireMessage = mChatList.get(position);
viewHolderSender.getSenderMessageTextView().setText(senderFireMessage.getMessage());
viewHolderSender.getmTimeStamp().setText(converteTimestamp(senderFireMessage.getTimestap()));
}
private void configureRecipientView(ViewHolderRecipient viewHolderRecipient, int position) {
ChatMessage recipientFireMessage = mChatList.get(position);
viewHolderRecipient.getRecipientMessageTextView().setText(recipientFireMessage.getMessage());
viewHolderRecipient.getmTimeStamp().setText(converteTimestamp(recipientFireMessage.getTimestap()));
}
/*==============ViewHolder===========*/
/*ViewHolder for Sender*/
public class ViewHolderSender extends RecyclerView.ViewHolder {
private TextView mSenderMessageTextView;
private TextView mTimeStamp;
public ViewHolderSender(View itemView) {
super(itemView);
mSenderMessageTextView = (TextView) itemView.findViewById(R.id.text_view_sender_message);
mTimeStamp = (TextView) itemView.findViewById(R.id.textView2);
}
public TextView getSenderMessageTextView() {
return mSenderMessageTextView;
}
public TextView getmTimeStamp() {
return mTimeStamp;
}
}
/*ViewHolder for Recipient*/
public class ViewHolderRecipient extends RecyclerView.ViewHolder {
private TextView mRecipientMessageTextView;
private TextView mTimeStamp;
public ViewHolderRecipient(View itemView) {
super(itemView);
mRecipientMessageTextView = (TextView) itemView.findViewById(R.id.text_view_recipient_message);
mTimeStamp = (TextView) itemView.findViewById(R.id.textView2);
}
public TextView getRecipientMessageTextView() {
return mRecipientMessageTextView;
}
public TextView getmTimeStamp() {
return mTimeStamp;
}
}
layout_sender_message.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view_sender_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="I am doing ok"
android:padding="8dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="2dp"
android:textStyle="bold"
android:textSize="14sp"
android:textColor="#FFFFFF"
android:background="#drawable/sender_rounded_corners"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/textView2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/text_view_sender_message"
android:layout_gravity="bottom"
android:layout_toLeftOf="#id/text_view_sender_message"
android:text="TextView"
android:textSize="12sp"
android:textStyle="italic"/>
</RelativeLayout>
layout_recipient_message.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view_recipient_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Hi. How are you?"
android:padding="8dp"
android:textStyle="bold"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="2dp"
android:textColor="#727272"
android:textSize="15sp"
android:background="#drawable/recipient_rounded_corners"/>
<TextView
android:id="#+id/textView2"
android:layout_width="69dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/text_view_recipient_message"
android:text="TextView"
android:textSize="12sp"
android:layout_gravity="bottom"
android:textStyle="italic"/>
</LinearLayout>
Pretty basic and needs to be fixed but this will give you a headstart.
I think you should use two different custom components for chat left and right bubbles.
Set as a background of TextView and make the boolean condition for show and hide two chat bubbles.
If you want more information and demo with use of firebase then please check below link:
https://www.androidtutorialpoint.com/firebase/real-time-android-chat-application-using-firebase-tutorial/
I hope it helps you.
Thank you:)
Just two words Answer...
Use Gravity
eg
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) _chat_view.getLayoutParams();
lp.gravity = Gravity.END | Gravity.RIGHT;
_chat_view.setLayoutParams(lp);
where _chat_view is your Message (LinearLayout) container.
Related
Please, the listview with just 3 textview (there is no image) it was working very fine when it was taking the full screen in height and width.
and after i have been change it to take the half of screen in height, it became scrolling very slow.
layout for rows in listView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="4dp"
android:layout_marginEnd="16dp"
android:layout_toStartOf="#id/timer_row">
<TextView
android:id="#+id/name_row"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="#dimen/main_title_size"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/author_row"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/main_timer_size"
android:textColor="#color/white"
android:layout_below="#id/name_row"
android:layout_marginTop="16dp"
android:layout_alignParentStart="true"/>
</RelativeLayout>
<TextView
android:id="#+id/timer_row"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/main_timer_size"
android:layout_margin="16dp"
android:padding="8dp"
android:textAlignment="center"
android:textColor="#color/white"
android:gravity="center"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
and the adapter with the viewholder
public class MusicAdapter extends BaseAdapter {
private ArrayList<Music> list;
private LayoutInflater layoutInflater;
MusicAdapter(Context context, ArrayList<Music> list) {
this.list = list;
layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return list.size();
}
#Override
public Object getItem(int position) {
return list.get(position);
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.music_row, parent, false);
viewHolder = new ViewHolder(convertView);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
Music music = (Music) getItem(position);
viewHolder.title.setText(music.getName());
viewHolder.author.setText(music.getAuthor());
viewHolder.timer.setText(music.getTimer());
return convertView;
}
static class ViewHolder{
TextView title,author,timer;
ViewHolder(View v)
{
this.title = v.findViewById(R.id.name_row);
this.author = v.findViewById(R.id.author_row);
this.timer = v.findViewById(R.id.timer_row);
}
}
}
You should try to use RecyclerView instead of ListView: https://developer.android.com/guide/topics/ui/layout/recyclerview
I'm making a chat app and I'm having some trouble with the layout of my messages. I want the messages send by the logged in user to be aligned to the right of the layout and the messages send by other group members to be aligned to the left.
This is my xml file:
<android.support.constraint.ConstraintLayout
android:id="#+id/container_message"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<ImageView
android:id="#+id/user_image"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="8dp"
android:src="#color/colorBlack"
app:layout_constraintBottom_toBottomOf="#+id/container_message_text"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/date_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/rubik_light"
android:text="19 juni, 00:32"
android:textSize="10sp"
app:layout_constraintStart_toStartOf="#+id/container_message_text"
app:layout_constraintTop_toBottomOf="#+id/container_message_text" />
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:paddingStart="12dp"
android:paddingTop="12dp"
android:paddingEnd="12dp"
app:cardBackgroundColor="#color/colorTextWhite"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
app:layout_constraintStart_toStartOf="parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="12dp"
android:paddingTop="7dp"
android:paddingEnd="12dp"
android:paddingBottom="7dp">
<TextView
android:id="#+id/message_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/rubik"
android:textSize="16sp"
android:maxWidth="240dp" />
</FrameLayout>
</android.support.v7.widget.CardView>
Picture of the current layout:
I need the purple messages to be aligned to the right, how can this be done programmatically?
You should better try chat layout using two different layouts for sender's message and yours message and if you are using recyclerview then the following adapter might help you.
public class MessageListAdapter extends RecyclerView.Adapter {
private static final int VIEW_TYPE_MESSAGE_SENT = 1;
private static final int VIEW_TYPE_MESSAGE_RECEIVED = 2;
private Context mContext;
private List<UserMessage> mMessageList;
public MessageListAdapter(Context context, List<UserMessage> messageList) {
mContext = context;
mMessageList = messageList;
}
#Override
public int getItemCount() {
return mMessageList.size();
}
// Determines the appropriate ViewType according to the sender of the message.
#Override
public int getItemViewType(int position) {
UserMessage message = (UserMessage) mMessageList.get(position);
if (message.getSender().getUserId().equals(currentUserId)) {
// If the current user is the sender of the message
return VIEW_TYPE_MESSAGE_SENT;
} else {
// If some other user sent the message
return VIEW_TYPE_MESSAGE_RECEIVED;
}
}
// Inflates the appropriate layout according to the ViewType
#Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
if (viewType == VIEW_TYPE_MESSAGE_SENT) {
view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_message_sent, parent, false);
return new SentMessageHolder(view);
} else if (viewType == VIEW_TYPE_MESSAGE_RECEIVED) {
view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_message_received, parent, false);
return new ReceivedMessageHolder(view);
}
return null;
}
// Passes the message object to a ViewHolder so that the contents can be bound to UI.
#Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
UserMessage message = (UserMessage) mMessageList.get(position);
switch (holder.getItemViewType()) {
case VIEW_TYPE_MESSAGE_SENT:
((SentMessageHolder) holder).bind(message);
break;
case VIEW_TYPE_MESSAGE_RECEIVED:
((ReceivedMessageHolder) holder).bind(message);
}
}
private class SentMessageHolder extends RecyclerView.ViewHolder {
SentMessageHolder(View itemView) {
super(itemView);
//bind views
}
void bind(UserMessage message) {
//set values
}
}
private class ReceivedMessageHolder extends RecyclerView.ViewHolder {
ReceivedMessageHolder(View itemView) {
super(itemView);
//bind views
}
void bind(UserMessage message) {
//set values
}
}
}
I am trying to create my own custom firebase recycler adapter for a chat app. I want to inflate two views in the adapter, one for the sender and one for the receiver, but don't know how.
How shall I proceed with this?
To inflate different views in a RecyclerView, you need to implement this function in your adapter:
public int getItemViewType(int position);
This function is called before onCreateViewHolder and allows you to return an int depending on the type of the view you want to inflate. You can imagine using an enum to achieve this:
public enum TYPE {
SENDER,
RECEIVER
}
This way you will return an int depending on the type (with type.ordinal()).
Then you will get your type on the function onCreateViewHolder(ViewGroup parent, int viewType), you will be able to match you type again TYPE.values()[viewType]. This way you will return the inflated layout depending on the type.
Finally on onBindViewHolder(TimelineItemViewHolder holder, int position), you will be able either to:
Call getItemViewType(int position) to know how to cast and display your contents
Using instanceof be able to detect what is the type of the ViewHolder you are looking at
Use an abstract class, extending RecyclerView.ViewHolder shared by your two ViewHolder, allowing you to call a common function, like display(MyObject object)
private static final int RIGHT_MSG = 0;
private static final int LEFT_MSG = 1;
/*Viewholder for messages*/
public static class MessageViewHolder extends RecyclerView.ViewHolder {
public EmojiconTextView messageTextView;
public TextView messengerTextView;
public CircleImageView messengerImageView;
public ImageView sendimage;
public ImageView videoview;
public TextView messageTime;
public MessageViewHolder(View v) {
super(v);
messageTextView = (EmojiconTextView) itemView.findViewById(R.id.messageTextView);
messengerTextView = (TextView) itemView.findViewById(R.id.messengerTextView);
messengerImageView = (CircleImageView) itemView.findViewById(R.id.messengerImageView);
sendimage = (ImageView) itemView.findViewById(R.id.image);
videoview = (ImageView) itemView.findViewById(R.id.videoview);
messageTime = (TextView)itemView.findViewById(R.id.message_time);
}
/*Firebase recycler Adapter*/
mFirebaseAdapter = new FirebaseRecyclerAdapter < FriendlyMessage, MessageViewHolder > (
FriendlyMessage.class, R.layout.item_message, MessageViewHolder.class,
mFirebaseDatabaseReference.child(MESSAGES_CHILD)) {
#Override
protected void populateViewHolder(final MessageViewHolder viewHolder, final FriendlyMessage friendlyMessage, int position) {
mProgressBar.setVisibility(ProgressBar.INVISIBLE);
viewHolder.messageTextView.setText(friendlyMessage.getText());
viewHolder.messengerTextView.setText(friendlyMessage.getName());
viewHolder.messageTime.setText(DateFormat.format("MMM d, yyyy hh:mm a", friendlyMessage.getMessageTime()));
if (friendlyMessage.getPhotoUrl() == null) {
viewHolder.messengerImageView.setImageDrawable(ContextCompat.getDrawable(Chat.this,
R.drawable.ic_account_circle_black_36dp));
} else {
Glide.with(Chat.this).load(friendlyMessage.getPhotoUrl()).into(viewHolder.messengerImageView);
}
//for show send image
if (friendlyMessage.getImageUrl() == null) {
viewHolder.sendimage.setVisibility(View.GONE);
} else {
viewHolder.sendimage.setVisibility(View.VISIBLE);
Glide.with(Chat.this).load(friendlyMessage.getImageUrl()).into(viewHolder.sendimage);
}
//to show the videoattach in videoview
if (friendlyMessage.getVideoUrl() == null) {
Glide.with(Chat.this).load("").placeholder(R.drawable.videoiconcrop).into(viewHolder.videoview);
//viewHolder.videoview.setVisibility(View.GONE);
} else {
viewHolder.videoview.setVisibility(View.VISIBLE);
}
}
#Override
public MessageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
if (viewType == RIGHT_MSG) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_viewholder2, parent, false);
return new MessageViewHolder(view);
} else {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_viewholder1, parent, false);
return new MessageViewHolder(view);
}
}
#Override
public int getItemViewType(int position) {
FriendlyMessage model = getItem(position);
if (model.getContactNumber().equals(UserDetails.contact)) {
return RIGHT_MSG;
} else {
return LEFT_MSG;
}
}
};
/*Xml for messages i try to provide you one side try to make another side by using id same as this layout*/
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:emojicon="http://schemas.android.com/apk/res-auto">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/messengerImageView"
android:src="#drawable/ic_account_circle_black_36dp"/>
<FrameLayout
android:id="#+id/incoming_layout_bubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="60dp"
android:layout_alignParentLeft="true"
android:background="#drawable/balloon_incoming_normal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold|italic"
android:text="Receiver"
android:textSize="16dp"
android:layout_marginRight="50dp"
android:layout_marginBottom="10dp"
android:paddingBottom="12dp"
android:layout_marginLeft="6dp"
android:layout_above="#+id/messageTextView"
android:id="#+id/messengerTextView"
android:layout_weight="0"/>
<hani.momanii.supernova_emoji_library.Helper.EmojiconTextView
android:id="#+id/messageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dp"
android:layout_marginTop="18dp"
android:layout_marginBottom="10dp"
android:autoLink="web"
android:text="Rahul Agrawal is a good boy but he does not know what he wants."
style="#style/chat_text_message_style"
emojicon:emojiconSize="30sp"/>
<TextView
android:id="#+id/message_time"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingRight="5dp"
android:text="11:15 PM"
android:layout_marginLeft="6dp"
style="#style/chat_timings"
android:layout_gravity="bottom|right"/>
<ImageView
android:id="#+id/image"
android:layout_width="150dp"
android:layout_height="160dp"
android:src="#drawable/ic_account_circle_black_36dp"
android:contentDescription="send_photo"
android:visibility="gone"
android:layout_marginTop="23dp"
android:layout_marginBottom="18dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_gravity="center"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="150dp"
android:layout_height="120dp"
android:id="#+id/videoview"
android:contentDescription="send_video"
android:src="#drawable/videoiconcrop"
android:layout_marginTop="20dp"
android:layout_marginBottom="18dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_gravity="center"
android:visibility="gone"
/>
</FrameLayout>
</LinearLayout>
may be this code help you out Happy Coding
Based on my previous question , I have a problem with onClick on CardView in my RecyclerView. I need to change the card layout when the CardView is clicked with another card layout xml. I follow this and this this but its not work. I dont too understand how to declare one CardView layout again in my code. Here my Code :
Adapter.Java
public class Adapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
public static final int view1 = 0;
public static final int view2 = 1;
private static OnRecyclerViewItemClickedListener recyclerViewItemClickedListener;
public void setOnRecyclerViewClickedListener (OnRecyclerViewItemClickedListener l) {
recyclerViewItemClickedListener = l;
}
public interface OnRecyclerViewItemClickedListener {
void OnRecyclerViewItemClicked(int position);
void OnRecyclerViewItemBind(ViewHolder holder, int position);
int OnRecyclerViewItemCount();
}
public Adapter() {
super();
}
#Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView;
if (viewType == view1) {
itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.table_item_empty, parent, false);
return new ViewHolder(itemView);
}
else if (viewType == view2) {
itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.table_item_occupied, parent, false);
return new ViewHolder2(itemView);
}
return null;
}
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
recyclerViewItemClickedListener.OnRecyclerViewItemBind((ViewHolder) holder, position);
}
#Override
public int getItemCount() {
return recyclerViewItemClickedListener.OnRecyclerViewItemCount();
}
public int getItemViewType() { return recyclerViewItemClickedListener.getItemViewType(); }
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public TextView txt_no_table;
public TextView txt_no_table_occ;
public TextView txt_pax_occ;
public TextView txt_guest_name_occ;
public TextView txt_bill_occ;
public Chronometer txt_time_occ;
public CardView cardview_table;
public LinearLayout title_layout;
public ViewHolder(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
txt_no_table = (TextView) itemView.findViewById(R.id.txt_no_table_empty);
txt_no_table_occ = (TextView) itemView.findViewById(R.id.txt_no_table);
txt_pax_occ = (TextView) itemView.findViewById(R.id.txt_pax);
txt_guest_name_occ = (TextView)itemView.findViewById(R.id.txt_guestname);
txt_bill_occ = (TextView) itemView.findViewById(R.id.txt_bill);
txt_time_occ = (Chronometer) itemView.findViewById(R.id.txt_time);
cardview_table = (CardView) itemView.findViewById(R.id.table_card_empty);
title_layout = (LinearLayout) itemView.findViewById(R.id.table_ll1);
}
#Override
public void onClick(View itemView) {
recyclerViewItemClickedListener.OnRecyclerViewItemClicked(getAdapterPosition());
}
}
public class ViewHolder2 extends RecyclerView.ViewHolder implements View.OnClickListener {
public TextView txt_no_table2;
public TextView txt_pax2;
public TextView txt_guest_name2;
public TextView txt_bill2;
public TextView txt_time2;
public ViewHolder2 (View itemView) {
super(itemView);
itemView.setOnClickListener(this);
txt_no_table2 = (TextView) itemView.findViewById(R.id.txt_no_table_);
txt_pax2 = (TextView) itemView.findViewById(R.id.txt_pax_);
txt_guest_name2 = (TextView)itemView.findViewById(R.id.txt_guestname_);
txt_bill2 = (TextView) itemView.findViewById(R.id.txt_bill_);
txt_time2 = (TextView) itemView.findViewById(R.id.txt_time_);
}
#Override
public void onClick(View itemView) {
recyclerViewItemClickedListener.OnRecyclerViewItemClicked(getAdapterPosition());
}
}
}
Here My Activity :
adapter.setOnRecyclerViewClickedListener(new Adapter.OnRecyclerViewItemClickedListener() {
#Override
public void OnRecyclerViewItemClicked(int position) {
try {
JSONObject currTable = filteredTableList.getJSONObject(position);
if (currTable.has("selected")) {
currTable.put("selected", !currTable.getBoolean("selected"));
} else {
currTable.put("selected",true);
}
adapter.notifyItemChanged(position);
} catch (JSONException e) {
e.printStackTrace();
}
try
{
Toast.makeText(TableActivity.this, filteredTableList.getJSONObject(position).getString("tischnr"), Toast.LENGTH_SHORT).show();
}
catch (JSONException e) {
e.printStackTrace();
}
}
#Override
public void OnRecyclerViewItemBind(Adapter.ViewHolder holder, int position) {
try {
JSONObject currTable = filteredTableList.getJSONObject(position);
holder.txt_no_table.setText(currTable.getString("tischnr"));
holder.txt_guest_name_occ.setText("");
holder.txt_pax_occ.setText("");
holder.txt_bill_occ.setText("");
int queasy33Index = ProgramMethod.getJSONArrayIndex(queasy33List,"number2", currTable.getInt("tischnr"));
if (queasy33Index >= 0) {
holder.txt_guest_name_occ.setText(queasy33List.getJSONObject(queasy33Index).getString("char2"));
holder.txt_pax_occ.setText(queasy33List.getJSONObject(queasy33Index).getString("number3"));
}
if (currTable.has("selected") && currTable.getBoolean("selected")) {
holder.itemView.setBackgroundResource(R.color.colorRedTableOcc);
holder.txt_no_table.setVisibility(View.INVISIBLE);
holder.txt_no_table_occ.setVisibility(View.VISIBLE);
holder.txt_bill_occ.setVisibility(View.VISIBLE);
holder.txt_pax_occ.setVisibility(View.VISIBLE);
holder.txt_time_occ.setVisibility(View.VISIBLE);
holder.txt_guest_name_occ.setVisibility(View.VISIBLE);
} else {
holder.itemView.setBackgroundResource(R.color.colorTableGreen);
holder.txt_no_table.setVisibility(View.VISIBLE);
holder.txt_no_table_occ.setVisibility(View.INVISIBLE);
holder.txt_bill_occ.setVisibility(View.INVISIBLE);
holder.txt_pax_occ.setVisibility(View.INVISIBLE);
holder.txt_time_occ.setVisibility(View.INVISIBLE);
holder.txt_guest_name_occ.setVisibility(View.INVISIBLE);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
#Override
public int OnRecyclerViewItemCount() {
return filteredTableList.length();
}
});
My table_item_empty.xml (first layout) :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/table_card_empty"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/colorTableGreen"
app:cardCornerRadius="15dp"
app:cardElevation="5dp"
android:layout_margin="3dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="2dp"
android:gravity="center">
<RelativeLayout
android:id="#+id/table_rl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/table_ll1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/txt_no_table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="15dp"
android:gravity="center"
android:textColor="#color/colorWhite"
android:visibility="invisible"/>
</LinearLayout>
<TextView
android:id="#+id/txt_pax"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="5"
android:textSize="10dp"
android:textColor="#color/colorWhite"
android:drawableLeft="#drawable/ic_airline_seat_recline_normal_white_18dp"
android:visibility="invisible"/>
<TextView
android:id="#+id/txt_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10:00"
android:textSize="10dp"
android:textColor="#color/colorWhite"
android:drawableLeft="#drawable/ic_access_time_white_18dp"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/txt_pax"
android:layout_marginStart="2dp"
android:visibility="invisible"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/table_rl2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/table_rl1">
<TextView
android:id="#+id/txt_guestname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="Budi"
android:textSize="10dp"
android:textColor="#color/colorWhite"
android:drawableLeft="#drawable/ic_supervisor_account_white_18dp"
android:visibility="invisible"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/table_rl2">
<TextView
android:id="#+id/txt_bill"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10000"
android:drawableLeft="#drawable/ic_attach_money_white_18dp"
android:textSize="10dp"
android:textColor="#color/colorWhite"
android:layout_marginStart="1dp"
android:visibility="invisible"/>
</RelativeLayout>
<TextView
android:id="#+id/txt_no_table_empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
android:textSize="25dp"
android:gravity="center_vertical|center_horizontal"
android:textColor="#color/colorWhite"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>
App looks like :
My code make a first layout gone when i clicked but i want to show/change another card layout.
This is CardView1 Looks like :
Another CardView xml (CardView2) :
EDITED :
I trick it. Now when one or more item clicked, it will change the view into like this :
But i still want to try with two different layout.xml view when item clicked. Its work because i only 'play' with 'INVISIBLE' and 'VISIBLE' in element on one layout, not the xml.
[EDITED] :
I'm still try to make my RecyclerView with two Layout view. I improve my Adapter like above. I follow this but i get a litle problem. In my Acivity, i call my itemView from ViewHolder1 with holder (example: holder.txt_time....) like my code above. I want to know how i can call my second holder (ViewHolder2) in my Activity? I try to make hard code with add some listener but its not work for me :(
Maybe somebody can help and guide me to fix my code. Every answer will helpful for me. Thanks before.
I do design. And i am not know how.
if I clik on the item, should appear red view in right side.
I am use GridView and my adapter public class BasketAdapter extends BaseAdapter
Item XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="142dp"
android:layout_height="wrap_content"
android:background="#eceff3"
android:paddingBottom="1dp">
<RelativeLayout
android:orientation="vertical"
android:layout_width="141.25dp"
android:layout_height="138.75dp"
android:background="#fff">
<ImageView
android:layout_width="65dp"
android:layout_height="65dp"
android:id="#+id/goodImage"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="27dp"
android:layout_below="#+id/goodImage"
android:layout_marginTop="11dp"
android:id="#+id/linearLayout3"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="28.75dp"
android:layout_marginRight="28.75dp">
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:text="bascetName"
android:id="#+id/bascetName"
android:textSize="12.50sp"
android:textStyle="bold"
android:textColor="#333333"
android:ellipsize="end"
android:singleLine="false"
android:gravity="center_horizontal" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$1.23"
android:id="#+id/bascetPrice"
android:textSize="13.75sp"
android:layout_gravity="center_horizontal"
android:textColor="#ffc600"
android:layout_below="#+id/linearLayout3"
android:layout_centerHorizontal="true"
android:layout_marginTop=" 8.75dp" />
<ImageView
android:layout_width="32dp"
android:layout_height="38.50dp"
android:id="#+id/countImage"
android:src="#drawable/count"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/basketQuantity"
android:textSize="12.50sp"
android:textStyle="bold"
android:layout_gravity="right"
android:autoText="false"
android:textColor="#ffffff"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp" />
</RelativeLayout>
</LinearLayout>
adapter
public class BasketAdapter extends BaseAdapter implements View.OnClickListener {
private List<ShoppingCart> items;
private AnimateFirstDisplayListener animateFirstDisplayListener = new AnimateFirstDisplayListener();
private DisplayImageOptions options = ILOptions.getOption();
private Typeface font;
public BasketAdapter(List<ShoppingCart> items) {
this.items = items;
}
#Override
public int getCount() {
return items.size();
}
#Override
public ShoppingCart getItem(int position) {
return items.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (null == convertView) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
font = Fonts.getBlockBertholdRegular(parent.getContext());
convertView = inflater.inflate(R.layout.basket_item, parent, false);
holder = new ViewHolder();
holder.name = (TextView) convertView.findViewById(R.id.bascetName);
holder.price = (TextView) convertView.findViewById(R.id.bascetPrice);
holder.imageView = (ImageView) convertView.findViewById(R.id.goodImage);
holder.imageCount = (ImageView) convertView.findViewById(R.id.countImage);
holder.quantity = (TextView) convertView.findViewById(R.id.basketQuantity);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.name.setText(items.get(position).getItem().getName().toUpperCase());
holder.name.setTypeface(font, Typeface.BOLD);
holder.price.setText("$" + items.get(position).getTotal());
holder.price.setTypeface(font, Typeface.NORMAL);
ImageLoader.getInstance().displayImage(items.get(position).getItem().getImage(), holder.imageView, options, animateFirstDisplayListener);
if (items.get(position).getItemCount() == 1) {
holder.imageCount.setVisibility(View.GONE);
holder.quantity.setVisibility(View.GONE);
} else {
holder.quantity.setText(String.valueOf(items.get(position).getItemCount()));
holder.quantity.setTypeface(font, Typeface.BOLD);
}
convertView.setOnClickListener(this);
return convertView;
}
#Override
public void onClick(View v) {
Toast.makeText(v.getContext(),"cvcxvfdg",Toast.LENGTH_LONG).show();
}
private static class ViewHolder {
TextView name;
TextView price;
ImageView imageView;
ImageView imageCount;
TextView quantity;
}
}
I will add something else if necessary. may have a library ready?
Change your ImageView by click gridview item:
gridView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
ViewHolder holder = (ViewHolder)view.getTag();
//set your new image here
holder.imageview.setImageResource(R.id.yourImage);
... ...
//maybe also update items content in 'position' if need
}
});
Hope this help!