Karlos Karlos - 1 month ago 12
Android Question

Add Images in the Edittext and replace it with another Images whenever user enters

I am new to Android and I have the following requirement.

Please let me know is this feasible.

enter image description here

Initially EditText will consist of 6 empty circles. When user clicks on first digit the circle fill as given below image. When user clicks on backspace the circle becomes empty.

enter image description here

Any links or examples or code samples will be helpful.

Answer

The following is the code that solved my issue. The link from @Booger and @Muthuraj helped a lot to build this code

MainActivity.java file

package com.app.xyz.activity;

import android.app.Service;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build; 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.app.xyz.R;

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener, View.OnKeyListener, TextWatcher {

private static final String TAG = "[MainActivity]";

TextView tvHello, tv_one, tv_two, tv_three, tv_four, tv_five, tv_six;

private EditText mPinFirstDigitEditText;
private EditText mPinSecondDigitEditText;
private EditText mPinThirdDigitEditText;
private EditText mPinForthDigitEditText;
private EditText mPinFifthDigitEditText;
private EditText mPinSixthDigitEditText;

private EditText mPinHiddenEditText;
@Override
public void afterTextChanged(Editable s) {
}

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}

/**
 * Hides soft keyboard.
 *
 * @param editText EditText which has focus
 */
public void hideSoftKeyboard(EditText editText) {
    if (editText == null)
        return;

    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);
}



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new MainLayout(this, null));

    init();

    setPINListeners();

}

/**
 * Initialize EditText fields.
 */
private void init() {

    tvHello = (TextView) findViewById(R.id.tvHello);

    tv_one = (TextView) findViewById(R.id.tv_three);

    tv_two = (TextView) findViewById(R.id.tv_four);

    tv_three = (TextView) findViewById(R.id.tv_five);

    tv_four = (TextView) findViewById(R.id.tv_six);

    tv_five = (TextView) findViewById(R.id.tv_seven);

    tv_six = (TextView) findViewById(R.id.tv_eight);





    mPinFirstDigitEditText = (EditText) findViewById(R.id.pin_first_edittext);
    mPinSecondDigitEditText = (EditText) findViewById(R.id.pin_second_edittext);
    mPinThirdDigitEditText = (EditText) findViewById(R.id.pin_third_edittext);
    mPinForthDigitEditText = (EditText) findViewById(R.id.pin_forth_edittext);
    mPinFifthDigitEditText = (EditText) findViewById(R.id.pin_fifth_edittext);
    mPinSixthDigitEditText = (EditText) findViewById(R.id.pin_sixth_edittext);
    mPinHiddenEditText = (EditText) findViewById(R.id.pin_hidden_edittext);
    getWindow().setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);

    mPinHiddenEditText.requestFocus();
    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.showSoftInput(mPinHiddenEditText, InputMethodManager.SHOW_FORCED);



}


@Override
public void onFocusChange(View v, boolean hasFocus) {
    final int id = v.getId();
    switch (id) {
        case R.id.pin_first_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_second_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_third_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_forth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_fifth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_sixth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        default:
            break;
    }
}

@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (event.getAction() == KeyEvent.ACTION_DOWN) {
        final int id = v.getId();

        Log.e(TAG, "======================================");

        Log.d(TAG, "mPinHiddenEditText===>"+mPinHiddenEditText.getText());
        Log.d(TAG, "mPinHiddenEditText.getText().length()===>"+mPinHiddenEditText.getText().length());


        switch (id) {
            case R.id.pin_hidden_edittext:
                if (keyCode == KeyEvent.KEYCODE_DEL) {
                    if (mPinHiddenEditText.getText().length() == 6) {
                        mPinSixthDigitEditText.setText("");

                    }
                    else if (mPinHiddenEditText.getText().length() == 5) {
                        mPinFifthDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 4) {
                        mPinForthDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 3) {
                        mPinThirdDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 2) {
                        mPinSecondDigitEditText.setText("");
                    }

                    else if (mPinHiddenEditText.getText().length() == 1) {
                        mPinFirstDigitEditText.setText("");
                    }


                    if (mPinHiddenEditText.length() > 0)
                        mPinHiddenEditText.setText(mPinHiddenEditText.getText().subSequence(0, mPinHiddenEditText.getText().length() - 1));

                    Log.d(TAG, "hidden====>"+mPinHiddenEditText.getText());
                    Log.e(TAG, "======================================");

                    return true;
                }

                break;

            default:
                return false;
        }
    }

    return false;
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {

    Log.d(TAG, "s.length()===>"+s.length());
    Log.d(TAG, "count===>"+count);
    Log.d(TAG, "s===>"+s.toString());

    if (s.length() == 0) {
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);


    } else if (s.length() == 1) {
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);

        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 2) {
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);


    } else if (s.length() == 3) {
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 4) {
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 5) {
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 6) {
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);


    }
}

/**
 * Sets default PIN background.
 *
 * @param editText edit text to change
 */
private void setDefaultPinBackground(EditText editText) {
    setViewBackground(editText, getResources().getDrawable(R.drawable.ic_panorama_fish_eye_black_24dp));
}

/**
 * Sets focus on a specific EditText field.
 *
 * @param editText EditText to set focus on
 */
public static void setFocus(EditText editText) {
    if (editText == null)
        return;



    editText.setFocusable(true);
    editText.setFocusableInTouchMode(true);
    editText.requestFocus();
}



/**
 * Sets listeners for EditText fields.
 */
private void setPINListeners() {

    mPinHiddenEditText.addTextChangedListener(this);

    mPinFirstDigitEditText.setOnFocusChangeListener(this);
    mPinSecondDigitEditText.setOnFocusChangeListener(this);
    mPinThirdDigitEditText.setOnFocusChangeListener(this);
    mPinForthDigitEditText.setOnFocusChangeListener(this);
    mPinFifthDigitEditText.setOnFocusChangeListener(this);
    mPinSixthDigitEditText.setOnFocusChangeListener(this);

    mPinFirstDigitEditText.setOnKeyListener(this);
    mPinSecondDigitEditText.setOnKeyListener(this);
    mPinThirdDigitEditText.setOnKeyListener(this);
    mPinForthDigitEditText.setOnKeyListener(this);
    mPinFifthDigitEditText.setOnKeyListener(this);
    mPinSixthDigitEditText.setOnKeyListener(this);

    mPinHiddenEditText.setOnKeyListener(this);
}

/**
 * Sets background of the view.
 * This method varies in implementation depending on Android SDK version.
 *
 * @param view       View to which set background
 * @param background Background to set to view
 */
@SuppressWarnings("deprecation")
public void setViewBackground(View view, Drawable background) {
    if (view == null || background == null)
        return;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        view.setBackground(background);
    } else {
        view.setBackgroundDrawable(background);
    }
}

/**
 * Shows soft keyboard.
 *
 * @param editText EditText which has focus
 */
public void showSoftKeyboard(EditText editText) {
    Log.d(TAG,"showSoftKeyboard"+editText.getText());
    if (editText == null)
        return;


    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT);


}

/**
 * Custom LinearLayout with overridden onMeasure() method
 * for handling software keyboard show and hide events.
 */
public class MainLayout extends LinearLayout {

    public MainLayout(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.activity_main, this);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int proposedHeight = MeasureSpec.getSize(heightMeasureSpec);
        final int actualHeight = getHeight();

        Log.d("TAG", "proposed: " + proposedHeight + ", actual: " + actualHeight);

        if (actualHeight >= proposedHeight) {

        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
  }


}

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pin_content_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:padding="15dp"
android:layout_alignParentBottom="true">



<LinearLayout
    android:id="@+id/pin_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="35dp"

    android:orientation="horizontal">

    <EditText
        android:id="@+id/pin_first_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />

    <EditText
        android:id="@+id/pin_second_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_third_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_forth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_fifth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />

    <EditText
        android:id="@+id/pin_sixth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />
</LinearLayout>

<EditText
    android:id="@+id/pin_hidden_edittext"
    android:layout_width="1dp"
    android:layout_height="1dp"
    android:gravity="center_horizontal"
    android:layout_gravity="center_horizontal"
    android:background="@null"
    android:inputType="number|numberPassword"
    android:maxLength="6"
    android:textColor="#00000000"
    />


 </LinearLayout>

I used drawables for filled (ic_lens_black_24dp) and empty (ic_panorama_fish_eye_black_24dp) circles.