How to design a list of spinner?

Question

I want to have a spinner which will contain a list of items.

The design I want is as follow:

I tried to put background for the spinner so now it only shows a background. I want white layout inside and with separator.

I tried to create a layout for the item and apply to the spinner but it gives error :

  Process: com.kiranaapp, PID: 16697
                                                           java.lang.IllegalStateException: ArrayAdapter requires the resource ID to be a TextView

My design now looks like this:

And onclick of spinner I get layout like this:

But I want the list to be shown onClick of TextInputLayout.

Here is Xml file:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
    android:background="@drawable/bg"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.kiranacustomerapp.Activities.SearchActivity"
    tools:showIn="@layout/activity_search">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_height="wrap_content">


            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_item_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="20dp"
                android:paddingTop="05dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:background="@drawable/bg">
                <Spinner
                    android:id="@+id/items_spinner"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:visibility="visible"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="#ffffff"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp" />
                </LinearLayout>
            <android.support.design.widget.TextInputEditText
                android:layout_width="240dp"
                android:layout_height="45dp"
                android:id="@+id/editTextItemName"
                android:layout_gravity="center_horizontal"
                android:hint="@string/item_name"
                android:textSize="15sp"
                android:padding="10dp" >

                </android.support.design.widget.TextInputEditText>
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_item_unit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingTop="05dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp">
                <android.support.design.widget.TextInputEditText
                    android:layout_width="240dp"
                    android:layout_height="45dp"
                    android:id="@+id/editTextItemUnit"
                    android:layout_gravity="center_horizontal"
                    android:hint="@string/unit"
                    android:textSize="15sp"
                    android:padding="10dp" />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_item_quantity"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingTop="05dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp">
                <android.support.design.widget.TextInputEditText
                    android:layout_width="240dp"
                    android:layout_height="45dp"
                    android:id="@+id/editTextItemQuantity"
                    android:layout_gravity="center_horizontal"
                    android:hint="@string/quantity"
                    android:textSize="14sp"
                    android:padding="10dp" />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>

        <Button
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:text="Select"
            style="?android:attr/borderlessButtonStyle"
            android:id="@+id/buttonSelect"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="50dp"
            android:background="@drawable/btn_hlf_blue"
            android:textColor="@android:color/white"
            android:textSize="12sp" />
    </LinearLayout>

</RelativeLayout>

Activity:

public class SearchActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {

    private TextInputEditText edt_Item_Name,edt_Item_Unit,edt_Item_quantity;
    private TextInputLayout textInput_Item_name,textInput_Item_Unit,textInput_Item_quantity;

    private Spinner spinner;
    private Button btnSelect;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_back);
        setSupportActionBar(toolbar);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });

        setUpUI();
    }

    public void setUpUI(){

        edt_Item_Name = (TextInputEditText) findViewById(R.id.editTextItemName);
        edt_Item_quantity = (TextInputEditText)findViewById(R.id.editTextItemQuantity);
        edt_Item_Unit = (TextInputEditText)findViewById(R.id.editTextItemUnit);

        textInput_Item_name = (TextInputLayout)findViewById(R.id.input_layout_item_name);
        textInput_Item_quantity = (TextInputLayout)findViewById(R.id.input_layout_item_quantity);
        textInput_Item_Unit = (TextInputLayout)findViewById(R.id.input_layout_item_unit);

        spinner = (Spinner)findViewById(R.id.items_spinner);
        btnSelect = (Button)findViewById(R.id.buttonSelect);

        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                R.array.items_array, R.layout.order_item_layout);
// Specify the layout to use when the list of choices appears
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
        spinner.setAdapter(adapter);
        spinner.setOnItemSelectedListener(this);

        textInput_Item_name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                spinner.setVisibility(View.VISIBLE);
                edt_Item_Unit.setVisibility(View.GONE);
                edt_Item_quantity.setVisibility(View.GONE);
                btnSelect.setVisibility(View.GONE);

                textInput_Item_name.setBackgroundResource(R.drawable.purple_bg);

            }
        });

    }
    public void onItemSelected(AdapterView<?> parent, View view,
                               int pos, long id) {
        // An item was selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos)
    }

    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback
    }
}

How can I achieve this design? Can anyone help with this please? Thank you..

Answer 1

Follow this

package com.example.spinner;

import java.util.ArrayList;
import java.util.List; 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;

class AndroidSpinnerExampleActivity extends Activity implements OnItemSelectedListener{
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      // Spinner element
      Spinner spinner = (Spinner) findViewById(R.id.spinner);

      // Spinner click listener
      spinner.setOnItemSelectedListener(this);

      // Spinner Drop down elements
      List<String> categories = new ArrayList<String>();
      categories.add("Automobile");
      categories.add("Business Services");
      categories.add("Computers");
      categories.add("Education");
      categories.add("Personal");
      categories.add("Travel");

      // Creating adapter for spinner
      ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, categories);

      // Drop down layout style - list view with radio button
      dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

      // attaching data adapter to spinner
      spinner.setAdapter(dataAdapter);
   }

   @Override
   public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
      // On selecting a spinner item
      String item = parent.getItemAtPosition(position).toString();

      // Showing selected spinner item
      Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();
   }
   public void onNothingSelected(AdapterView<?> arg0) {
      // TODO Auto-generated method stub
   }
}

Use this layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:padding="10dip"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">

   <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dip"
      android:text="Category:"
      android:layout_marginBottom="5dp"/>

   <Spinner
      android:id="@+id/spinner"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:prompt="@string/spinner_title"/>

</LinearLayout>

Answer 2

Draw your layout somthing like this:

<RelativeLayout
                        android:id="@+id/spinner_layout"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_30"
                        android:layout_margin="@dimen/dp_20"
                        android:background="@color/fragment_bg"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/txt_city"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_marginStart="@dimen/dp_20"
                            android:hint="@string/select_city"
                            android:singleLine="tru
                            android:textSize="@dimen/sp_15"/>

                        <Spinner
                            android:id="@+id/spinner_city"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_30"
                            android:layout_centerVertical="true"
                            android:entries="@array/StateName"
                            android:gravity="center"
                            android:padding="@dimen/sp_15"
                            app:binding="@{location.locations}"/>
                    </RelativeLayout>

and use your textinput layout instead of textview Don't use Edittext use Textview to set clicked item text. "if you use edittext, then you have to tap two times to get call in onClickListener method because on first time of click it set to get focus and open soft keyboard"

Answer 3

Use ListView or RecyclerView and put a spinner in a layout that will be use in your viewholder.class associated with getView method in adapter class, after-that set your data using ArrayList/Hashmap with the help of constructor of Adapter class.