Custom Numeric KeyBoard in android using gridview

In this blog we are going to make a custom numeric keyboard in android.
KeyBoard is user interface which is used to enter character and digit.

How to create custom keyboard.

Custom numeric keyboard in android ca be create using various layout available in android like table layout and grid view etc.
We can give any color and design to it as we want.
Using custom keyboard we can only show the digit and character we want and handle the visibility accordingly.

Here, we are going to create keyboard using GridView

Let’s start Coding…

MainActivity.kt

class MainActivity : AppCompatActivity() {
    var mBinding: ActivityMainBinding? =null;

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding =  DataBindingUtil.setContentView(
           this,
           R.layout.activity_main
       );

        val myAdapter = KeyBoardAdapter(this)
        mBinding?.keyboardView?.setAdapter(myAdapter)
    }

    fun onKeyboardItemClick( text: String){
        Log.d("settext() ", text)
        var display: String = mBinding?.amountEt?.getText().toString()
        if (text.equals("Clear", ignoreCase = true)) {
            // String display = binding.amountEt.getText().toString();
            if (!TextUtils.isEmpty(display)) {
                display = display.substring(0, display.length - 1)
                mBinding?.amountEt?.setText(display)
            }
        } else {
            if (text == "." && display.contains(".")) {
            } else {
                display = display + text
            }
            mBinding?.amountEt?.setText(display)
        }

    }

}

class MainActivity : AppCompatActivity() {

var mBinding: ActivityMainBinding? =null;

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

mBinding = DataBindingUtil.setContentView(

this,

R.layout.activity_main

);

val myAdapter = KeyBoardAdapter(this)

mBinding?.keyboardView?.setAdapter(myAdapter)

}

fun onKeyboardItemClick( text: String){

Log.d("settext() ", text)

var display: String = mBinding?.amountEt?.getText().toString()

if (text.equals("Clear", ignoreCase = true)) {

// String display = binding.amountEt.getText().toString();

if (!TextUtils.isEmpty(display)) {

display = display.substring(0, display.length - 1)

mBinding?.amountEt?.setText(display)

}

} else {

if (text == "." && display.contains(".")) {

} else {

display = display + text

}

mBinding?.amountEt?.setText(display)

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"

    android:orientation="vertical">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_height="wrap_content">
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/amount_et"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Amount "
            android:digits="0123456789."

            android:inputType="numberDecimal"
            />
    </com.google.android.material.textfield.TextInputLayout>
    <androidx.cardview.widget.CardView
        android:id="@+id/keyboard_layout"
        android:layout_width="match_parent"
        android:layout_gravity="bottom"
        android:layout_margin="30dp"
        android:padding="20dp"
        android:elevation="10dp"
        android:layout_height="wrap_content">
        <GridView
            android:id="@+id/keyboard_view"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
            tools:listitem="@layout/keyboard_item"
            android:numColumns="3"/>
    </androidx.cardview.widget.CardView>
</LinearLayout>
    </RelativeLayout>
</layout>

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

tools:context=".MainActivity">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FFFFFF">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:orientation="vertical">

<com.google.android.material.textfield.TextInputLayout

android:layout_width="match_parent"

android:layout_marginBottom="8dp"

android:layout_marginTop="8dp"

android:layout_height="wrap_content">

<com.google.android.material.textfield.TextInputEditText

android:id="@+id/amount_et"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Amount "

android:digits="0123456789."

android:inputType="numberDecimal"

</com.google.android.material.textfield.TextInputLayout>

<androidx.cardview.widget.CardView

android:id="@+id/keyboard_layout"

android:layout_width="match_parent"

android:layout_gravity="bottom"

android:layout_margin="30dp"

android:padding="20dp"

android:elevation="10dp"

android:layout_height="wrap_content">

<GridView

android:id="@+id/keyboard_view"

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:horizontalSpacing="10dp"

android:verticalSpacing="10dp"

tools:listitem="@layout/keyboard_item"

android:numColumns="3"/>

</androidx.cardview.widget.CardView>

</LinearLayout>

</RelativeLayout>

</layout>

KeyBoardAdpter.kt

public class KeyBoardAdapter extends BaseAdapter {
    private MainActivity mainActivity;
       static final String[] numbers = new String[] {
               "1", "2", "3", "4", "5",
               "6", "7", "8", "9", "0",".","Clear"};

        public KeyBoardAdapter(MainActivity activity) {
            mainActivity=activity
            ;

        }

        @Override
        public int getCount() {

            return numbers.length;
        }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @NotNull
        @Override
        public View getView(int position, View convertView, @NotNull ViewGroup parent) {


      KeyboardItemBinding binding = DataBindingUtil.inflate(
                LayoutInflater.from(mainActivity),
                R.layout.keyboard_item, parent, false);
      binding.setActivity(mainActivity);
      binding.setAlphabet(numbers[position]);
        if (numbers[position].equalsIgnoreCase("Clear")){
            binding.kTextView.setVisibility(View.INVISIBLE);
            binding.kImageView.setVisibility(View.VISIBLE);

        }else {
            binding.kTextView.setVisibility(View.VISIBLE);
            binding.kImageView.setVisibility(View.GONE);
        }

            return binding.getRoot();

        }

    }

public class KeyBoardAdapter extends BaseAdapter {

private MainActivity mainActivity;

static final String[] numbers = new String[] {

"1", "2", "3", "4", "5",

"6", "7", "8", "9", "0",".","Clear"};

public KeyBoardAdapter(MainActivity activity) {

mainActivity=activity

;

}

@Override

public int getCount() {

return numbers.length;

}

@Override

public Object getItem(int i) {

return null;

}

@Override

public long getItemId(int i) {

return 0;

}

@NotNull

@Override

public View getView(int position, View convertView, @NotNull ViewGroup parent) {

KeyboardItemBinding binding = DataBindingUtil.inflate(

LayoutInflater.from(mainActivity),

R.layout.keyboard_item, parent, false);

binding.setActivity(mainActivity);

binding.setAlphabet(numbers[position]);

if (numbers[position].equalsIgnoreCase("Clear")){

binding.kTextView.setVisibility(View.INVISIBLE);

binding.kImageView.setVisibility(View.VISIBLE);

}else {

binding.kTextView.setVisibility(View.VISIBLE);

binding.kImageView.setVisibility(View.GONE);

}

return binding.getRoot();

}

keybard_item.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="alphabet"
            type="String" />
        <variable
            name="activity"
            type="com.testaplication.MainActivity" />
    </data>

    <RelativeLayout
        android:id="@+id/grid_view_items"
        android:layout_width="match_parent"
        android:layout_margin="5dp"
        android:background="#88FFFF"
        android:onClick="@{()->activity.onKeyboardItemClick(alphabet)}"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/k_imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:padding="10dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_close_round"
            android:visibility="gone" />

        <TextView
            android:id="@+id/k_textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/k_imageView"
            android:layout_centerHorizontal="true"
            android:textStyle="bold"
            android:textSize="22sp"
            android:padding="10dp"
            android:text="@{alphabet}"
            android:textColor="#000" />
    </RelativeLayout>

</layout>

<?xml version="1.0" encoding="utf-8"?>

<data>

<variable

name="alphabet"

type="String" />

<variable

name="activity"

type="com.testaplication.MainActivity" />

</data>

<RelativeLayout

android:id="@+id/grid_view_items"

android:layout_width="match_parent"

android:layout_margin="5dp"

android:background="#88FFFF"

android:onClick="@{()->activity.onKeyboardItemClick(alphabet)}"

android:layout_height="match_parent">

<ImageView

android:id="@+id/k_imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:padding="10dp"

android:scaleType="fitXY"

android:src="@drawable/ic_close_round"

android:visibility="gone" />

<TextView

android:id="@+id/k_textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/k_imageView"

android:layout_centerHorizontal="true"

android:textStyle="bold"

android:textSize="22sp"

android:padding="10dp"

android:text="@{alphabet}"

android:textColor="#000" />

</RelativeLayout>

</layout>

Final Output

Conclusion

In this blog we learn how we can create custom keyboard in android using gridView.

Hope ! this will help you in finding what you are looking for.

Thanks For Reading

Pankaj Tyagi 3 November 2021

. . .

Custom Numeric KeyBoard In Android

How to create custom keyboard.

Let’s start Coding…

MainActivity.kt

activity_main.xml

KeyBoardAdpter.kt

keybard_item.xml

Final Output

Conclusion

Thanks For Reading

Leave a Comment Cancel Reply

Custom Numeric KeyBoard In Android

How to create custom keyboard.

Let’s start Coding…MainActivity.kt

activity_main.xml

KeyBoardAdpter.kt

keybard_item.xml

Final Output

Conclusion

Thanks For Reading

Leave a Comment Cancel Reply

Message Sent!

Let’s start Coding…

MainActivity.kt