Styling AutocompleteSupportFragment using Kotlin

Question

I'm trying to change the style of my AutocompleteSupportFragment field

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/llSearchHolder"
    android:padding="7dp">
    <fragment android:id="@+id/autocomplete_fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
        android:hint="@string/Iam_going_to"
    />
</LinearLayout>

I tried implementing answers on this page but I will always get Caused by: java.lang.ClassCastException: android.widget.LinearLayout cannot be cast to android.widget.EditText error. I'm using Kotlin, so my code looks like below:

val autocompleteFragment = supportFragmentManager.findFragmentById(R.id.autocomplete_fragment) as AutocompleteSupportFragment?
autocompleteFragment!!.setPlaceFields(Arrays.asList(Place.Field.ID, Place.Field.NAME));
((autocompleteFragment.getView()!!.findViewById(R.id.autocomplete_fragment)) as EditText).textSize = 30.0f

score 5 · Accepted Answer · answered Mar 02 '20 at 03:20

You need to use below code

((autocompleteFragment.getView()!!.findViewById(R.id.places_autocomplete_search_input)) as EditText).textSize = 30.0f

or more Kotlin way,

autocompleteFragment.view?.findViewById<EditText>(R.id.places_autocomplete_search_input)?.textSize = 30.0f

The correct id of EditText is places_autocomplete_search_input not autocomplete_fragment

Analysis of the problem

You are using Fragment com.google.android.libraries.places.widget.AutocompleteSupportFragment in your xml

While looking into the code of AutocompleteSupportFragment Fragment, you can see it uses layout places_autocomplete_fragment.xml. Code below

public class AutocompleteSupportFragment extends Fragment {
    ....

    public AutocompleteSupportFragment() {
        super(layout.places_autocomplete_fragment);
        ....
    }
}

Now, if you look into places_autocomplete_fragment.xml, you can see id of EditText is places_autocomplete_search_input, code below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center"
    android:layoutDirection="locale"
    android:orientation="vertical"
    android:textDirection="locale">

  <ImageButton
      android:id="@+id/places_autocomplete_search_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="0"
      android:background="@null"
      android:contentDescription="@string/places_autocomplete_search_hint"
      android:padding="@dimen/places_autocomplete_button_padding"
      android:src="@drawable/quantum_ic_search_grey600_24" />

  <EditText
      android:id="@+id/places_autocomplete_search_input"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="@null"
      android:focusable="false"
      android:focusableInTouchMode="false"
      android:hint="@string/places_autocomplete_search_hint"
      android:inputType="textNoSuggestions"
      android:lines="1"
      android:maxLines="1"
      android:paddingLeft="@dimen/places_autocomplete_search_input_padding"
      android:paddingRight="@dimen/places_autocomplete_search_input_padding"
      android:singleLine="true"
      android:textColor="@color/places_autocomplete_search_text"
      android:textColorHint="@color/places_autocomplete_search_hint"
      android:textSize="@dimen/places_autocomplete_search_input_text" />

  <ImageButton
      android:id="@+id/places_autocomplete_clear_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="0"
      android:background="@null"
      android:contentDescription="@string/places_autocomplete_clear_button"
      android:padding="@dimen/places_autocomplete_button_padding"
      android:src="@drawable/quantum_ic_clear_grey600_24" />

</LinearLayout>

One more thing; how do I access the parent LinearLayout of `places_autocomplete_search_input` ? I want to add a border around the edittext — imin, Mar 02 '20 at 16:36
This LinerLayout does not have an id, so the only way is to use editText.getParent() and typecast it to LinearLayout to get parent LinearLayout. @imin — Pankaj Kumar, Mar 02 '20 at 17:03

score 0 · Answer 2 · edited Jun 06 '21 at 03:14

Android might suggest to Replace the <fragment> tag with FragmentContainerView. in your xml file. That breaks custom styling, so keep using <fragment>:

Use this:

<fragment
    android:id="@+id/hostAutocompleteFrag"
    android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Don't use this:

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/hostAutocompleteFrag"
    android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Here's my AutocompleteSupportFragment init method for your reference:

private fun initAutoComplete() {
    val mapAutocomplete = childFragmentManager.findFragmentById(R.id.hostAutocompleteFrag)
    autoCompFrag = mapAutocomplete as AutocompleteSupportFragment
    val hintTxt = autoCompFrag?.findViewById<EditText>(R.id.places_autocomplete_search_input)
    hintTxt?.textSize = 15f
    hintTxt?.setTextColor(requireContext().getColor(R.color.greyColor))
    autoCompFrag.setHint(getString(R.string.search_hint))
    autoCompFrag.setPlaceFields(listOf(Place.Field.NAME, Place.Field.LAT_LNG, Place.Field.ADDRESS))
    
    autoCompFrag.setOnPlaceSelectedListener(object : PlaceSelectionListener {
        override fun onPlaceSelected(place: Place) {
            val latLng = place.latLng ?: return
            setMapLocation(latLng.latitude, latLng.longitude)
        }

        override fun onError(status: Status) {
            Log.e("$TAG initAutoComplete --- ", "An error occurred: $status")
        }
    })
}

Mihir Trivedi · Answer 3 · 2022-04-08T16:12:23.067

For changing the EditText color in kotlin

val autocompleteFragment = supportFragmentManager.findFragmentById(R.id.autocompleteFragment) as AutocompleteSupportFragment?
autocompleteFragment.view?.findViewById<EditText>(places_autocomplete_search_input)?.setTextColor(ContextCompat.getColor(context, R.color.colorWhite));

if still not able to change then try to set the color in values as

<color name="places_autocomplete_search_text">#707070</color>

the key is important places_autocomplete_search_text

Styling AutocompleteSupportFragment using Kotlin

3 Answers3