Kami Berbagi: EditText

Home Posts filed under EditText

Showing posts with label EditText. Show all posts

7/18/17

EditText with drawable icon

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@android:mipmap/sym_def_app_icon"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:autoLink="web"
                android:text="http://android-er.blogspot.com/"
                android:textStyle="bold"/>
            <EditText
                android:id="@+id/edittext1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="normal EditText"/>
            <EditText
                android:id="@+id/edittext2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with drawableLeft"
                android:drawableLeft="@mipmap/ic_launcher"/>
            <EditText
                android:id="@+id/edittext3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with drawableRight"
                android:drawableRight="@mipmap/ic_launcher_round"/>
            <EditText
                android:id="@+id/edittext4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with drawableTop"
                android:drawableTop="@mipmap/ic_launcher"/>
            <EditText
                android:id="@+id/edittext5"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with drawableBottom"
                android:drawableBottom="@mipmap/ic_launcher_round"/>
            <EditText
                android:id="@+id/edittext6"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with background"
                android:background="@mipmap/ic_launcher"/>
        </LinearLayout>
    </FrameLayout>


</LinearLayout>

7/17/17

EditText

Set background and alpha of EditText

Comment

Examples of Setting background and alpha of EditText:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@android:mipmap/sym_def_app_icon"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:autoLink="web"
                android:text="http://android-er.blogspot.com/"
                android:textStyle="bold"/>
            <EditText
                android:id="@+id/edittext1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textSize="28dp"
                android:text="normal EditText"/>
            <EditText
                android:id="@+id/edittext2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with background #50FFFFFF"
                android:textSize="28dp"
                android:background="#50FFFFFF"/>
            <EditText
                android:id="@+id/edittext3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with background #FFFFFF"
                android:textSize="28dp"
                android:background="#FFFFFF"/>
            <EditText
                android:id="@+id/edittext4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="EditText with background #FFFFFF and alpha=0.5"
                android:textSize="28dp"
                android:background="#FFFFFF"
                android:alpha="0.5"/>
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

7/16/17

EditText

EditText with custom shape (drawable)

Comment

To create EditText with our own shape, create a drawable XML to define our custom shape:

res/drawable/myshape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:padding="10dp">
    <solid android:color="#505050"/>
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>

Reference my shape in layout xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>

    <EditText
        android:id="@+id/edittext1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="normal EditText"/>
    <EditText
        android:id="@+id/edittext2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="EditText with custom shape"
        android:textColorHint="#B0B0B0"
        android:textColor="#F0F0F0"
        android:background="@drawable/myshape" />

</LinearLayout>

7/13/17

AutoCompleteTextView EditText

AutoCompleteTextView, subclass of EditText with Auto-complete function

Comment

AutoCompleteTextView is a subclass of EditText that shows completion suggestions automatically while the user is typing.

To implement AutoCompleteTextView in your app:

Add the AutoCompleteTextView to your layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>

    <AutoCompleteTextView
        android:id="@+id/autocompletetextview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Edit res/values/strings.xml to add array that contains all text suggestions.

<resources>
    <string name="app_name">AndroidEditTextChanged</string>
    <string-array name="suggestion">
        <item>January</item>
        <item>February</item>
        <item>March</item>
        <item>April</item>
        <item>May</item>
        <item>June</item>
        <item>July</item>
        <item>August</item>
        <item>September</item>
        <item>October</item>
        <item>November</item>
        <item>December</item>
    </string-array>
</resources>

Set adapter using the string array for the AutoCompleteTextView

package com.blogspot.android_er.androidedittextchanged;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends AppCompatActivity {

    AutoCompleteTextView autoCompleteTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        autoCompleteTextView =
                (AutoCompleteTextView)findViewById(R.id.autocompletetextview);

        String[] suggestion = getResources().getStringArray(R.array.suggestion);
        ArrayAdapter<String> adapter =
                new ArrayAdapter<String>(this,
                        android.R.layout.simple_list_item_1, suggestion);
        autoCompleteTextView.setAdapter(adapter);

    }

}

7/11/17

EditText TextWatcher

Another example of TextWatcher to monitor text changed in EditText

Comment

Last show Monitor user action on EditText, and do something in onTextChanged() method of TextWatcher. It's another example to do something in afterTextChanged() method, don't care what and where is the change, just do something on the changed text.

package com.blogspot.android_er.androidedittextchanged;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    EditText editText;
    TextView tvMsg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = (EditText)findViewById(R.id.edittext);
        tvMsg = (TextView)findViewById(R.id.msg);

        editText.addTextChangedListener(myTextWatcher);
    }

    TextWatcher myTextWatcher = 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) {
        }

        @Override
        public void afterTextChanged(Editable editable) {
            tvMsg.setText(editable.toString().toUpperCase());
        }
    };
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text"
        android:textSize="24dp"/>
    <TextView
        android:id="@+id/msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="24dp"/>


</LinearLayout>

7/10/17

EditText TextWatcher

Monitor user action on EditText

Comment

This example implement TextWatcher for EditText, such that we can detect user action on EditText, no extra "Enter" button is need.

package com.blogspot.android_er.androidedittextchanged;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    EditText editText;
    TextView tvMsg, tvInfo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = (EditText)findViewById(R.id.edittext);
        tvMsg = (TextView)findViewById(R.id.msg);
        tvInfo = (TextView)findViewById(R.id.info);

        editText.addTextChangedListener(myTextWatcher);
    }

    TextWatcher myTextWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, 
                                      int i, int i1, int i2) {
            tvInfo.setText("beforeTextChanged(): \n"
                    + charSequence + "\n"
                    + i + "\n"
                    + i1 + "\n"
                    + i2);
        }

        @Override
        public void onTextChanged(CharSequence charSequence, 
                                  int i, int i1, int i2) {
            tvInfo.setText("onTextChanged(): \n"
                    + charSequence + "\n"
                    + i + "\n"
                    + i1 + "\n"
                    + i2);
            tvMsg.setText(charSequence);
        }

        @Override
        public void afterTextChanged(Editable editable) {
            /*
            String s = editable.toString();
            tvInfo.setText("afterTextChanged(): \n"
                    + s);
                    */
        }
    };
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidedittextchanged.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text"
        android:textSize="24dp"/>
    <TextView
        android:id="@+id/msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="24dp"/>
    <TextView
        android:id="@+id/info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="italic"
        android:textSize="20dp"/>

</LinearLayout>