hbb20 / CountryCodePickerProject

Country Code Picker (CCP) is an android library which provides an easy way to search and select country or international phone code. Also supports Android EditText phone mask and international phone validation.
Apache License 2.0
1.52k stars 505 forks source link

Question about RTL support #435

Open verilog15 opened 4 years ago

verilog15 commented 4 years ago

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 [________ملحوظة].

hbb20 commented 4 years ago

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.