android-typeahead
Awesome Android Typeahead library - User mention plugin, UI widget for auto complete user mention using the at sign (@) like Twitter or Facebook.
Version
1.0.1
Installation
Awesome Android Typeahead library requires android 4.0.3 (API 15) or above.
Using Gradle
-
Create 'libraries' directory (if not already exists) in the root of your project at the same level of 'app' directory.
-
Extract the 'typeahead.zip' file and move the extracted directory to 'libraries' directory. Final structure should be as:
- /app
- build.gradle
- /libraries
- typeahead/
- build.gradle
- /settings.gradle
- /app
-
Edit /settings.gradle ; add the following:
include ':typeahead'
project(':typeahead').projectDir = new File('libraries/typeahead')
- Edit /app/build.gradle file ; add the following to dependencies section:
compile project(':typeahead')
- Sync project
- Rebuild project, or run:
./gradlew assembleDebug
For loading remote photos, I'm using Picasso library.
Usage
In your layout, add Add TypeaheadTextView:
<com.arabagile.typeahead.widget.TypeaheadTextView
android:id="@+id/typeaheadAutoComplete"
android:hint="@string/hint_autocomplete"
android:singleLine="false"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:ag_threshold="2"
/>
Create menu layout for typeahead dropdown menu with name menu_user_mention.xml with content:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/photo"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:id="@+id/fullname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_weight="1"
/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
In your activity, add this sample code:
TypeaheadTextView tvAutoComplete = (TypeaheadTextView) findViewById(R.id.typeaheadAutoComplete);
// Dummy dataset - From Gravatar
List<User> users = new ArrayList<>();
users.add(new User("Arab Agile", "arabagile", "http://www.gravatar.com/avatar/fc58e5bfbdf68ae2d7cc0b145cd27794?s=64"));
users.add(new User("Ammar Basha", "elbasha", "http://gravatar.com/avatar/73883b3fe159213faa5c80e7b5f33ef8?s=65"));
users.add(new User("Mary Angel", "mariana", "http://gravatar.com/avatar/38bc81642c20ff6181f3b39d91829ef8?s=64"));
users.add(new User("Cristina", "cristina", "http://gravatar.com/avatar/55abbae35d82f050bc482aa5b457ce28?s=64"));
users.add(new User("Bob Alexander", "bob", "http://gravatar.com/avatar/d6924c79ed9ba7fdc49c1b591a051c2f?s=64"));
MentionAdapter adapter = new MentionAdapter(this, R.layout.menu_user_mention, users);
tvAutoComplete.setAdapter(adapter);
Enjoy!
Configuration
You can set the threshold - the number of charcaters after at sign (@) before the dropdown menu will appear. To do so you can set ag_threshold in xml layout to integer value.
TODO
- Use custom image loader like UIL
License
MIT
335 Dec 25, 2022
161 Nov 25, 2022
0 Oct 3, 2021
4 May 16, 2022
1 Nov 9, 2021
1 Apr 20, 2022
600 Nov 29, 2022
360 Jan 3, 2023
147 Nov 20, 2022
354 Nov 28, 2022
658 Dec 21, 2022
100 Feb 22, 2022
381 Nov 20, 2022
311 Nov 23, 2022
3.6k Jan 5, 2023
4k Dec 28, 2022
651 Dec 30, 2022
858 Dec 7, 2022
1.2k Dec 20, 2022