I am working on an android keyboard app which should show drawing canvas as instead of normal key based soft keyboard. Just like Google's Handwriting keyboard I don't want to implement candidate view or do handwriting recognition. My keyboard will just take the text in canvas and send it as an image.
However after researching a lot, I am still not able to show canvas view in stead of Keyboard view. I followed:
https://code.tutsplus.com/tutorials/create-a-custom-keyboard-on-android--cms-22615
But this adds a keyboard view with a keyboard. I don't want to have a numeric or character keyboard. I just want the keyboard to show an empty canvas where I can draw and once done it should send that image.
I have also tried to put in a layout like this:
<?xml version="1.0" encoding="utf-8"?>
<android.inputmethodservice.KeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:keyBackground="#drawable/square_rounded"
android:background="#ffffff">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/mainLinearLayout">
<RelativeLayout
android:id="#+id/keyboardLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="100dp"
android:layout_height="50dp"
android:text="Cancel"
android:layout_alignParentLeft="true">
</Button>
<Button
android:layout_width="100dp"
android:layout_height="50dp"
android:text="Done"
android:layout_alignParentRight="true">
</Button>
<LinearLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.inputmethodservice.KeyboardView>
and then tried loading it like:
kv = (KeyboardView)getLayoutInflater().inflate(R.layout.draw_signature, null);
// keyboard = new Keyboard(this, R.xml.drawing_keyboard);
// kv.setKeyboard(keyboard);
kv.setOnKeyboardActionListener(this);
kv.setPreviewEnabled(false);
return kv;
Any help or a tutorial link would be appreciated.
Thanks,
Anand
Related
I have to draw custom view (image view + edit text) on top of keyboard in my custom keyboard app. how can i draw this?
I used many custom keyboard example but using that i was just able to draw custom keys (Alphabets/Numeric).
Please help me
Edit-
I tried to create with custom keyboard and added a sample view above keyboardview but when i run the app it is not visible
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/layoit_row"
android:layout_width="match_parent"
android:layout_height="100dp">
<ImageView
android:id="#+id/ivKeyboard"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:padding="10dp"
android:scaleType="fitEnd"
android:src="#drawable/ic_launcher_background" />
<EditText android:id="#+id/et_box"
android:layout_toRightOf="#+id/ivKeyboard"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Asjhish"/>
</RelativeLayout>
<android.inputmethodservice.KeyboardView
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layoit_row"
android:keyPreviewLayout="#layout/preview" />
I want to create layout which consists in normal condition from image and few EditTexts as displayed in the next image
But when user starts to enter the text I need to change the layout the next way:
Soft keyboard at the bottom of screen,
EditTexts about it but Image is resized according to the size of soft keyboard as displayed here
How can I do it?
Thanks in advance
Try this code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Also set
android:windowSoftInputMode="adjustResize"
as property to your Activity in AndroidManifest.xml
The only thing I am trying do that there will be an editText at the top and after that there will be an ImageView.
Now at the bottom line there will be some buttons (ex. emojis) and this bottom part will only be pushed up by the soft keyboard whenever it will appear.
I am making it more clear by attaching this layout of Facebook.
required output
I have gone through all these SO questions and also tried their answers but no luck. May be I am doing something wrong.
Android: Resize only parts of view with soft keyboard on screen
Android: How do I prevent the soft keyboard from pushing my view up?
android : How to prevent resizing the window when displaying the virtual keyboard
My XML code
<ScrollView
android:id="#+id/scrollOnPost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="false"
android:fillViewport="true"
android:layout_below="#+id/header_layout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="4"
android:layout_gravity="bottom"
android:gravity="bottom">
<EditText
android:id="#+id/ed_post"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:id="#+id/img_posted_list_row"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.7"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher"
android:scaleType="fitCenter"
android:background="#color/red"/>
</LinearLayout>
</ScrollView>
<ImageButton
android:id="#+id/imgBtn_Emoji"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:src="#drawable/smile_face"
android:background="#drawable/button_pressed_white"
/>
All I getting that my soft keyboard always pushing the whole layout up not just the emoji at the bottom. Thanks.
Dude it worked
manifest :
<activity android:name=".TestActivity"
android:windowSoftInputMode="adjustResize"/>
xml :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/scrollOnPost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="false"
android:fillViewport="true"
android:layout_below="#+id/header_layout"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="4"
android:layout_gravity="bottom"
android:gravity="bottom">
<EditText
android:id="#+id/ed_post"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:id="#+id/img_posted_list_row"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.7"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#color/colorPrimary"/>
<ImageButton
android:id="#+id/imgBtn_Emoji"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:src="#mipmap/call"
/>
</LinearLayout>
I guess you want only the editText to push up when keyboard is visible(Correct me if i am wrong) for that i have got an idea i don't know if it will work or not you can try it out if you find it logical
Idea is to first check if keyboard is visible or not and secondly if visible get its height and programatically give your layout a marginBottom which will be equal to the height of keyboard(using layoutParams).
check this links for implementing above idea :
How to capture the "virtual keyboard show/hide" event in Android?
Is there any way in android to get the height of virtual keyboard of device
How to set RelativeLayout layout params in code not in xml
In my application I want to have a layout like this:
I did it with a Relative Layout holding an ImageView, TableLayout and a Button. The problem is that when I open the keyboard to modify a EditText the keyboard is on top of the EditText, so the user can't see what he is writing. I want the layout to be like this when the keyboard is shown:
The user should be able to scroll up the view to see the whole image while the keyboard is shown, even if he doesn't see the EditText then, because he wants to copy some data of the image into the EditTexts. I tried to do it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttonEditStop"
android:padding="10dip" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/stopImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#string/entry_img"
android:onClick="ImageClick" />
<TableLayout
android:id="#+id/formLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/stopImg"
android:layout_marginRight="10dp" >
...
</TableLayout>
</RelativeLayout>
</ScrollView>
<ImageButton
android:id="#+id/buttonEditStop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/edit_stop"
android:onClick="EditButtonClicked"
android:src="#drawable/ic_menu_edit" />
Using this code my whole layout is screwed. I see the form on top of the image, followed by a ImageButton with the image that should be seen in the imageView.
Anyone knows how I can get a layout like the one I want?
Thanks!
To avoid the EditText to be overlapped I had to use
android:windowSoftInputMode="adjustPan"
in my manifest.
How I get notified when the keyboard is going up?
I has a FrameLayout and it doesn't get resized when it's goes up, so I need to translate the screen myself.
This is my actual layout XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight="1">
<br.view.image.ScrollableImage
android:id="#+id/image01" android:layout_width="match_parent"
android:layout_height="match_parent" />
<br.view.TopBarView android:id="#+id/topBar"
android:layout_width="match_parent" android:layout_height="wrap_content" />
<br.view.BottomBarView
android:id="#+id/bottomBar" android:layout_gravity="bottom"
android:layout_width="match_parent" android:layout_height="wrap_content" />
</FrameLayout>
From inside the BottomBar I open a PopupWindow wich a EditText and a Button.
When touch the EditText, the soft keyboard just overlay the bottom of the screen covering even the popup window.
See this SO question Android: which event fires when on screen keyboard appears?