Thứ Bảy, 31 tháng 3, 2018

Sử dụng LinearLayout trong Android

LinearLayout trong Android

LinearLayout là một layout rất tiện lợi trong thiết kế giao diện, nó sắp xếp các View con một cách liên tục theo tùy chọn xếp theo chiều ngang (một hàng các view) hay chiều đứng (một cột các view)
Ví dụ sau, LinearLayout có chứa 4 Button:

https://xuanthulab.net/su-dung-linearlayout-trong-android.html

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="horizontal"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#a6dfdfdf"
    android:layout_margin="10dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:background="#dc9e1a"
        android:text="B1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:background="#00c853"
        android:text="B1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:background="#141ba9"
        android:text="B1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:background="#dc1a8b"
        android:text="B1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

android:orientation
android:orientation để thiết lập cách sắp xếp phần tử. android:orientation="horizontal" xếp theo chiều ngang (ví dụ trên) và android:orientation="vertical" xếp theo chiều đứng.
Ví dụ android:orientation="vertical"

android:gravity
Thuộc tính android:gravity để căn chỉnh các View nằm ở vị trí nào trong LinearLayout, nó nhận các giá trị (có thể tổ hợp lại với ký hiệu |)
Giá trị Ý nghĩa
center Căn ở giữa
top Ở phần trên
bottom Phần dưới
center_horizontal Ở giữa theo chiều ngang
center_vertical Ở giữa theo chiều đứng
left Theo cạnh trái
right Theo cạnh phải
bottom Cạnh dưới
Ví dụ android:gravity="right|center"

Trọng số weight

Các View con trong LinearLayout có thể gán cho nó một giá trị trọng số bằng thuộc tính android:layout_weight ví dụ như: android:layout_weight="2"; android:layout_weight="1.5" ... . Nếu View không gán giá trị này coi như nó có trọng số bằng không.
Giá trị trọng số này sẽ được LinearLayout sử dụng để điều chỉnh kích thước View con có trọng số (điều chỉnh chiều cao nếu là loại LinearLayout đứng và điều chỉnh chiều rộng nếu là loại ngang)
Xét sự ảnh hưởng của trọng số với hai trường hợp sau:
Trường hợp 1
Trường hợp LinearLayout không sử dụng đến thuộc tính android:weightSum
1 Đầu tiên các View không gán trọng số android:layout_weight sẽ có kích thước (rộng hay là cao tùy vào LinearLayout là ngang hay đứng)sẽ theo đúng như thuộc tính android:layout_width, android:layout_height của nó.
2 Không gian (kích thước) còn lại của LinearLayout sẽ chia cho các View có trọng số. Cái nào trọng số lớn hơn sẽ có kích thước lớn hơn. Nếu gọi kích thước còn lại là Size, gọi tổng các trọng số của các View là SUM, thì một view có trọng số là weight sẽ có kích thước là:
weight*(Size/SUM)
Lưu ý các kích thước mà gán match_parent không bị ảnh hưởng của trọng số
Ví dụ 1:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#a6dfdfdf"

    android:divider="@drawable/butterfly"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:background="#dc9e1a"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="30dp" />
    <Button
        android:layout_weight="1"
        android:background="#00c853"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="1"
        android:background="#141ba9"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="1"
        android:background="#dc1a8b"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Bạn thấy, B1 không có trọng số, nên chiều cao của nó sẽ đúng chiều cao thiết lập 30dp. 3 phần tử còn lại có trọng số, thì không gian còn lại của LinearLayout sẽ cấp cho từng phần tử đó nhiều hay ít tùy thuộc vào trọng số lớn hay nhỏ. Ở đây ba phần tử có trọng số bằng nhau, nên không gian còn lại chia đều cho cả ba => Ba phần tử có chiều cao bằng nhau (tổng chiều cao bằng phần chiều cao còn lại của LinearLayout)
Ví dụ 2:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#a6dfdfdf"

    android:divider="@drawable/butterfly"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:background="#dc9e1a"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="30dp" />
    <Button
        android:layout_weight="1"
        android:background="#00c853"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="2"
        android:background="#141ba9"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="3"
        android:background="#dc1a8b"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Trường hợp 2
Trường hợp này trong LinearLayout thiết lập thuộc tính weightSum ví dụ như android:weightSum="10", thì lúc này giá trị SUM trong công thức phân bổ kích thước ở trên không phải là lấy từ tổng weight các View con mà lấy bằng đúng android:weightSum của LinearLayout, sau đó vẫn dùng công thức phân bổ kích thước như trên: weight*(Size/SUM)
Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#a6dfdfdf"

    android:weightSum="4"

    android:divider="@drawable/butterfly"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:background="#dc9e1a"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="30dp" />
    <Button
        android:layout_weight="1"
        android:background="#00c853"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="1"
        android:background="#141ba9"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:layout_weight="1"
        android:background="#dc1a8b"
        android:text="B1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Ở ví dụ trên: SUM = 4; và cách chia kích thước còn lại theo công thức thì bạn thấy thừa ra một 1/4 kích thước còn lại
https://xuanthulab.net/su-dung-linearlayout-trong-android.html

Thứ Sáu, 30 tháng 3, 2018

Sử dụng FrameLayout trong lập trình Android

FrameLayout trong Android


FrameLayout là loại View cơ sở, nó là loại Layout đơn giản nhất. Mặc dù nó có thể chứa nhiều View con bên trong, nhưng mục đích chính thiết kế ra nó để chứa một View, từ đó nó trở thành cơ sở để tạo ra các View khác phức tạp hơn. Khi thiết kế Layout chứa nhiều View thì không nên sử dụng layout này, vì nó quá đơn giản việc bố cục các View con trong nó rất khó khăn (nó không có các tính năng điều khiển vị trí View con sao cho việc độc lập về màn hình được đảm bảo).
Nếu bạn vẫn sử dụng FrameLayout để thiết kế layout, thì cần lưu ý: Các View con đặt vào FrameLayout nằm chồng nên nhau theo thứ tự cái nào đưa vào sau thì hiện thị ở lớp trước, mỗi View con chỉ có thể điều chỉnh vị trí nó thông qua thuộc tính android:layout_gravity gán cho View con
Và có thể tinh chỉnh khoảng cách theo hướng cách cánh bằng các thuộc tính liên quan đến margin như: android:layout_margin, android:layout_marginTop, android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, android:layout_marginStart, android:layout_marginEnd, android:layout_marginHorizontal, android:layout_marginVertical

Thuộc tính android:layout_gravity trong các View con

Khi các View nằm trong FrameLayout thì khi gán thuộc tính android:layout_gravity gán các giá trị ở bảng sau vị trí của nó thay đổi tương ứng:
Các giá trị có thể kết hợp bằng ký hiệu |
giá trị Vị trí của View con
bottom Nằm dưới FrameLayout
center Nằm giữa FrameLayout
center_horizontal Giữa theo chiều ngang
center_vertical Giữa theo chiều đứng
end Cuối FrameLayout
left Bên trái
right Bên phải
start Bắt đầu FrameLayout
top Trên FrameLayout
Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--Ảnh kín FrameLayout-->
    <ImageView
        android:src="@drawable/butterfly"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--Button ở giữa, bên phải và cách mép phải FrameLayout 20dp-->
    <Button
        android:layout_gravity="center|right"
        android:layout_marginRight="20dp"
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!--Ảnh ở giữa, bên dưới FrameLayout-->
    <ImageView
        android:layout_gravity="center|bottom"
        android:src="@drawable/xuanthulab"
        android:adjustViewBounds="true"
        android:layout_width="150dp"
        android:layout_height="wrap_content" />

    <!--Dòng chữ ở giữa, phần trên FrameLayout-->
    <TextView
        android:layout_gravity="center|top"
        android:layout_marginTop="10dp"
        android:text="Đây là một TextView"
        android:layout_width="100dp"
        android:gravity="center"
        android:layout_height="wrap_content" />

</FrameLayout>

Bạn thấy với FrameLayout các View con nằm chồng nên nhau (Button nằm trên Ảnh ...) theo từng lớp và vị trí của chúng xác định bởi layout_grayvity

ImageView trong Android

ImageView

ImageView là loại View dùng để hiện thị tài nguyên hình ảnh như các ảnh Bitmap, các ảnh Drawable. Nó cũng cung cấp các chức năng tùy biến khác nhau như đổ màu nhuộm (tint) vào ảnh, co kéo/cắt ảnh khi hiện thị trên View.

https://xuanthulab.net/imageview-trong-android.html


Triển khai hình XML ImageView
<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    />
Tài nguyên ảnh cần hiện thị gán vào thuộc tính android:src hoặc dùng phương thức phù hợp với loại ảnh hiện thị như: setImageBitmap(Bitmap bm), setImageDrawable(Drawable drawable), setImageResource(int resId), setImageURI(Uri uri)

Thay đổ tỷ lệ / căn chỉnh ảnh hiện thi trong ImageView

Thuộc tính android:scaleType dùng để thiết lập thu phóng ảnh, nhận các giá trị như: fitXY, center, fitXY ..., ví dụ như android:scaleType="center" hoặc code Java: imageView.setScaleType(ImageView.ScaleType.CENTER);
Giá trị Sử dụng
center ImageView.ScaleType.CENTER : Đặt ảnh vào giữa ImageView, không có thay đổi tỷ lệ ảnh.
centerCrop ImageView.ScaleType.CENTER_CROP: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho ảnh phủ kín hết cả ImageView (phần thừa bị cắt)
centerInside ImageView.ScaleType.CENTER_INSIDE: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho toàn bộ các phần của ảnh hiện thị trên ImageView.
fitCenter ImageView.ScaleType.FIT_CENTER: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho toàn bộ các phần của ảnh hiện thị trên ImageView.
fitEnd fitStart ImageView.ScaleType.FIT_END, ImageView.ScaleType.FIT_START: Co ảnh vừa View, vị trí ảnh ở cuối (ở đầu) ImageView
fitXY ImageView.ScaleType.FIT_XY: Co ảnh vừa khít cả chiều rộng và cao.
Ví dụ:
layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="120dp"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textview"
            android:text=""
            android:gravity="center"
            android:textColor="#a72b2b"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_center"
            android:text="center"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_centerCrop"
            android:text="centerCrop"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_centerInside"
            android:text="centerInside"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitCenter"
            android:text="fitCenter"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitEnd"
            android:text="fitEnd"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitStart"
            android:text="fitStart"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_fitXY"
            android:text="fitXY"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>


    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:adjustViewBounds="true"
        android:background="#ec000000"
        android:scaleType="fitCenter"
        android:src="@drawable/butterfly" />

</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image);
        textView = findViewById(R.id.textview);

        findViewById(R.id.btn_center).setOnClickListener(clickListener);
        findViewById(R.id.btn_centerCrop).setOnClickListener(clickListener);
        findViewById(R.id.btn_centerInside).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitCenter).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitEnd).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitStart).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitXY).setOnClickListener(clickListener);
    }

    View.OnClickListener clickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ImageView.ScaleType scaletype = ImageView.ScaleType.CENTER;
            switch (view.getId())
            {
                case R.id.btn_center:
                    scaletype = ImageView.ScaleType.CENTER;
                    break;
                case R.id.btn_centerCrop:
                    scaletype = ImageView.ScaleType.CENTER_CROP;
                    break;
                case R.id.btn_centerInside:
                    scaletype = ImageView.ScaleType.CENTER_INSIDE;
                    break;
                case R.id.btn_fitCenter:
                    scaletype = ImageView.ScaleType.FIT_CENTER;
                    break;
                case R.id.btn_fitEnd:
                    scaletype = ImageView.ScaleType.FIT_END;
                    break;
                case R.id.btn_fitStart:
                    scaletype = ImageView.ScaleType.FIT_START;
                    break;
                case R.id.btn_fitXY:
                    scaletype = ImageView.ScaleType.FIT_XY;
                    break;

            }

            imageView.setScaleType(scaletype);
            textView.setText(((Button)view).getText());
        }
    };
}

Một số thiết lập với ImageView

android:adjustViewBounds nếu nhận giá trị true thì các ImageView tự động co biên vừa với ảnh. (cần có thiết lập chiều rộng hoặc cao là wrap_content)
Để gán ảnh từ tài nguyên trong ứng dụng:
imageView.setImageResource(R.drawable.image);
Để tải ảnh từ thiết bị:
//BitmapFactory.decodeFile("/sdcard/anh.png");
Bitmap bMap = BitmapFactory.decodeFile("đường_dẫn_đến_file_ảnh");
imageView.setImageBitmap(bMap);
Có thể nạp ảnh từ tài nguyên thành Bitmap rồi gán vào ImageView:
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
imageView.setImageBitmap(bMap);
Lấy Drawable từ tài nguyên, rồi gán vào ImageView
Drawable drawable = AppCompatResources.getDrawable(this, R.id.imageresId);
imageView.setImageDrawable(drawable);



Thứ Năm, 29 tháng 3, 2018

Sử dụng EditText nhập dữ liệu trong lập trình Android

EditText

EditText (hoặc AppCompatEditText trong thư viện Support Design) là loại View hiện thị một hộp (chữ nhật) cho phép người dùng nhập dữ liệu (chữ, số ... có thể khống chế nhập liệu là text, số, phone, ngày tháng ...). Ví dụ màn hình dưới dùng EditText để người dùng nhập Tên, Ngày Sinh, Password ...
Nguồn: https://xuanthulab.net/su-dung-edittext-nhap-du-lieu-trong-lap-trinh-android.html


Do EditText mở rộng chức năng từ TextView, nến các tùy chọn thiết lập trình bày ở TextView vẫn đúng cho EditText như: màu chữ, font chữ, màu nền, hint, gán drawable vào các biên ... Nên các đặc tính đó không trình bày chi tiết, bạn nên đọc phần TextView trong Android trước để đảm bảo tính hệ thống của kiến thức.

Triển khai XML EditText

Tương tự TextView, mã XML EditText có dạng:
 <EditText
     android:id="@+id/textview"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:inputType="text"/>

Một số thiết lập

  • Thiết lập kiểu nhập liệu
    Thuộc tính android:inputType dùng để thiết lập kiểu nhập liệu, hiện thị. Tương ứng với mỗi kiểu này EditText sẽ có cách hiện thị cũng như liên kết với loại bàn phím tương ứng. Ví dụ như thiết lập nhập password thì dữ liệu nhập vào sẽ hiện thị bằng ký hiệu *, hay chọn dữ liệu số thì bàn phím xuất hiện là loại bàn phím số
    Các hằng số gán vào android:inputType có thể kết hợp nhiều loại với nhau bằng phép toán |, tham khảo đầy đủ tại: inputType, ở đây là một số giá trị hay dùng:
    Hằng XML Code Java và ý nghĩa
    date
    editText.setInputType(InputType.TYPE_CLASS_DATETIME
    | InputType.TYPE_DATETIME_VARIATION_DATE);
    Nhập ngày tháng
    datetime
    editText.setInputType(InputType.TYPE_CLASS_DATETIME |
    InputType.TYPE_DATETIME_VARIATION_NORMAL);
    Nhập ngày tháng, giờ
    number
    editText.setInputType(InputType.TYPE_CLASS_NUMBER | 
    InputType.TYPE_NUMBER_VARIATION_NORMAL.);
    Nhập số
    numberDecimal
    editText.setInputType(InputType.TYPE_CLASS_NUMBER |
    InputType.TYPE_NUMBER_FLAG_DECIMAL);
    Nhập số thập phân
    numberSigned
    TYPE_CLASS_NUMBER |
    InputType.TYPE_NUMBER_FLAG_SIGNED
    Nhập số nguyên không dấu
    phone
    editText.setInputType(InputType.TYPE_CLASS_PHONE);
    Nhập số diện thoại
    text
    editText.setInputType(InputType.TYPE_CLASS_TEXT |
    InputType.TYPE_TEXT_VARIATION_NORMAL);
    Nhập văn bản
    textEmailAddress
    editText.setInputType(InputType.TYPE_CLASS_TEXT |
    InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS);
    Địa chỉ Email
    textMultiLine
    editText.setInputType(InputType.TYPE_TEXT_FLAG_MULTI_LINE);
    Chữ trên nhiều dòng
    textPassword
    editText.setInputType(InputType.TYPE_CLASS_TEXT |
    InputType.TYPE_TEXT_VARIATION_PASSWORD);
    Nhập password
    textUri
    editText.setInputType( TYPE_CLASS_TEXT |
    InputType.TYPE_TEXT_VARIATION_URI);
    Địa chỉ URL
    time
    editText.setInputType(InputType.TYPE_CLASS_DATETIME |
    InputType.TYPE_DATETIME_VARIATION_TIME);
    Thời gian
    Giới hạn dòng chữ nhập trên một dòng
    <EditText
        android:maxLines="1"
        android:lines="1"
    />
    Giới hạn loại ký tự số nhập vào(chấp nhận số 0, 1)
    <EditText
      android:inputType="number"
      android:digits="01"
    />
    Chỉnh màu Hightlight
    <EditText
    android:textColorHighlight="#7cff88"
    />
  • Nhận thông tin khi đang nhập liệu
    Nếu muốn nhận giám sát, nhận ngay dữ liệu trong EditText khi người dùng đang nhập dữ liệu (có ích khi cần lưu lại ngay thông tin đang nhập) thì sử dụng phương thức addTextChangedListener với tham số là một đối tương TextWatcher, ví dụ:
    final EditText editText = findViewById(R.id.edittext);
    final TextView textView = findViewById(R.id.textviewid);
    editText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence,
            int i, int i1, int i2) {
    
            //Gọi trước khi text thay đổi
        }
    
        @Override
        public void onTextChanged(CharSequence charSequence,
            int i, int i1, int i2) {
            //Gọi khi thay đổi
        }
    
        @Override
        public void afterTextChanged(Editable editable) {
            //Gọi sau khi thay đổi
            textView.setText(editText.getText().toString());
    
        }
    });
    Dữ liệu nhập vào EditText, mỗi khi thay đổi lập tức cập nhật vào TextView
  • Thiết lập icon Drawable và hint vào EditText
    Thực hiện giống hoàn toàn TextView hoặc Button, ví dụ có một icon: drawable/passwordicon thì bạn thực hành như sau:
    <EditText
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:textColorHint="#a30000"
        android:drawableLeft="@drawable/passwordicon"
        android:drawableTint="#3ca40f"
        android:drawablePadding="10dp"
        android:hint="Nhập password từ 6 ký tự trở lên"
        android:layout_height="wrap_content" />
    Bạn đã thêm dòng gợi ý và một icon ở bên trái (bạn có thể đặt ở bên phải, trên, dưới)
  • Tay đổi màu đường kẻ chân EditText
    Để làm điều này hãy thêm những phần tử sau vào Theme mà sử dụng cho Activity (mở file value/styles.xml):
    <item name="colorControlNormal">#000000</item>
    <item name="colorControlActivated">#28c99e</item>
    <item name="colorControlHighlight">#d94ed0</item>

TextInputLayout và TextInputEditText

Thư viện Support Design cung cấp một lớp TextInputEditText nó mở rộng từ chính EditText nên bạn có thể dùng nó giống hoàn toàn như EditText. Tuy nhiên TextInputEditText được thiết kế với mục đích chính là làm phần tử con của phần tử TextInputLayout, lúc đó TextInputLayout sẽ bao bọc lấy EditText và hiện thị các thông tin về EditText như: gợi ý (hint), đếm số ký tự, hiện thị thông báo lỗi ...
Để sử dụng cần đảm bảo tích hợp thư viện com.android.support:design vào Gradle
Triển khai XML TextInputLayout và TextInputEditText đi theo cặp dạng:
implementation 'com.android.support:design:27.1.0
 <android.support.design.widget.TextInputLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

     <android.support.design.widget.TextInputEditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/form_username"/>
 </android.support.design.widget.TextInputLayout>

Thiết lập TextInputLayout

Để hiện thị hint của TextInputEditText/Edit thiết lập: app:hintEnabled="true"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:padding="20px"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameWrapper"
        android:layout_width="match_parent"
        app:hintEnabled="true"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:maxLength="10"
            android:hint="Nhập username"
          />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        app:hintEnabled="true"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="Nhập password" />

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

Để hiện thí số ký tự nhập vào (hiện thị bên phải, dưới EditText) thiết lập: app:counterEnabled="true"

Để hiện thiết lập số ký tự lớn nhất, ví dụ 10 ký tự thêm vào app:counterMaxLength="10" đồng thời ở TextEdit (TextInputEditText) thiết lập android:maxLength="10"

Để hiện thị nút bấm vào để hiện thị nội dung password thay vì ký tự * trong EditText kiểu password, thì TextInputLayout cần có thuộc tính app:passwordToggleEnabled="true" (nếu muốn hiện thị nút riêng thay vì hình con mắt mặc định sử dụng app:passwordToggleDrawable để gán ảnh vào

Để hiện thị dòng thông báo lỗi, thiết lập app:errorEnabled="true" và dòng thông báo lỗi được thiết lập bằng code Java: setError()
Ví dụ, hiện thị dòng thông báo lỗi nếu username nhập vào rỗng
final TextInputEditText editText = findViewById(R.id.username);
final TextInputLayout usernameWrapper = findViewById(R.id.usernameWrapper);

editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        if (charSequence.length() ==0) {
            usernameWrapper.setError("Bạn bắt buộc phải nhập usernam");
        } else {
            usernameWrapper.setError(null);
        }

    }

    @Override
    public void afterTextChanged(Editable editable) {

    }
});

AutoCompleteTextView

Cũng là một lớp mở rộng từ EditText, nhưng cho phép gợi ý, lựa chọn từ một danh sách đổ xuống để hoàn thành dữ liệu nhập vào. Dữ liệu, các View hiện thị gợi ý được thiết lập bằng một Adapter với phương thức setAdapter Ví dụ:
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:padding="20px"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:hint="Nhập sản phẩm?"
        android:id="@+id/product"
        android:completionThreshold="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TextInputLayout>
</LinearLayout>
Code Java

public class MainActivity extends AppCompatActivity {

    //Mảng dữ liệu từ gợi ý (string)
    private static final String[] PRODUCTS = new String[]
    {
            "Điện thoại XY",
            "Máy tính AZ",
            "Iphone", "Tai nghe", "Loa"
    };

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


        AutoCompleteTextView textView = findViewById(R.id.product);

        ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
                android.R.layout.simple_dropdown_item_1line, PRODUCTS);

        textView.setAdapter(adapter);

    }


}

Chú ý trong code trên android:completionThreshold="1" gõ một ký tự đã tiến hành gợi ý.

Nguồn: https://xuanthulab.net/su-dung-edittext-nhap-du-lieu-trong-lap-trinh-android.html

Danh mục Gửi liên hệ

Loading...