I'm currently trying to make an android application and I've run into a problem. How would you allow for user to type a word and once they press space/comma, it boxes the word, preferably with an exit option.
https://i.stack.imgur.com/BwpZ9.png
https://i.stack.imgur.com/zqOLo.png
Anything along the lines of these pictures would be perfect.
What you are wanting is called chips in Android, it's one of the native designs you can read about it's specification here.
Here are a few example to get you started, last time I checked there was no proper documentation or support for this feature so I ended up using one the libraries that has built it, you can do something yourself by implementing a custom view as explained here
Here is how I would implement it. This is a working example. When the user hits space it adds and item. When you click an item it will remove it.
Here is a gif of it in action. https://giphy.com/gifs/l4EpayEaAuGV58tgY
add to gradle:
compile 'com.android.support:design:26.0.0-alpha1'
compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
compile 'com.xiaofeng.android:flowlayoutmanager:1.2.3.2'
classes
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler);
recyclerView.setLayoutManager(new FlowLayoutManager());
recyclerView.setAdapter(new CustomRecyclerAdapter());
}
}
public class CustomRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final int HOLDER_ERROR = 0;
private static final int HOLDER_BOX = 1;
private static final int HOLDER_EDIT = 2;
private List<Object> objectList = new ArrayList<>();
public CustomRecyclerAdapter() {
objectList.add(0);
}
public void addItem(String item) {
objectList.add(getItemCount() - 1, item);
notifyItemInserted(getItemCount() - 1);
}
public void removeItem(int position) {
objectList.remove(position);
notifyItemRemoved(position);
}
@Override
public int getItemCount() {
return objectList.size();
}
@Override
public int getItemViewType(int position) {
if (objectList.get(position) instanceof String) {
return HOLDER_BOX;
} else if (objectList.get(position) instanceof Integer) {
return HOLDER_EDIT;
} else {
return HOLDER_ERROR;
}
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
switch (viewType) {
case HOLDER_ERROR:
return null;
case HOLDER_BOX:
return new ViewHolderBox(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_box, parent, false));
case HOLDER_EDIT:
return new ViewHolderEdit(LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_edit_text, parent, false));
default:
return null;
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder instanceof ViewHolderBox) {
ViewHolderBox mHolder = (ViewHolderBox) holder;
mHolder.bindItems();
} else if (holder instanceof ViewHolderEdit) {
ViewHolderEdit mHolder = (ViewHolderEdit) holder;
mHolder.bindItems();
}
holder.itemView.setTag(this);
}
private class ViewHolderEdit extends RecyclerView.ViewHolder implements TextWatcher {
private EditText edit;
private ViewHolderEdit(View itemView) {
super(itemView);
edit = itemView.findViewById(R.id.edit);
InputMethodManager imm = (InputMethodManager) itemView.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInputFromInputMethod(edit.getWindowToken(), 0);
}
private void bindItems() {
edit.addTextChangedListener(this);
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
String editString = edit.getText().toString();
Pattern pattern = Pattern.compile("\\s");
Matcher matcher = pattern.matcher(editString);
if (matcher.find()) {
if (!editString.trim().equalsIgnoreCase("")) {
addItem(editString.trim());
edit.setText("");
edit.requestFocus();
}
}
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
}
}
private class ViewHolderBox extends RecyclerView.ViewHolder implements View.OnClickListener {
private TextView text;
private ViewHolderBox(View itemView) {
super(itemView);
text = itemView.findViewById(R.id.text);
text.setOnClickListener(this);
}
private void bindItems() {
String item = (String) objectList.get(getAdapterPosition());
text.setText(item);
}
@Override
public void onClick(View view) {
removeItem(getAdapterPosition());
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="resume.eugene.com.testing.MainActivity" />
recycler_box.xml
<?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"
android:gravity="center">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="34dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="2dp"
android:background="#90CAF9"
android:clickable="true"
android:gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text="Testing" />
</LinearLayout>
recycler_edit_text.xml
<?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">
<EditText
android:id="@+id/edit"
android:layout_width="wrap_content"
android:layout_height="34dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="2dp"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:hint="Add Item"
android:minWidth="50dp"
android:textSize="15sp" />
</LinearLayout>
