In Android, how to create an outlined dropdown men

问题:

Material design documentation mentions about outlined dropdown menu, which looks like this:

How to create this in my Android app? In other words, I want to create a spinner with outline and hint on top.

回答1:

They've updated material design library:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

  <AutoCompleteTextView
      android:id="@+id/filled_exposed_dropdown"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

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

This is the link: https://material.io/develop/android/components/menu/

回答2:

Well,there is no official libraries released till now. So, You have to custom create it. Mine seems like this attached image. I have done some simple steps.

Step 1 : Add one shape_

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent"/>
<stroke android:width="1dip" android:color="#424242" />
<corners android:radius="3dip"/>
<padding android:left="0dip" 
android:top="0dip" 
android:right="0dip" 
android:bottom="0dip" />

you can easily change your stroke color from here .

step 2 : Design the spinner _

<RelativeLayout
                android:id="@+id/lyGiftList"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/lyPhysicianList"
                android:layout_marginLeft="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_5sdp"
                android:layout_marginRight="@dimen/_5sdp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/_3sdp"
                        android:layout_weight="8"
                        android:orientation="horizontal"
                        android:background="@drawable/border"
                        tools:ignore="UselessParent">

                        <Spinner
                            android:id="@+id/spnGift"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:overlapAnchor="false"
                            android:spinnerMode="dropdown" />

                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_9sdp"
                    android:layout_marginTop="-5dp"
                    android:background="@color/colorLightGrey"
                    android:paddingLeft="@dimen/_3sdp"
                    android:paddingRight="@dimen/_3sdp"
                    android:text="@string/gift"
                    android:textColor="@color/colorDarkGrey" />
            </RelativeLayout>

And if you want to make your spinner selected text color something else you can do that from code .

 @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { 
            ((TextView) view).setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
        }

回答3:

To create an outlined box menu spinner the steps you need to follow are:

1.Create a drawable file inside a drawable folder named drawable_spinner_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
            android:color="#797979"/>
</shape>

2.Create layout_custom_spinner.xml under Layout folder you can change the text and id as per your requirement.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_qc_flSelectWorkDone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <FrameLayout
            android:layout_marginTop="6dp"
            android:background="@drawable/drawable_spinner_border"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <Spinner
                android:layout_marginTop="5dp"
                android:id="@+id/fragment_qc_spSelectWorkDone"
                android:layout_width="match_parent"
                android:textSize="12sp"
                android:spinnerMode="dropdown"
                android:layout_height="30dp"/>
    </FrameLayout>

    <TextView
            android:paddingStart="2dp"
            android:paddingEnd="2dp"
            android:layout_marginStart="10dp"
            android:layout_marginBottom="15dp"
            android:textSize="9sp"
            android:text="Select Work Done"
            android:background="#FFFFFF"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</FrameLayout>

回答4:

I tried making it with border like below.

Set spinner in activity

<LinearLayout
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:layout_width="wrap_content" android:layout_height="wrap_content" tools:ignore="UselessParent">

    <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:backgroundTint="#ff0000"
            android:overlapAnchor="false"
            android:layout_height="wrap_content"
            android:spinnerMode="dropdown"/>

</LinearLayout>

Create border.xml in drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#80ffffff"/>
<stroke android:width="1dip" android:color="#ff0000" />
<corners android:radius="3dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />

And populate it in any way you want.

val items = arrayOf("NM", "NY", "NC", "ND")
    val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, items)
    spinner1.adapter = adapter

I don't know how to put title to the spinner though.

Result seems like this.

Little adjustments and I think you can create what you are looking for.

回答5:

Add this if not work <androidx.appcompat.widget.AppCompatAutoCompleteTextView

<com.google.android.material.textfield.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">

   <androidx.appcompat.widget.AppCompatAutoCompleteTextView
      android:id="@+id/gender"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Gender"/>
</com.google.android.material.textfield.TextInputLayout>

回答6:

Result:

Fully working code below:

1. Layout

<com.google.android.material.textfield.TextInputLayout          
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Hello"
    >

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:cursorVisible="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:importantForAutofill="no"
        />

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

2. Activity/Fragment

editText.setOnClickListener {
    PopupMenu(context!!, editText).apply {
        menuInflater.inflate(R.menu.menu_in_transaction, menu)
        setOnMenuItemClickListener { item ->
            editText.setText(item.title)
            true
        }
        show()
    }
}

3. Menu

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/type1"
        android:title="Type 1"
        />

    <item
        android:id="@+id/type2"
        android:title="Type 2"
        />

</menu>

回答7:

According to the android's material design github repository, it's planned (which means that they still will start working on it) You can't find a direct way to implement this.