If it's "theirs", it goes on the left, in grey. If it's "ours", we display the message on the right, in blue. We set the TextView's text, then decide if it's "our" message or "theirs". We do three things: 1) configure the actual text display, 2) decide if we need to show a username 3) determine how much spacing we have between messages.įirst, let's see how we configure the actual text and render our bubble message:
#Android messages bubbles how to
Let's focus on the actual messages to start we'll look at how to render the date separators after. In our case, we'll focus on two, the actual messages and date separators we'll ignore any other message type and remove them from rendering, entirely. For example, you may get a message type that indicates a user is typing or a date separator. Stream has a few different message types, which represent different things. We're given a ChannelState and MessageListItem, which has everything we need to figure out our display. Let's dive in! The bind method is where we configure how the message looks: You can check out MessageViewListStyle to see all the ways you can customize the components without building your own class with that said, in this post, we want to explore how to do it ourselves! We'll ignore setStyle for this tutorial since we'll be defining all of our styles outright. Implementing this abstract class requires us to implement setStyle and bind. To get the correct colors and shapes, we'll use drawables and some logic in our class to define how the message will look this layout is simply the scaffolding for us to fill in. This view is quite simple, as it defines the three pieces we referenced before: the header spacing, the username, and the text. We also have a MessageListItem and ChannelState, which contain data for our Stream message and channel, respectively. From this, we grab our message header (which will just be spacing, in our case), our text view that will hold the message, and our username view. Then, this view is referred to by itemView. We're passed a viewGroup resource from the factory (we will be using " bubble_message"). To hook into Stream's components, we need to be a subclass of BaseMessageListItemViewHolder. We're ready to declare our custom bubble view. Now that we're hooked into the view rendering, we can customize our messages to look like iMessage or WhatsApp! Rendering Custom Bubble Messages This class is straightforward since all we're going to do is instantiate our bubble message class, BubbleMessageViewHolder:
#Android messages bubbles code
This "factory" hooks into Stream's code to provide a custom view for each message. However, we customize the MessageListView view by providing a custom message view "factory", BubbleMessageViewHolderFactory. We use the built-in Stream view model and feed that to each view. MessageListView displays our messages, and MessageInputView gives us a helpful default message input. ChannelHeaderView gives us a nice header with a channel image and channel name (from the parent). You'll notice this was another ConstraintLayout with some views and progress bars we use Stream's UI Components to build the majority of the view. Here is the code:įirst, we get our channel information off of the Intent from our ChannelActivity.newIntent call, in MainActivity.kt, and, then, below, we set our content view activity_channel and viewModel:
Once a user clicks a channel, our ChannelActivity starts. Now, we're ready to view a specific channel! Viewing a Channel Since the view is mostly taken care of by Stream, we just need to configure when it is that our ProgressBars show and what our padding and margin are. We use a ConstraintLayout to hold our ChannelListView and associated ProgressBars. Before we look at the code for ChannelActivity let's look at the layout: We boot a ChannelActivity, which is where we'll customize the chat messages. The last thing we do is set a "click listener" on each channel.
We simply need to configure it to filter for our user's channels. This is great, as it does all the work to interact with Stream's API. Now, the view needs a view model in this case, we'll simply use the default, Stream-provided " ChannelListViewModel".
Once we've done this, we can declare the layout as " activity_main". We also give the user an id, a name, and an image(profile image). In a real application, you'd want to perform authentication with a backend that generates this token. To keep things simple, we'll just declare who's logged in and their frontend token. We configure it with the user who'll be using our application. Here's the code:įirst, we initialize our StreamChat instance with our API key. To list our channels, the MainActivity.kt will leverage Stream's ChannelList, and we'll configure it to load all of the channels for our user. This view is mostly taken care of by Stream's UI Components.
0 kommentar(er)
