Skip to content

Customizing InputView

HentaiIsPower edited this page Jul 7, 2016 · 2 revisions

InputView customization

The InputView classes that MonkeyKit provides can be customized via XML. The following attributes are available:

  • attachmentDrawable

Sets the drawable for the attachment button found at the left of AttachmentInputView and MediaInputView. The default size of the drawable is 50dp. The default drawable is:

Default attachment button drawable

  • sendTextDrawable

Sets the drawable for the send button found at the right of all Input Views. The default size of the drawable is 50dp. The default drawable is:

Default text button drawable

  • sendAudioDrawable

Sets the drawable for the send audio button found at the right of AudioInputView and MediaInputView. The default size of the drawable is 50dp. The default drawable is:

Default audio button drawable

  • editTextDrawable

Sets the drawable for the background of the EditText found in all Input Views.

  • backgroundDrawable

Sets a drawable for the background of the Input View. The background of the Input View does not necessarily take all the space of the Input View. By default the height is capped at 50dp and the rest of the background is transparent. The Input View may actually be bigger because some of the views it contains may require additional space when they are used. The default background is a solid white color.

Attachment options

AttachmentButton let's the user send attachments. This button is included in AttachmentInputView and MediaInputView. By default it has 2 options: "take a picture" and "pick from gallery". Both let the user send photos from different sources. To remove this options you can use the following XML attributes in your InputView:

  • useDefaultCamera

If set to true, adds an option to the attachment menu that when clicked uses the camera to take a new photo and send it to the chat. It is true by default, you can set it to false to hide this option.

  • useDefaultGallery

If set to true, adds an option to the attachment menu that when clicked opens the device's photo gallery to select a photo and send it to the chat. It is true by default, you can set it to false to hide this option.

Additionally, you might want to change the labels of these two options. This is essential for international apps. You can change the text that the user clicks for each button with the following XML options:

  • cameraOptionLabel

A string with the text to display in the option for taking a picture with the camera. The default value is: "Take Picture"

  • galleryOptionLabel

A string with the text to display in the option for opening a picture from the system gallery. The default value is: "Open Gallery".

Example

Here is an example of a Layout with custom buttons for InputView and localized attachment labels:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.criptext.uisample.MainActivity"   >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/default_inputview_height"/>

    <com.criptext.monkeykitui.input.MediaInputView
        android:id="@+id/inputView"
        android:layout_width="match_parent"
        app:cameraOptionLabel="@string/localized_camera_label"
        app:galleryOptionLabel="@string/localized_gallery_label"
        app:sendTextDrawable="@drawable/my_text_drawable"
        app:sendAudioDrawable="@drawable/my_audio_drawable"
        app:attachmentDrawable="@drawable/my_attach_drawable"
        android:layout_height="100dp"
        android:layout_gravity="bottom"/>

</FrameLayout>
Clone this wiki locally