How to place Spinner with specific background without affecting the drop down?

Question

I need to use Spinner with center text with background outline.

But when I applied for Button, it works fine. But the same when I replaced with Spinner, the drop down is not visible and text is not center.

The below one for Button works fine with background drawable border_grey_curve.

<!-- <android.support.v7.widget.AppCompatButton
    android:id="@+id/to_day"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1.5"
    android:background="@drawable/border_grey_curve"
    android:drawableRight="@drawable/dropdown"
    android:gravity="center"
    android:paddingRight="10dp"
    android:text="Kamis"
    android:textAllCaps="false" />-->

But if I apply the same in Spinner, the drop down is not coming. And also text is not centered.

Here is Spinner:

<android.support.v7.widget.AppCompatSpinner
    android:id="@+id/to_day"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1.5"
    android:background="@drawable/border_grey_curve"
    android:drawableRight="@drawable/dropdown" //applied drop down icon which is not displaying. 
    android:gravity="center" //not displaying text to center in spinner. 
    android:paddingRight="10dp"
    android:text=""
    android:textAllCaps="false" />

border_grey_curve.xml:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <corners android:radius="5dp" />
            <stroke
                android:width="1dp"
                android:color="#d2d2d2"
                />
        </shape>
    </item>
</selector>

Updated full xml:

 <?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"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp"
        android:weightSum="5.3">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2">

            <com.customviews.CircleImageView
                android:id="@+id/recycle_profile"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                android:layout_marginLeft="8dp"
                android:src="@drawable/ic_default_profile" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:orientation="vertical"
                android:paddingLeft="3dp">

                <TextView
                    android:id="@+id/recycle_txt_acc_num"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1.25"
                    android:gravity="center_vertical"
                    android:text="12345678"
                    android:textColor="@color/colorBlack"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/recycle_txt_acc_name"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1.5"
                    android:text="SE A"
                    android:textColor="?attr/colorUserGroup"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/from_day"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.7"
            android:background="@drawable/border_grey_curve"
            android:gravity="center"
            android:text=""
            android:textAllCaps="false"
            android:textColor="@color/colorBlack"
            android:textSize="12sp" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight=".10"
            android:background="@drawable/right_arrow"
            android:gravity="center" />

        <!-- <android.support.v7.widget.AppCompatButton
             android:id="@+id/to_day"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1.5"
             android:background="@drawable/border_grey_curve"
             android:drawableRight="@drawable/dropdown"
             android:gravity="center"
             android:paddingRight="10dp"
             android:text="Kamis"
             android:textAllCaps="false" />-->

        <android.support.v7.widget.AppCompatSpinner
            android:id="@+id/to_day"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.5"
            android:background="@drawable/border_grey_curve"
            android:drawableRight="@drawable/dropdown"
            android:gravity="center"
            android:paddingRight="10dp"
            android:text=""
            android:textAllCaps="false" />

    </LinearLayout>
</RelativeLayout>

score 0 · Answer 1 · answered Jan 16 '18 at 08:45

Want to create a spinner like this?

1-create new drawable resource file spinner_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
    android:width="1dp"
    android:color="#4FBA6F" />

2-add the spinner inside your layout or create a separate layout and include it

<RelativeLayout
    android:id="@+id/spinner_container"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:background="@drawable/spinner_border"
    android:gravity="center_vertical"

    >

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_toLeftOf="@+id/spinImage"
        android:background="@android:color/transparent"
        android:gravity="center_vertical"
        android:spinnerMode="dropdown" />

    <ImageView
        android:id="@+id/spinImage"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:src="@drawable/right_arrow" />

</RelativeLayout>

3-create spinner_item.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="match_parent"
android:textSize="15sp"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:textColor="@color/black"
android:gravity="center_vertical"
/>

4-create your spinner

    private void initSpinner() {
    Spinner spinner=findViewById(R.id.spinner);
    ArrayAdapter<String> SpinnerAdapter=new ArrayAdapter<String>(this,R.layout.spiner_item,getResources().getStringArray(R.array.spinnerItems));
    spinner.setAdapter(genderSpinnerAdapter);

    genderSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {

        }

        @Override
        public void onNothingSelected(AdapterView<?> adapterView) {

        }
    });

}

this is the link of the arrow.png

thanks but when I use like this, it's not fitting correctly. Because I use weight. — Walter, Jan 16 '18 at 08:46
I faced your problem and solved it by creating a custom spinner_item.xml with only a textView.I know it's so weird. but I solved it this way. — Bishoy Kamel, Jan 16 '18 at 08:48
I have edited by posting the entire xml." Updated full xml:" will you please guide me how to use spinner inside the relative layout without affecting the given weight? — Walter, Jan 16 '18 at 08:49
treat the relative layout as your new spinner and only position it. — Bishoy Kamel, Jan 16 '18 at 08:50
I mean my relative layout that contains the spinner.add your desired attributes to position it. — Bishoy Kamel, Jan 16 '18 at 08:58
spinner items are centered by default.but i had the sam issue when i wanted to add a border and an image to it.so i created a separate item.xml as shown in my answer.and it works — Bishoy Kamel, Jan 16 '18 at 09:40

How to place Spinner with specific background without affecting the drop down?

1 Answers1