How to create custom View for TextInputEditText?

PressRex profile image
by PressRex
How to create custom View for TextInputEditText?

Let's have TextInputLayout and TextInputEditText, which looks like this:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_variable_text_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/sheet_indent_horizontal"
    android:layout_marginBottom="@dimen/view_indent_vertical"
    android:hint="Variable">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/input_variable_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cursorVisible="false"
        android:drawableStart="@drawable/layer_list_platform"
        android:focusable="false"
        android:inputType="none"
        tools:text="Liked" />

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

I want to restrict changing the text via the keyboard and replacing TextInputEditText with a custom view.

// ItemVariable

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="@dimen/min_height_list_item"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/platform_logo_image_view"
        android:layout_width="24dp"
        android:layout_height="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/logo_spotify_colored" />

    <MarqueeTextView
        android:id="@+id/name_variable_text_view"
        style="@style/App.TextAppearance.EntryItem.Text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/view_indent_horizontal_min"
        android:fadingEdge="horizontal"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:singleLine="false"
        app:layout_constraintBottom_toTopOf="@+id/type_variable_text_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/platform_logo_image_view"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="Other" />

    <TextView
        android:id="@+id/type_variable_text_view"
        style="@style/App.TextAppearance.EntryItem.Subtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/name_variable_text_view"
        app:layout_constraintTop_toBottomOf="@+id/name_variable_text_view"
        tools:text="Tracks" />

</androidx.constraintlayout.widget.ConstraintLayout>

So, the final result should look like this:

I tried to create custom TextInputEditText, but TextInputLayout ignore new scheme and display native EditText.

class VariableTextInputEditText @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : TextInputEditText(context, attrs, defStyleAttr) {

    private val binging: ItemVariableBinding

    init {
        val inflater = LayoutInflater.from(context)
        binging = ItemVariableBinding.inflate(inflater, null, false)
        with(binging) {
            context.theme.obtainStyledAttributes(attrs, R.styleable.RangeSliderView, 0, 0).apply {
                try {
                    nameVariableTextView.text = getString(R.styleable.VariableTextInputEditText_nameVariable)
                    typeVariableTextView.text = getString(R.styleable.VariableTextInputEditText_typeVariable)
                    platformLogoImageView.setImageDrawable(getDrawable(R.styleable.VariableTextInputEditText_platformLogo))
                } finally {
                    recycle()
                }
            }
        }
    }
}

Source: View source

PressRex profile image
by PressRex

Subscribe to New Posts

Lorem ultrices malesuada sapien amet pulvinar quis. Feugiat etiam ullamcorper pharetra vitae nibh enim vel.

Success! Now Check Your Email

To complete Subscribe, click the confirmation link in your inbox. If it doesn’t arrive within 3 minutes, check your spam folder.

Ok, Thanks

Read More