CODEWITHSUNDEEP
androidandroid-layout
Vikalp Patel
Vikalp Patel

Reputation: 10887

Adding TextView in LinearLayout like chips same as Gmail address suggestion

I've been creating Chips like Gmail and most of the social android application for address.

Que

I've been appending values in LinearLayout is working fine as long as it less than device width. As soon as it's length more than device width it gets jumble up.

How can a preserve same behaviour in every enviornment?

Expected Behaviour :

Expected Behaviour

What i got

enter image description here enter image description here

Code Snippet:

<LinearLayout
        android:id="@+id/chipsBoxLayout" 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >
<!--Layout to add Chips like Gmail application-->
</LinearLayout>

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,1);
params.setMargins(5, 0, 5, 0);

Iterator<Contact> iterContacts = contacts.iterator();
while(iterContacts.hasNext()) 
{   
  Contact contact = iterContacts.next();
  TextView t = new TextView(MainActivity.this);
  t.setLayoutParams(params);
  t.setPadding(5, 5, 5, 5);
  t.setText(contact.getContactName());
  t.setTextColor(Color.WHITE);
  t.setBackgroundColor(Color.BLUE);
  chipsBoxLayout.addView(t);
}

Upvotes: 10

Views: 5914

Answers (6)

Francis
Francis

Reputation: 7104

There are Chips implemented as a Material design component:

enter image description here

Definition: material.io/design/components/chips.html#input-chips

Android lib: material.io/develop/android/components/chip

Upvotes: 1

Vikalp Patel
Vikalp Patel

Reputation: 10887

As per Rethinavel Pillai ,

FlowLayout works as expected in adding views which i will accomodate by itself if it's added inside FlowLayout.

Code Snippet:

<com.FlowLayout
            android:id="@+id/chips_box_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="start"
             >
</com.FlowLayout>

FlowLayout chipsBoxLayout;
chipsBoxLayout = (FlowLayout)findViewById(R.id.chips_box_layout);


FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(FlowLayout.LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(5, 5, 5, 5);

Iterator<Contact> iterContacts = contacts.iterator();
while(iterContacts.hasNext()) 
{   
  Contact contact = iterContacts.next();
  TextView t = new TextView(MainActivity.this);
  t.setLayoutParams(params);
  t.setPadding(5, 5, 5, 5);
  t.setText(contact.getContactName());
  t.setTextColor(Color.WHITE);
  t.setBackgroundColor(Color.BLUE);
  chipsBoxLayout.addView(t);
}

enter image description here

Upvotes: 14

sais
sais

Reputation: 843

FlowLayout will work, find the URL given below,

https://github.com/ApmeM/android-flowlayout

@Rethinavel Pillai is right

Upvotes: 2

Waseem Arain
Waseem Arain

Reputation: 1177

Try That: use weight property: I have use that in my app and that work fine, its a very useful also you and save the time.

<LinearLayout
    android:id="@+id/lLListImages"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:orientation="horizontal"
    android:weightSum="1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.30"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.20"
        android:text="Button" />

    <Button
         android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Button" />

    <Button
         android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.15"
        android:text="Button" />
</LinearLayout>

Upvotes: -3

user3481961
user3481961

Reputation: 72

I think the problem is you using 

android:layout_width="match_parent"

how about you use weight sum instead...?

Upvotes: -1

Alexander Mikhaylov
Alexander Mikhaylov

Reputation: 1800

You use LinearLayout, but google don't use it. Linear layout will not break lines and will output everything to one line. Chips in gmail works inside ordinary textView. It uses spannable string to output images instead of text, or background color, or smth else. Look here http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.0.1_r1/com/android/ex/chips/RecipientEditTextView.java#RecipientEditTextView There is code how it works.

Upvotes: 3

Related Questions