> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Autocomplete

> Build a search-as-you-type place picker on Android with Java.

<Frame caption="Place suggestions in an Android app">
  <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_search.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=23d86274dc305f8e8ba3fcbf9e219572" alt="Search-as-you-type place suggestions in an Android app" width="588" height="315" data-path="images/examples/baato_search.png" />
</Frame>

<Note>
  Before you begin, please make sure you have the [Baato Java Library](/libraries/java) installed in your app.
</Note>

<Steps>
  <Step title="Design the layout">
    ```xml theme={null}
    <androidx.cardview.widget.CardView
        android:id="@+id/searchLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="@dimen/normal_margin"
            android:weightSum="10">

            <EditText
                android:id="@+id/etSearchQuery"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="9"
                android:background="@null"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:hint="@string/search_here"
                android:minHeight="@dimen/edit_box_height"
                android:paddingLeft="@dimen/normal_margin"
                android:paddingRight="@dimen/general_margin"
                android:singleLine="true"
                android:textColor="@color/colorBlack"
                android:textColorHint="@color/colorBlack"
                android:textSize="@dimen/medium_text_size" />

            <ImageView
                android:id="@+id/btnClose"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_close_black_24dp"
                android:tint="@color/colorDarkGrey"
                android:visibility="gone" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
    ```
  </Step>

  <Step title="Wire up the views in onCreate">
    ```java theme={null}
    public class SearchActivity extends AppCompatActivity {
        EditText etSearch;
        ImageView btnClose;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_search);

            etSearch = findViewById(R.id.etSearchQuery);
            btnClose = findViewById(R.id.btnClose);
            setUpViews(); //To handle search query
    }
    ```
  </Step>

  <Step title="Watch the input with a TextWatcher">
    ```java theme={null}
    private void setUpViews() {
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        if (recyclerView.getItemDecorationCount() == 0)
            recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

        btnClose.setOnClickListener(View -> {
            etSearch.setText("");
        });

        etSearch.requestFocus();
        etSearch.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                checkEmpty(s);
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });
    }

    private void checkEmpty(CharSequence s) {
        if (!s.toString().isEmpty()) {
            btnClose.setVisibility(View.VISIBLE);
            searchTheQuery(s.toString());
        } else {
            btnClose.setVisibility(GONE);
            showKeyboard(etSearch);
        }
    }

    private void showKeyboard(EditText etSearch) {
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.showSoftInput(etSearch, InputMethodManager.SHOW_IMPLICIT);
    }
    ```
  </Step>

  <Step title="Run the search with BaatoSearch">
    You can now use the `BaatoSearch()` constructor from the [baato-java-client](/libraries/java), to perform the actual search request, and handle events.

    ```java theme={null}
    private void searchTheQuery(String query) {
        new BaatoSearch(this)
                .setAccessToken(getString(R.string.baato_access_token))
                .setQuery(query)
                .withListener(new BaatoSearch.BaatoSearchRequestListener() {
                    @Override
                    public void onSuccess(SearchAPIResponse places) {
                        // get the list of search results and add it to the recycler view adapter
                        if (places.getData() != null && places.getData().size() > 0) {
                            hideErrorMessage();
                            recyclerView.setAdapter(new SearchAdapter(places.getData(), SearchActivity.this));
                        } else
                            showErrorMessage("Empty results!\nCouldn't find any matching results for the " + query);
                        progressBar.setVisibility(GONE);
                    }

                    @Override
                    public void onFailed(Throwable error) {
                        // get the error messages here
                        Toast.makeText(SearchActivity.this, "" + error.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                })
                .doRequest();
    }
    ```
  </Step>
</Steps>

<Card title="View the full example on GitHub" icon="github" href="https://github.com/baato/baato-android-demo/blob/master/app/src/main/java/com/baato/baatoandroiddemo/activities/SearchActivity.java" horizontal />