Phonemoji provides a flexible text input field implementation that formats international phone numbers as you type and displays the flag of the country that matches the number's country code. It's powered by libphonenumber (or its Android port to be more precise), compatible with Material Components, and based on PhoneNumberFormattingTextWatcher.
🙃 Flags are emoji, so no extra resources are required. Also, they look cute.
👉 Flags are not tappable -- there's no list with all the country codes or anything like that.
🚩 The flag is updated as the phone number is entered and formatted. It updates as soon as the country code is identified, and it only changes again if a different valid country code is entered.
➕ It only supports international numbers, so the plus sign is always there and can't be removed. It's still part of the input, though, so you can still move the cursor before the sign. If you do that and input a character, the input will be entered after the plus sign.
repositories {
mavenCentral()
}
dependencies {
implementation 'com.fredporciuncula:phonemoji:1.5.2'
}The library offers a TextInputEditText and a TextInputLayout implementation. When you put them together, the TextInputLayout renders the flag as a startIconDrawable based on the TextInputEditText input:
<com.fredporciuncula.phonemoji.PhonemojiTextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/phone_number"
>
<com.fredporciuncula.phonemoji.PhonemojiTextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</com.fredporciuncula.phonemoji.PhonemojiTextInputLayout>
- The flag visibility and size can be set with the attributes
phonemoji_showFlagandphonemoji_flagSize. - The field is never empty. By default, it starts with
+XX, whereXXis the country calling code for the network country (fromTelephonyManager) or for the country from the defaultLocalein case the network country doesn't resolve to a valid country code. - The initial country code can also be set with the attributes
phonemoji_initialRegionCode(e.g.USfor1) andphonemoji_initialCountryCode(e.g.1for theUS) or throughsetRegionCode()andsetCountryCode().
If you don't want to work with a TextInputLayout, or if you don't want to render the flag as the start icon there, you can use a PhonemojiFlagTextView to render the flag anywhere you place it. You can "connect" it with the TextInputEditText by referencing it in the phonemoji_flagFor attribute like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<com.fredporciuncula.phonemoji.PhonemojiFlagTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="16sp"
app:phonemoji_flagFor="@id/phonemojiTextInputEditText"
/>
<com.fredporciuncula.phonemoji.PhonemojiTextInputEditText
android:id="@+id/phonemojiTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:phonemoji_initialRegionCode="BR"
/>
</LinearLayout>
🙆♂️
If you're planning to use data binding, don't use the text property directly like this:
android:text="@{user.phoneNumber}"
Instead, use internationalPhoneNumber to make sure the input will always be formatted properly:
internationalPhoneNumber="@{user.phoneNumber}"
The library initializes itself using the App Startup library. In general, this isn't important for consumers, and it just means you can use the library without worrying about any initialization logic. But it also means the library depends on App Startup in order to work properly, so if you disable it for any reason, the library will crash.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent