0

I am searching how to change the background color of the clicked gridview item when it is clicked and then go back to normal color

I want that when I click, the background color of my gridview item is Orange and then after a short time, the background is white again.

Here is what I have found but "Device" is not known.

e.View.SetBackgroundColor(Color.White); Device.StartTimer(TimeSpan.FromSeconds(0.25), () => { e.View.SetBackgroundColor(Color.Orange); return false; });

I tried this :

  1. Define Colors by creating colors.xml in values

    #972234 #000000

  2. Create bg_key.xml in drawable

  3. Set android:listSelector and listSelector to GridView

    <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center"

     android:listSelector="@drawable/bg_key" android:background="@color/default_color" />

And it is working on my side menu but not on my gridview... My grid view is composed by an ImageView and a TextView is it the problem?

Also, what should I change (for my side menu) to change the Font color and not the background color?

Here is my code :

Main.axml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#EBEAEF"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:paddingLeft="5dp" android:background="#282059" android:title="test" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" /> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <!-- The Main Content View --> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/logoBackgroud" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/icon_background" /> <GridView android:id="@+id/grid_view_image_text" android:layout_width="match_parent" android:layout_height="match_parent" android:columnWidth="350dp" android:layout_margin="10dp" android:gravity="center" android:numColumns="auto_fit" /> </RelativeLayout>

gridview.axml :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#EBEAEF"> <RelativeLayout android:layout_height="90dp" android:layout_width="match_parent" android:orientation="vertical" android:layout_margin="25dp" android:listSelector="@drawable/bg_key" android:background="#F4F4F6"> <!-- Letter yellow color = #FAB322 --> <TextView android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="95dp" android:layout_height="fill_parent" android:textSize="66sp" android:textColor="#0071CF" android:background="@color/white" android:layout_centerVertical="true" android:layout_gravity="left" android:gravity="center_vertical|center_horizontal" android:text="A" android:paddingBottom="5dp" android:id="@+id/textViewLetter" /> <TextView android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_height="fill_parent" android:paddingLeft="15dp" android:layout_toRightOf="@+id/textViewLetter" android:layout_centerVertical="true" android:layout_marginRight="35dp" android:textSize="22sp" android:gravity="center_vertical" android:background="#F4F4F6" android:textColor="#262057" android:textStyle="bold" android:listSelector="@drawable/bg_key" android:id="@+id/textViewFileName" /> <ImageView android:layout_width="35dp" android:layout_height="wrap_content" android:paddingTop="5dp" android:layout_alignParentRight="true" android:id="@+id/imageViewIcon" /> </RelativeLayout> </LinearLayout>
Improve this question

2 Answers 2

Reset to default
0

You can't use the Device-Class because it is only available in Xamarin.Forms and not native Xamarin.

But you can use the System.Timers.Timer class to change the color back after some time:

var t = new System.Timers.Timer(); t.Interval = 250; // In miliseconds t.Elapsed += (sender, args) => { // Change color back on the UI-Thread RunOnUiThread(() => { e.View.SetBackgroundColor(Color.Orange); }); }; t.Start();

Important: The Elapsed-Event is NOT invoked on the UI-Thread. So to change something on the UI (just like your background color) you need to do this on the UI-Thread.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

My telepathic skills are not that good... Please explain exactly what you have tried and what happened. Otherwise we are not able to help you
I've tried what you posted and the color doesn't change. I am new in Xamarin so maybe I didn't write it at the good place, I wrote it here : gridView.ItemClick += (s, e) => { var t = new System.Timers.Timer(); t.Interval = 250; // In miliseconds t.Elapsed += (sender, args) => { RunOnUiThread(() => { e.View.SetBackgroundColor(Color.Orange); }); }; t.Start(); };
0

Device.StartTimer is used in Xamarin.Forms to start a recurring timer using the device clock capabilities. It's not available in native.

I prefer you can just make a custom style.

Try this :

1) Define Colors by creating colors.xml in values

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="pressed_color">#972234</color> <color name="default_color">#000000</color> </resources>

2) Create bg_key.xml in drawable

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

3) Set android:listSelector and listSelector to GridView

<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" android:listSelector="@drawable/bg_key" android:background="@color/default_color" />
Improve this answer

5 Comments

It's not working eather, the color does'nt change ... the items in the grid views are composed by an inageView and a TextView, is it the problem?
Because it is working on my side menu items so I guess it must be because of the TextView and ImageView right?
Provide a small sample of your work, so i can go through it.
I put it as an answer (there is too much to post as a comment)
Please can you tell me if you found something ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.