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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?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> |
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.