CountryCodePickerProject
CountryCodePickerProject copied to clipboard
Question about RTL support
I'm using the awesome library. I want to add support to RTL languages. I have the following layout:
<LinearLayout
android:id="@+id/login_phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:id="@+id/login_phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_lock_black_24dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
app:tint="@color/lightGrayColor" />
<com.hbb20.CountryCodePicker
android:id="@+id/login_phone_ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_defaultNameCode="IL"
app:ccp_autoDetectLanguage="true" />
<EditText
android:id="@+id/login_phone_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:hint="Phone number"
android:autofillHints="Phone number" />
</LinearLayout>
I'm using CountryCodePickerProject in my project (awesome library). It allows to set a phone number prefix to the number. I wrote the following layout:
<LinearLayout android:id="@+id/login_phone_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical">
<ImageView
android:id="@+id/login_phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_lock_black_24dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
app:tint="@color/lightGrayColor" />
<com.hbb20.CountryCodePicker
android:id="@+id/login_phone_ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_defaultNameCode="IL"
app:ccp_autoDetectLanguage="true" />
<EditText
android:id="@+id/login_phone_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:hint="Phone number"
android:autofillHints="Phone number" />
It basically creates the following display:
[icon] [Country Prefix] [Phone number box to fill]
In LTR language it looks great. But when I change the language of the phone to RTL it displays:
[Phone number box to fill] [Country Prefix] [icon]
It looks strange because the prefix should be on the left side of the phone number (even in RTL). Speaking of UI/UX thinking, what would be the best solution here to display RTL so it won't look awkward? Maybe force it to be on the left side? But then you will have something like: +11 [________ملحوظة].
First of all, sorry for my ignorance about RTL. Since it's not my native practice, I don't understand it well. I was under the impression that for RTL, phone code should be on the right of the phone edit text. Also since Country picker is just an element that you can put anywhere as per your need, I don't know how exactly I can help here.