Contact Bubble EditText

javascript

prompt-engineering

functions

callbacks

byAnton Shumikhin·Feb 2, 2025

For a straightforward Contact Bubble EditText, apply CSS to style your <input>:

<div class="chat-bubble">
  <input class="bubble-edit" placeholder="Type the contact info here..." />
</div>

Now, bring in some CSS:

.chat-bubble {
  background: #e0e0e0;
  border-radius: 20px;
  padding: 5px 10px;
  display: inline-flex;
}

.bubble-edit {
  border: none;
  outline: none;
  width: 100%;
}

This approach creates a bare-bones bubble, ready for customization and interaction.

From basic to advanced bubbles

A simple text bubble is the beginning, but we can supercharge our Contact Bubble for an engaging user experience.

Wiring interactivity with JavaScript

Let's use JavaScript to transform user input into a dynamic, interactive bubble:

document.querySelector('.bubble-edit').addEventListener('keyup', function(event) {
  // Introducing event delegation, like the manager who passes off work to an intern.
  if(event.key === 'Enter' && this.value.trim()) {
    createBubble(this.value);
    this.value = ''; // Reset input, because nobody likes left over pizza toppings.
  }
});

function createBubble(value) {
  const bubble = document.createElement('span');
  bubble.textContent = value;
  bubble.classList.add('contact-bubble');
  document.querySelector('.chat-bubble').appendChild(bubble); // Welcome to the bubble family!
}

And the CSS to make the new bubbles pop:

.contact-bubble {
  display: inline-block;
  background: #9c27b0;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  margin-right: 5px;
}

Our Contact Bubble EditText is now more expressive, pulses with life, and finally ready to party.

Boosted visuals with libraries

The ChipView and Material Components libraries can help us propel the visuals and usability:

implementation 'com.google.android.material:material:1.2.1'

Create and add ChipView or Material Chips into a ChipGroup for a collection of bubbles. Marvel at the array of customization options, such as appearance and click behavior.

Building advanced contact bubbles

Let's dive deeper to understand the crucial steps towards advanced Contact Bubble EditText.

Sparking life into contact bubbles

Following the steps will breathe life into the Contact Bubble EditText:

Master SpannableStringBuilder to give birth to spannable text.
Morph TextView into a Drawable with a clever enchantment, like convertViewToDrawable().
Map the Drawable to your text using setSpan(), ensuring it has the right coordinates for display.
Add a touch of magic with a clear button, tucked neatly within the contact bubble by setCompoundDrawablesWithIntrinsicBounds().

Guiding rules for view conversion

When morphing a View into a Drawable, you'd fare well to remember:

[X marks the spot] Measure and lay out the view accurately before the transformation.
[Fit the glass slipper] Ensure BitmapDrawable bounds match the TextView size.
[A room of one's own] Claim your bubble's space with Spannable.SPAN_EXCLUSIVE_EXCLUSIVE.

Borrowing the wisdom of libraries

Why reinvent the wheel when ChipView and Material Chips have figured it out for you?

[Instant gratification] Just add them programmatically, and they're ready to rock `n roll.
[Personal touch] Customization is a breeze. Paint them in your colors, speak your language, even choose the dances they'll perform.
[All ears] They even listen to taps and dismissal calls.

explain-codes / Javascript / Contact Bubble EditText

Linked

Javascript post request like a form submit



Pass a string parameter in an onclick function



How do I trigger an HTML button when the “Enter” key is pressed in a textbox?



Dynamically creating a specific number of input form elements



How can I trigger an onchange event manually?

