Search code examples
androidimageandroid-spinner

How to get spinner hint image in Android?

I am new in Android. I want to make my spinner looks like this, where crust and adds on are given.

But I am not been able to put the hint image on the spinner; thought my spinner shape is as good as it shows in the pic, the only problem is with the image hint.

enter image description here

Here is my edited XML for this layout: here only 1 spinner with the image is showing that too the curves are not that good.

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <ImageView
            android:id="@+id/desimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/logo" />

        <TextView
            android:id="@+id/h1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Chicken Pizza Small"
            android:textSize="21sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/h2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Chicken Pizza Small Combo"
            android:textColor="#8c8181"
            android:textSize="16sp" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:weightSum="10">

            <Button
                android:id="@+id/quant"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginRight="10dp"
                android:layout_weight="3"
                android:background="@drawable/mybutton"
                android:text="Quantity"
                android:textAllCaps="false"
                android:textColor="#ffffff" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="7"
                android:background="@drawable/stroke_button"
                android:orientation="horizontal"
                android:weightSum="3">

                <Button
                    android:id="@+id/incr"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:text="-"
                    android:textColor="#FFA726"
                    android:textSize="25dp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#c0c0c0" />

                <TextView
                    android:id="@+id/value"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="number"
                    android:text="1" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#c0c0c0" />

                <Button
                    android:id="@+id/decr"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:text="+"
                    android:textColor="#FFA726"
                    android:textSize="25dp" />

            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp">

            <CheckBox
                android:id="@+id/sl"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="SL"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="S"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/m"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="M"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/L"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="l"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/f"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="F"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="#c0c0c0" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="35dp"
                android:layout_marginLeft="7dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="5dp"
                android:background="@drawable/border_gray">

                <Spinner
                    android:id="@+id/spin_1"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

                <ImageView
                    android:id="@+id/img_1"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center_vertical"
                    android:layout_margin="5dp"

                    android:src="@drawable/spinpres" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@drawable/stroke_button"
                android:orientation="vertical"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">

                <Spinner
                    android:id="@+id/spin_2"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

                <ImageView
                    android:id="@+id/img_2"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center_vertical"
                    android:layout_margin="5dp"

                    android:src="@drawable/spinpres" />
            </LinearLayout>
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="SPECIAL INSTRUCTIONS"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/stroke_button"
            android:padding="@dimen/fab_margin1">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:gravity="top"
                android:inputType="textCapSentences|textMultiLine"
                android:lines="5"
                android:maxLines="5"
                android:padding="2dp"
                android:textColor="#c0c0c0" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp">

            <Button
                android:id="@+id/canc"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/mybutton2"
                android:text="Cancel"
                android:textColor="#ffffff" />

            <Button
                android:id="@+id/ok"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@drawable/mybutton"
                android:text="Ok"
                android:textColor="#ffffff" />


        </LinearLayout>
    </LinearLayout>
</ScrollView>

this is spinner_selecter.xml where image is there:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/spinpres" />
    <item android:drawable="@drawable/spinpres" />

</selector>
Solution

  • You can do same by using custom layout.

    Here is code for spinner in layout:

     <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="35dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:background="@drawable/border_gray">

        <Spinner
            android:id="@+id/spin_1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <ImageView
            android:id="@+id/img_1"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_arrow_drop_down_black" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="35dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:background="@drawable/border_gray">

        <Spinner
            android:id="@+id/spin_2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <ImageView
            android:id="@+id/img_2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_arrow_drop_down_black" />
    </LinearLayout>
</LinearLayout>

    Create a xml file in drawable folder named -border_gray.xml and here is code

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

<solid android:color="@color/white" />

<stroke
    android:width="1dp"
    android:color="@color/gray" />

<corners
    android:radius="4dp"/>
</shape>

    Now change Image source according to your need.