Develop Reference

LinearLayout inside a View (Xamarin.Android)

I want to put a LinearLayout inside a View (which represents a rectangle), to put more elements inside this Layout. Unfortunately, this doesn't work somehow, it just doesn't recognize the LinearLayout nor other elements when I put them inside the View.
I use Xamarin.Android (only Android, not iOS) in Visual Studio Community 2019.
Here is the XML Code. The #drawable/rounded is just an .xml file which makes the view a rectangle with round corners.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff74a8a7"
android:orientation="vertical">
<!--Header-->
<TextView
android:text="MyTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:gravity="center"
android:id="#+id/txtTitle"
android:textColor="#ff2f5858"
android:textStyle="bold" />
<!--View-->
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
</LinearLayout>
Help would be appreciated on how to solve this problem!

This part of your layout won't work:
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
A View is not a ViewGroup and can per design not have any children. You could use FrameLayout, LinearLayout, RelativeLayout, ConstraintLayout or any other layout to host multiple children.
You could just remove the outer view and you should be able to see your LinearLayout.

Custom toolbar, menu icons not showing Xamarin Android

I am trying to replace the action bar in a Xamarin android project with a custom toolbar. I want my toolbar to display a logo on the left, and then my menu icons on the right.
I followed this tutorial from Microsoft closely Replacing the Action Bar
But my menu icons no longer display (when I was using ActionBar, my menu icons displayed just fine). There is however a 3 dot overflow icon, but when clicking it nothing happens. Here is a screenshot of the built app with my custom toolbar:
I have tried:
I thought my image view was blocking the menu icons, so I removed it
but my menu icons do not show.
Changing what MainActivty extends, I have tried Activity, and AppCompactActivity
I thought my OnCreateOptionsMenu may not be getting called, So I tried: toolbar.InflateMenu(Resource.Menu.actionbar);
I am stuck and not sure what is wrong here, I would appreciate any help!
Here is my Code:
Toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android ="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="#4F703A"
android:theme="#android:style/ThemeOverlay.Material.Dark.ActionBar">
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:src="#drawable/logo_app"/>
</RelativeLayout>
</Toolbar>
MainActivity.cs (omitted some irrelevant code)
public class MainActivity : Activity
{
[System.Obsolete]
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
//Activate customer toolbar
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "";
}
My menu items (actionbar.xml)
<?xml version="1.0" encoding="utf-8" ?>
<!--For all properties see: https://aka.ms/android-menu-resource-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_search"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_search"/>
<item android:id="#+id/action_addnew"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_add"/>
</menu>
style.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="#android:style/Theme.Material.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#5A8622</item>
</style>
</resources>
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/frameLayoutParent"
android:background="#4F703A">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:fillViewport="true"
android:id="#+id/swipeLayout"
android:paddingTop="?android:attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/headerLinearLayout">
<TextView
android:text="Thumbnail"
android:id="#+id/headerThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Address Line"
android:id="#+id/headerAddressLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="City"
android:id="#+id/headerCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="State"
android:id="#+id/headerState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Zip Code"
android:id="#+id/headerZipCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
</LinearLayout>
<ListView
android:paddingTop="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myListView"/>
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editSearch"
android:hint="Search"
android:textColor="#000"
android:editable="true"
android:paddingTop="?android:attr/actionBarSize"/>
</FrameLayout>

A TitleView Sounds like the best option for what you're trying to do. Instead of those long processes you could just do this
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image Source="Logo.png"/>
<label Text="Company Name"/>
</StackLayout>
</NavigationPage.TitleView>

My Issue was in my menu xml file, xmlns:app for the showAsAction attributes
app:showAsAction="always"
is needed for the v7 support toolbar, but is not used for the new lollipop toolbar. So it should look like this:
android:showAsAction="ifRoom"
After I fixed this, I couldn't click my menu items. I figured out my layout was displaying over top, so I needed to add
android:layout_marginTop="?android:attr/actionBarSize"
To the layout below my custom toolbar!

Xamarin Android: Change the background color of a GridView item when clicked

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
<?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"
/>
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?

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.

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"
/>

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>

Xamarin.Android Designer shows controls differently as they appear on my phone

I am unable to setup Xamarin.Android Designer pretty well. In my previous version of Windows and Visual Studio the Xamarin Default designer view looked Fine, but after upgrading to VS2015 and Win10, My Designer doesn't seem to be very well, As it's controls show differently on the designer and differently on my mobile phone. I am sharing two pictures of how it looks like on my phone and how it looks on Xamarin Designer.
In my Xamarin Designer:
In my Mobile Phone:
Please assist me regarding this issue, Thank you!
EDIT:
you won't be able to see the controls until you change their color if I choose the default theme of the designer.
Here it is how it looks when the default theme is selected
EDIT:
=> Here is my Main.axml file code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:weightSum="100"
android:minWidth="25px"
android:minHeight="25px"
android:layout_height="fill_parent">
<TextView
android:text="Create An Account"
android:id="#+id/tvCreateAccount"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_weight="20"
android:textColor="#368DEB"
android:gravity="center"
android:textStyle="bold"
android:textSize="25sp"
android:layout_width="match_parent"
android:layout_height="0dp" />
<Button
android:id="#+id/btnSignin"
android:text="Sign in"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:background="#drawable/btnSignInStyle"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:textSize="15sp" />
<TextView
android:text="Or"
android:id="#+id/tvOr"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:textColor="#000000" />
<Button
android:id="#+id/btnSignup"
android:text="Sign Up with Email"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:textSize="15sp" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="35"
android:minWidth="25px"
android:minHeight="25px">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="true"
android:id="#+id/progressBar1" />
</RelativeLayout>
</LinearLayout>
=> Here is the xml File that I am assigning to btnSignin
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<layer-list>
<item android:right="2dp" android:top="5dp">
<shape>
<corners android:radius="2dp"/>
<solid android:color="#D6D6D6"/>
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="#4A6EA9" android:startColor="#4A6EA9"/>
<stroke android:width="1dp" android:color="#BABABA"/>
<corners android:radius="4dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<item android:right="2dp" android:top="5dp">
<shape>
<corners android:radius="2dp"/>
<solid android:color="#D6D6D6"/>
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<corners android:radius="4dp"/>
<gradient android:angle="270" android:endColor="#7C97C1" android:startColor="#4A6EA9"/>
<stroke android:width="1dp" android:color="#BABABA"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>

After doing all sort of work arounds I finally Solved my Problem. What I did was downloaded the latest community version of Visual Studio 2015, and the Default Xamarin packages that were pre-installed in Visual Studio were not good for the health of my system. I just visited the Xamarin Site and downloaded the Xamarin components from there. and It installed other features plus the new Xamarin for VS2015, And now working it's fine on Xamarin Studio and on Visual Studio also!

Xamarin - Binary XML file line #1: Error inflating class <unknown>

I am currently developing a small Android app in Xamarin, using C#.
The following shows up when I run it on my emulator:
This line of code is called when the first tab is selected, which is by default, meaning that this error occurs as soon as I run the program. The XML snippet which seems to be causing the error is this, in one of my layout files:
android:background="#color/done"
This is in line 111 of Dialer.axml, the entirety of which is below. Here, I am trying to reference a color state list for my button, so that the color changes depending on whether it is being touched or not. I know that this line causes the error, because removing it from the button tag which it's in causes the program to run perfectly. Here is the code for done.xml, in my color folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#ff2222ff"/>
<item android:state_pressed="true" android:state_enabled="false" android:color="#ff4444ff"/>
<item android:state_enabled="false" android:color="#ff000000"/>
<item android:color="#ff0000ff"/>
</selector>
And here is the code for Dialer.axml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tableLayout1"
android:background="#2ec0ff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="50sp"
android:layout_marginBottom="40sp"
android:id="#+id/number"
android:editable="false"
android:singleLine="true"
android:scrollHorizontally="true"
android:gravity="right"
android:textColor="#fff" />
<TableRow
android:id="#+id/tableRow1"
android:layout_weight="1">
<Button
android:text="1"
android:layout_column="0"
android:id="#+id/button1"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="2"
android:layout_column="1"
android:id="#+id/button2"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="3"
android:layout_column="2"
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_weight="1">
<Button
android:text="4"
android:layout_column="0"
android:id="#+id/button4"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="5"
android:layout_column="1"
android:id="#+id/button5"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="6"
android:layout_column="2"
android:id="#+id/button6"
android:layout_weight="1"
android:layout_height="match_parent" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_weight="1">
<Button
android:text="7"
android:layout_column="0"
android:id="#+id/button7"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="8"
android:layout_column="1"
android:id="#+id/button8"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="9"
android:layout_column="2"
android:id="#+id/button9"
android:layout_weight="1"
android:layout_height="match_parent" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_weight="1">
<Button
android:text="*"
android:layout_column="0"
android:id="#+id/buttonStar"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="0"
android:layout_column="1"
android:id="#+id/button0"
android:layout_weight="1"
android:layout_height="match_parent" />
<Button
android:text="#"
android:layout_column="2"
android:id="#+id/buttonPound"
android:layout_weight="1"
android:layout_height="match_parent" />
</TableRow>
<Button
android:text="Done"
android:id="#+id/buttonDone"
android:background="#color/done"
android:layout_width="match_parent"
android:layout_height="80sp"
android:textSize="35sp"
android:layout_margin="5sp" />
</TableLayout>
What is causing the error? Am I referencing done.xml incorrectly? Did I place it in the wrong folder?
Thanks in advance.

Your done.xml is color state list but color state lists can not be used as backgrounds. You need to use state-list-drawable for background.
Here is the state-list-drawable version of your color state list:
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#ff2222ff" />
</shape>
</item>
<item android:state_pressed="true" android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#ff4444ff" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#ff000000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000ff" />
</shape>
</item>
</selector>
Put this into an xml file in your drawable file and make your layout button xml like this:
android:background="#drawable/done"
You can find similar question in this link:
How to set custom button state background color?