Change the background color in Spinner

844 views
Skip to first unread message
Assigned to pele...@gmail.com by me

elec part

unread,
Nov 11, 2019, 6:43:56 AM11/11/19
to Kivy users support
I want to have a menu bar like this:

But a could design something like this. my question is how to change background color to main page background color

Please check my code

Any help would be appreciated


Capture.PNG
Capture.PNG
Capture.PNG
Capture.PNG

Elliot Garbus

unread,
Nov 11, 2019, 9:06:52 AM11/11/19
to kivy-...@googlegroups.com
Here you go:
 
BoxLayout:
   
orientation: 'vertical'
   
BoxLayout:
       
size_hint_y: .2
       
orientation: 'horizontal'
       
spacing: 10  # to show the background color
       
canvas:
           
Color:
               
rgb: (.5, .5, .5)
            
Rectangle:
               
pos: self.pos
                size
: self.size
       
Button:
           
id: button_1
           
text:'Push me'
       
Button:
           
text:'Test'
       
Button:
           
text: 'Action'
   
Label:
       
text:'Blank'

 

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/99ebd8ca-c093-416d-ba80-b38026d954ca%40googlegroups.com.

 

elec part

unread,
Nov 11, 2019, 11:48:58 PM11/11/19
to Kivy users support
The only thing is, i need a drop down list (In my case spinner). Can you please explain how that is possible? 

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

Elliot Garbus

unread,
Nov 12, 2019, 12:10:36 AM11/12/19
to kivy-...@googlegroups.com

Just to be clear, you want to replace the buttons in the example below with Spinners?

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/797aae48-0b49-4e95-a23f-5b3a8de03012%40googlegroups.com.

 

elec part

unread,
Nov 12, 2019, 12:12:27 AM11/12/19
to kivy-...@googlegroups.com

Elliot Garbus

unread,
Nov 12, 2019, 12:29:03 AM11/12/19
to kivy-...@googlegroups.com
The KV code below will behave more like a traditional menu, where the menu title item is what is always shown.  Another alternative is to look at the Actionbar widget: https://kivy.org/doc/stable/api-kivy.uix.actionbar.html
 
 
BoxLayout:
   
orientation: 'vertical'
   
BoxLayout:
       
size_hint_y: .2
       
orientation: 'horizontal'
       
spacing: 10  # to show the background color
       
canvas:
           
Color:
               
rgb: (.5, .5, .5)
           
Rectangle:
               
pos: self.pos
                size
: self.
size
       
Spinner:
           
text: 'File'
           
values: ['open', 'close']
           
on_text:
               
# do action and then return to original value?
               
self.text = 'File'
       
Spinner:
           
text:'Edit'
           
values: ['1','2', '3']
           
on_text:
               
# do action and then return to original value?
               
self.text = 'Edit'
       
Spinner:
            
text: 'View'
           
values: ['A', 'B', 'C']
           
on_text:
               
# do action and then return to original value?
               
self.text = 'View'
       
Spinner:
           
text: 'Help'
           
values: ['OMG', 'WTF', 'ROFLMAO']
           
on_text:
               
# do action and then return to original value?
               
self.text = 'Help'
   
Label:
       
text:'Blank'

elec part

unread,
Nov 12, 2019, 12:31:58 AM11/12/19
to kivy-...@googlegroups.com

elec part

unread,
Nov 12, 2019, 2:46:37 AM11/12/19
to kivy-...@googlegroups.com
I still need to figure out how change button color
from this
image.png
to this
image.png
Thank you so much

Elliot Garbus

unread,
Nov 12, 2019, 10:15:39 AM11/12/19
to Kivy users support
Let me know if this helps:

from kivy.app import App
from kivy.lang.builder import Builder

kv = '''
#: set white [1, 1, 1, 1]
#: set black [1, 1, 1, 1]

<ImageButton@ButtonBehavior+Image>: # multiple inheritance in kivy, defines new class
size_hint_y: None
height: '64dp'

BoxLayout:
orientation: 'vertical'
BoxLayout:
orientation: 'vertical'
size_hint_y: .1

Button:
id: btn
text: 'DropDown'
on_release: dropdown.open(self)
size_hint_y: None
background_normal: '' # remove normal button image, or replace with an alternative
background_color: white
color: 0,0,0,1
height: '48dp'

Widget:
on_parent: dropdown.dismiss()

DropDown:
id: dropdown
on_select: btn.text = f'Selected value: {args[1]}'

Button:
text: 'Value A'
size_hint_y: None
height: '48dp'
background_normal: ''
background_color: white
color: 0,0,0,1
on_release: dropdown.select('A')

Button:
text: 'Value B'
size_hint_y: None
height: '48dp'
background_normal: ''
background_color: white
color: 0,0,0,1
on_release: dropdown.select('B')
Button:
text: 'Value C'
size_hint_y: None
height: '48dp'
background_normal: ''
background_color: white
color: 0,0,0,1
on_release: dropdown.select('C')
ImageButton:
source: 'Actions-media-playback-start-icon.png' # Your image here
on_release: dropdown.select('Play Button')

Label:
text:'Blank'

'''


class DDTestApp(App):
def build(self):
return Builder.load_string(kv)


if __name__ == '__main__':
DDTestApp().run()
Got it. thanks

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.
main2.py

elec part

unread,
Nov 13, 2019, 12:57:02 AM11/13/19
to kivy-...@googlegroups.com
Thanks for you answer and your time as well. I want to put it inside a FloatLayout to change the position.(back ground color problem is fixed by your help). Once click on the drop down list, it is not opening drop down elements. I think it is because of FloatLayout. Could please provide me a solution for this problem as well. Here is my code

FloatLayout:

canvas:
Color:
rgb: (1, 1, 1)

Rectangle:
pos: self.pos
size: self.size
        Color:
rgba: 0,0,0,1
Line:
width:root.height*.001
cap: 'none'
points : 0,.95*root.height,root.width,.95*root.height
Button:
id: panel1
text: 'File'
pos_hint: {"x": 0 , "y":0.95}
size_hint: 0.1, 0.05
on_release: dropdown1.open(self)

background_normal: '' # remove normal button image, or replace with an alternative
        background_color:1,1,1,1
color: 0,0,0,1
Widget:
on_parent: dropdown1.dismiss()

DropDown:
id: dropdown1
on_select: panel1.text = f'Selected value: {args[1]}'
Button:
text: 'Value A'
background_normal: ''
background_color: 1,1,1,1
color: 0,0,0,1
size_hint: 0.1, 0.05
pos_hint: {"x": 0 , "y":0.9}
on_release: dropdown1.select('A')
Button:
text: 'Value B'
background_normal: ''
background_color: 1,1,1,1
color: 0,0,0,1
size_hint: 0.1, 0.05
on_release: dropdown1.select('B')

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/7f278436-96a9-444a-a7f8-5e8ec3b89d33%40googlegroups.com.

elec part

unread,
Nov 13, 2019, 1:03:12 AM11/13/19
to kivy-...@googlegroups.com
This is picture of my app
image.png
Everything is good except not showing the drop down list on click on each button (e.g. Help button )

elec part

unread,
Nov 13, 2019, 1:13:44 AM11/13/19
to Kivy users support
I forgot height: 44 instead of Pos_hint and Size_hint. Sorry about that
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+unsubscribe@googlegroups.com.

Elliot Garbus

unread,
Nov 13, 2019, 11:52:28 AM11/13/19
to kivy-...@googlegroups.com
Try putting everything below the canvas in a BoxLayout. 

Sent from my iPhone

On Nov 12, 2019, at 11:13 PM, elec part <pele...@gmail.com> wrote:


To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/56fc4434-a319-4530-8223-26d51dc23867%40googlegroups.com.

Elliot Garbus

unread,
Nov 13, 2019, 4:40:52 PM11/13/19
to kivy-...@googlegroups.com

What is the effect you are looking to achieve?

Why a FloatLayout?  I typically only use a FloatLayout for special cases where I need to position on object on top of another.

 

From: Elliot Garbus
Sent: Wednesday, November 13, 2019 9:52 AM
To: kivy-...@googlegroups.com
Subject: Re: [kivy-users] Change the background color in Spinner

 

Try putting everything below the canvas in a BoxLayout. 

Sent from my iPhone



On Nov 12, 2019, at 11:13 PM, elec part <pele...@gmail.com> wrote:



I forgot height: 44 instead of Pos_hint and Size_hint. Sorry about that

On Wednesday, 13 November 2019 09:33:12 UTC+3:30, elec part wrote:

This is picture of my app

to this

Thank you so much

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/7f278436-96a9-444a-a7f8-5e8ec3b89d33%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/56fc4434-a319-4530-8223-26d51dc23867%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

Electronic Part

unread,
Nov 25, 2019, 6:52:51 AM11/25/19
to Kivy users support
I want FloatLayout because I want to choose the position of initial button (drop down one). I need to put sveral of them 

Electronic Part

unread,
Nov 26, 2019, 1:18:08 AM11/26/19
to Kivy users support
Coould you please help me to make dropdown list by using FloatLayout? As you said, I want to put drop down in a specefic position. Thank you so much for your help

Elliot Garbus

unread,
Nov 26, 2019, 7:48:04 AM11/26/19
to kivy-...@googlegroups.com

See the code below.  The MyDropDown is a BoxLayout, but I put in under a FloatLayout to position the dropdown on the screen.

 
 
from kivy.app import App
from kivy.lang.builder import Builder

kv =
'''

#: set white [1, 1, 1, 1]
#: set black [1, 1, 1, 1]

<ImageButton@ButtonBehavior+Image>:  # multiple inheritance in kivy, defines new class
    size_hint_y: None
    height: '64dp'

<DDTextButton@Button>:

    size_hint_y: None
    height: '48dp'
    background_normal: ''
    background_color: white
    color: 0,0,0,1

<MyDropDown@BoxLayout>:

    orientation: 'vertical'
    size_hint_y: .1
    Button:
        id: btn
        text: 'DropDown'
        on_release: dropdown.open(self)
        size_hint: None, None

        background_normal: ''  # remove normal button image, or replace with an alternative
        background_color: white
        color: 0,0,0,1
        height: '48dp'

    Widget:
        on_parent: dropdown.dismiss()

    DropDown:
        id: dropdown
        on_select: btn.text = f'Selected value: {args[1]}'
        DDTextButton:
            text: 'Value A'
            on_release: dropdown.select('A')
        DDTextButton:
            text: 'Value B'
            on_release: dropdown.select('B')
        DDTextButton:
            text: 'Value C'

            on_release: dropdown.select('C')
        ImageButton:
            source: 'Actions-media-playback-start-icon.png'  # Your image here
            on_release: dropdown.select('Play Button')


BoxLayout:
    orientation: 'vertical'

    canvas:
        Color:
            rgb: (1, 1, 1)
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba:  0,0,0,1
        Line:
            width: root.height*.001
            cap: 'none'
            points : 0,.9 * root.height, root.width, .9 * root.height
    FloatLayout:
        MyDropDown:
            pos_hint: {'x': .8, 'y': .9}
        MyDropDown:
            pos: 200,200
        MyDropDown:
            pos_hint: {'x': .4, 'y': .9}

'''


class DDTestApp(App):
   
def build(self):
       
return Builder.load_string(kv)


if __name__ == '__main__':
    DDTestApp().run()

 

 

From: Electronic Part
Sent: Monday, November 25, 2019 11:18 PM
To: Kivy users support
Subject: Re: [kivy-users] Change the background color in Spinner

 

Coould you please help me to make dropdown list by using FloatLayout? As you said, I want to put drop down in a specefic position. Thank you so much for your help

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

elec part

unread,
Nov 27, 2019, 7:54:42 AM11/27/19
to kivy-...@googlegroups.com
SO. this is what worked for me

FloatLayout:

pos_hint: {"x": 0 , "y":0.9}
    size_hint: 1, 0.05
dropdown1: dropdown1.__self__


#orientation: 'vertical'
#size_hint_y: .1
Button:
pos_hint: {"x": 0 , "y":1}
size_hint: .1, 0.05
id: panel1
text: 'File'
on_release: dropdown1.open(self)
size_hint_y: None
#background_normal: '' # remove normal button image, or replace with an alternative
background_color: 1,1,1,1

color: 0,0,0,1
height: '48dp'

Widget:
        on_parent: dropdown1.dismiss()

DropDown:
id: dropdown1
        on_select: panel1.text = f'Selected value: {args[1]}'

Button:
text: 'Exit'

size_hint_y: None
height: '48dp'
background_normal: ''
            background_color: 1,1,1,1
color: 0,0,0,1
#on_release: dropdown1.select('A')
on_press: app.stop()

Reply all
Reply to author
Forward
0 new messages