TagsEditText for hashTags

Ever wanted to add tag features to your edittext? Tags such as #tags or @mentions and handle each of the tags as a seperate object. If so then search no more as TagEditText library will do just that. To demostrate this lets start by creating a project and name it whatever we please. Mine is called TagEditTextApp.

Step 1 Add it in your root build.gradle at the end of repositories:

allprojects {
 repositories {
  maven { url "https://jitpack.io" }
 }
}

Step 2 Add the dependency

dependencies {
 compile 'com.github.mabbas007:TagsEditText:1.0.5'
}

Now that we have imported the library we can use it instead of the regular Edittext for our mentions/HashTags.

Create a xml in res value folder for template suggestions.

countries.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="country">
        <item>Afghanistan</item>
        <item>Albania</item>
        <item>Algeria</item>
        <item>American Samoa</item>
        <item>Andorra</item>
        <item>Angola</item>
        <item>Anguilla</item>
        <item>Antarctica</item>
        <item>Antigua and Barbuda</item>
        <item>Argentina</item>
        <item>Armenia</item>
        <item>Aruba</item>
        <item>Australia</item>
        <item>Austria</item>
        <item>Azerbaijan</item>
        <item>Bahrain</item>
        <item>Bangladesh</item>
        <item>Barbados</item>
        <item>Belarus</item>
        <item>Belgium</item>
        <item>Belize</item>
        <item>Benin</item>
        <item>Bermuda</item>
        <item>Bhutan</item>
        <item>Bolivia</item>
        <item>Bosnia and Herzegovina</item>
        <item>Botswana</item>
        <item>Bouvet Island</item>
        <item>Brazil</item>
        <item>British Indian Ocean Territory</item>
        <item>British Virgin Islands</item>
        <item>Brunei</item>
        <item>Bulgaria</item>
        <item>Burkina Faso</item>
        <item>Burundi</item>
        <item>Cambodia</item>
        <item>Cameroon</item>
        <item>Canada</item>
        <item>Cape Verde</item>
        <item>Cayman Islands</item>
        <item>Central African Republic</item>
        <item>Chad</item>
        <item>Chile</item>
        <item>China</item>
        <item>Christmas Island</item>
        <item>Cocos (Keeling) Islands</item>
        <item>Colombia</item>
        <item>Comoros</item>
        <item>Congo</item>
        <item>Cook Islands</item>
        <item>Costa Rica</item>
        <item>Cote d\'Ivoire</item>
        <item>Croatia</item>
        <item>Cuba</item>
        <item>Cyprus</item>
        <item>Czech Republic</item>
        <item>Democratic Republic of the Congo</item>
        <item>Denmark</item>
        <item>Djibouti</item>
        <item>Dominica</item>
        <item>Dominican Republic</item>
        <item>East Timor</item>
        <item>Ecuador</item>
        <item>Egypt</item>
        <item>El Salvador</item>
        <item>Equatorial Guinea</item>
        <item>Eritrea</item>
        <item>Estonia</item>
        <item>Ethiopia</item>
        <item>Faeroe Islands</item>
        <item>Falkland Islands</item>
        <item>Fiji</item>
        <item>Finland</item>
        <item>Former Yugoslav Republic of Macedonia</item>
        <item>France</item>
        <item>French Guiana</item>
        <item>French Polynesia</item>
        <item>French Southern Territories</item>
        <item>Gabon</item>
        <item>Georgia</item>
        <item>Germany</item>
        <item>Ghana</item>
        <item>Gibraltar</item>
        <item>Greece</item>
        <item>Greenland</item>
        <item>Grenada</item>
        <item>Guadeloupe</item>
        <item>Guam</item>
        <item>Guatemala</item>
        <item>Guinea</item>
        <item>Guinea-Bissau</item>
        <item>Guyana</item>
        <item>Haiti</item>
        <item>Heard Island and McDonald Islands</item>
        <item>Honduras</item>
        <item>Hong Kong</item>
        <item>Hungary</item>
        <item>Iceland</item>
        <item>India</item>
        <item>Indonesia</item>
        <item>Iran</item>
        <item>Iraq</item>
        <item>Ireland</item>
        <item>Israel</item>
        <item>Italy</item>
        <item>Jamaica</item>
        <item>Japan</item>
        <item>Jordan</item>
        <item>Kazakhstan</item>
        <item>Kenya</item>
        <item>Kiribati</item>
        <item>Kuwait</item>
        <item>Kyrgyzstan</item>
        <item>Laos</item>
        <item>Latvia</item>
        <item>Lebanon</item>
        <item>Lesotho</item>
        <item>Liberia</item>
        <item>Libya</item>
        <item>Liechtenstein</item>
        <item>Lithuania</item>
        <item>Luxembourg</item>
        <item>Macau</item>
        <item>Madagascar</item>
        <item>Malawi</item>
        <item>Malaysia</item>
        <item>Maldives</item>
        <item>Mali</item>
        <item>Malta</item>
        <item>Marshall Islands</item>
        <item>Martinique</item>
        <item>Mauritania</item>
        <item>Mauritius</item>
        <item>Mayotte</item>
        <item>Mexico</item>
        <item>Micronesia</item>
        <item>Moldova</item>
        <item>Monaco</item>
        <item>Mongolia</item>
        <item>Montenegro</item>
        <item>Montserrat</item>
        <item>Morocco</item>
        <item>Mozambique</item>
        <item>Myanmar</item>
        <item>Namibia</item>
        <item>Nauru</item>
        <item>Nepal</item>
        <item>Netherlands</item>
        <item>Netherlands Antilles</item>
        <item>New Caledonia</item>
        <item>New Zealand</item>
        <item>Nicaragua</item>
        <item>Niger</item>
        <item>Nigeria</item>
        <item>Niue</item>
        <item>Norfolk Island</item>
        <item>North Korea</item>
        <item>Northern Marianas</item>
        <item>Norway</item>
        <item>Oman</item>
        <item>Pakistan</item>
        <item>Palau</item>
        <item>Panama</item>
        <item>Papua New Guinea</item>
        <item>Paraguay</item>
        <item>Peru</item>
        <item>Philippines</item>
        <item>Pitcairn Islands</item>
        <item>Poland</item>
        <item>Portugal</item>
        <item>Puerto Rico</item>
        <item>Qatar</item>
        <item>Reunion</item>
        <item>Romania</item>
        <item>Russia</item>
        <item>Rwanda</item>
        <item>Sqo Tome and Principe</item>
        <item>Saint Helena</item>
        <item>Saint Kitts and Nevis</item>
        <item>Saint Lucia</item>
        <item>Saint Pierre and Miquelon</item>
        <item>Saint Vincent and the Grenadines</item>
        <item>Samoa</item>
        <item>San Marino</item>
        <item>Saudi Arabia</item>
        <item>Senegal</item>
        <item>Serbia</item>
        <item>Seychelles</item>
        <item>Sierra Leone</item>
        <item>Singapore</item>
        <item>Slovakia</item>
        <item>Slovenia</item>
        <item>Solomon Islands</item>
        <item>Somalia</item>
        <item>South Africa</item>
        <item>South Georgia and the South Sandwich Islands</item>
        <item>South Korea</item>
        <item>South Sudan</item>
        <item>Spain</item>
        <item>Sri Lanka</item>
        <item>Sudan</item>
        <item>Suriname</item>
        <item>Svalbard and Jan Mayen</item>
        <item>Swaziland</item>
        <item>Sweden</item>
        <item>Switzerland</item>
        <item>Syria</item>
        <item>Taiwan</item>
        <item>Tajikistan</item>
        <item>Tanzania</item>
        <item>Thailand</item>
        <item>The Bahamas</item>
        <item>The Gambia</item>
        <item>Togo</item>
        <item>Tokelau</item>
        <item>Tonga</item>
        <item>Trinidad and Tobago</item>
        <item>Tunisia</item>
        <item>Turkey</item>
        <item>Turkmenistan</item>
        <item>Turks and Caicos Islands</item>
        <item>Tuvalu</item>
        <item>Virgin Islands</item>
        <item>Uganda</item>
        <item>Ukraine</item>
        <item>United Arab Emirates</item>
        <item>United Kingdom</item>
        <item>United States</item>
        <item>United States Minor Outlying Islands</item>
        <item>Uruguay</item>
        <item>Uzbekistan</item>
        <item>Vanuatu</item>
        <item>Vatican City</item>
        <item>Venezuela</item>
        <item>Vietnam</item>
        <item>Wallis and Futuna</item>
        <item>Western Sahara</item>
        <item>Yemen</item>
        <item>Yugoslavia</item>
        <item>Zambia</item>
        <item>Zimbabwe</item>
    </string-array>
</resources>

Next create a drawable file to be used as the tags background. square_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <solid android:color="@color/bg_tag_default" />
</shape>

Go into your activity_main.xml and edit the layout as such: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:TagsEditText="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:background="@android:color/black"
    tools:context="com.example.framgiababatundefatoyesunday.tagedittextapp.MainActivity"
    >

    <mabbas007.tagsedittext.TagsEditText
        android:id="@+id/tagsEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        TagsEditText:tagsBackground="@drawable/square_default"
        TagsEditText:tagsCloseImageRight="@drawable/tag_close"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        app:tagsTextSize="16sp"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/done"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

The (mabbas007.tagsedittext.TagsEditText) is the custom edittext and it support custom xml and java properties that can make tagging much more easier. Below are some of the properties.

  • TagsEditText:tagsBackground: Will set the background of the tags
  • TagsEditText:tagsCloseImageRight: To set a drawable image (on the right usually to delete a tag)
  • app:tagsTextSize sets the tag text size

MainActivity

package com.example.framgiababatundefatoyesunday.tagedittextapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Collection;
import mabbas007.tagsedittext.TagsEditText;

public class MainActivity extends AppCompatActivity implements TagsEditText.TagsEditListener {

    private ArrayAdapter arrayAdapter;
    private TagsEditText mTagsEditText;
    private Button mBtnDone;
    private Collection<String> mCollection = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTagsEditText = (TagsEditText) findViewById(R.id.tagsEditText);
        mBtnDone = (Button) findViewById(R.id.btnDone);
        mBtnDone.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mCollection == null || mCollection.isEmpty()) {
                    Toast.makeText(MainActivity.this, "Empty", Toast.LENGTH_SHORT).show();
                    return;
                }
                for (String country : mCollection)
                    Toast.makeText(MainActivity.this, country, Toast.LENGTH_SHORT).show();
            }
        });
        mTagsEditText.setHint("Enter names of country");
        mTagsEditText.setTagsListener(this);
        //To Disable space click (Adds text to tags)
        //        mTagsEditText.setTagsWithSpacesEnabled(true);
        arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line,
                getResources().getStringArray(R.array.country));
        mTagsEditText.setAdapter(arrayAdapter);
        mTagsEditText.setThreshold(1);
    }

    @Override
    public void onTagsChanged(Collection<String> collection) {
        mCollection = collection;
    }

    @Override
    public void onEditingFinished() {

    }
}

The advantage of using this library is that all tags are treated as a single individual objects and not strings. It can easily be deleted and modified to keep user from inputing unnecessary texts. More info can be found on the official git here