3

I'm trying to replicate a spinner control (please don't ask why) I'm struggling with the divider. The fake spinner looks fine until I add the divider to the left of the imageview. Once I add the divider it's height fills the remaining portion of the screen. Can someone please explain this?

The following xml:

.......

        <Spinner 
            android:id="@+id/equipment_spinner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"/>
            <ImageView
                android:id="@+id/spinner_arrow"
                android:layout_width="45sp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/spinner_arrow"/>
        </RelativeLayout>
    </LinearLayout>    
</ScrollView>

produces the following screen:

enter image description here

once I add the divider, the xml looks like this:

        <Spinner 
            android:id="@+id/equipment_spinner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"/>
            <ImageView
                android:id="@+id/spinner_arrow"
                android:layout_width="45sp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/spinner_arrow"/>
            <View
                android:background="#e7ebe7"
                android:layout_width="1dip"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@id/spinner_arrow"/>
        </RelativeLayout>
    </LinearLayout>    
</ScrollView>

which produces the following screen:

enter image description here enter image description here can anyone spot what i'm doing wrong here?...

user806821
  • 37
  • 1
  • 5
  • I've up-voted your question - if someone else does the same you'll have enough rep to post the images. – Squonk Aug 09 '11 at 21:46

2 Answers2

2

You should use a nine-patch image for this instead of using multiple views. That's what the default Spinner does. I don't know why you want to create a new spinner, but if you're keeping the visuals the same you can just reuse the built-in images.

android.R.layout.simple_spinner_item is a TextView layout you could reuse. Or, you can just take the background directly: android.R.drawable.btn_dropdown, which is an XML selector drawable with bitmaps for each state. More details are available in the Android source code.

blazeroni
  • 8,240
  • 1
  • 20
  • 13
  • good suggestion...i used a selector a while back and forgot about that approach..sometimes you get heading in on direction and forget to think differently...thanks for the redirect...btw, I'm doing this to stitch together a multiselect spinner...almost there...thanks again – user806821 Aug 10 '11 at 00:17
1

You have the height set to fill parent which fills the remainder of the Relative Layout. Have you tried putting the View inside the button or imageview as follows:

<Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true">
        <View
            android:background="#e7ebe7"
            android:layout_width="1dip"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@id/spinner_arrow"/>
</Button>
        <ImageView
            android:id="@+id/spinner_arrow"
            android:layout_width="45sp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/spinner_arrow"/>
    </RelativeLayout>

OR

<Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"/>
        <ImageView
            android:id="@+id/spinner_arrow"
            android:layout_width="45sp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/spinner_arrow">
            <View
            android:background="#e7ebe7"
            android:layout_width="1dip"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@id/spinner_arrow"/>
</ImageView>
    </RelativeLayout>

If this doesnt work try setting the height of the relative layout to a fixed amount like 10 dip or however big that spinner is... you may have to try a fiew different sized, just dont leave the relativelayout as wrap content

Rob
  • 1,162
  • 2
  • 18
  • 43
  • its a single pixel wide line that should extend top to bottom...the width is not the problem...its the fill_parent for the height...i thought fill_parent should just expand to fill the immediate parents container – user806821 Aug 09 '11 at 22:17
  • ...in this case its the relative layout which is not set to fill_parent – user806821 Aug 09 '11 at 22:18
  • i don't think putting the imageview in the button will inflate...the button's not a viewgroup...i'll try it. – user806821 Aug 09 '11 at 22:27
  • i would prefer not to set the layout to a fixed size...the divider should extend to to bottom as the layout is resized... – user806821 Aug 09 '11 at 22:30
  • sounds like the first of my two suggestions would be better – Rob Aug 09 '11 at 22:37
  • Just for the heck of it what happens if you use your original code and set the height of the relative view to a fixed amount? I think it must have something to do with that, i cannot see anything else... The relative view is expanding and you can tell because the arrow that is vertically centered is moving down so the RV is definitely expanding – Rob Aug 09 '11 at 22:43
  • if you set layout weight of the relativelayout to 0 or 1 does it change anything? – Rob Aug 09 '11 at 22:52
  • setting the RV to a fixed value works...i was able to replicate the spinner perfectly....but i'm going to use the selector as blazeroni recommended...it's cleaner...i keep forgetting about that approach...btw he reason I'm making this is for a multiselect spinner – user806821 Aug 10 '11 at 00:13