Currently, I'm looking to change the design of the button that closes the Android keyboard. Currently it looks like: Basic Android Keyboard. I want to remove the checkmark and replace it with some text like OK or Done without changing the whole keyboard.
Using ImeOptions, I know i can set the Android.Views.InputMethods.ImeAction to a default icon, but none of the default icons are what I'm looking for.
Using SetImeActionLabel("OK", Android.Views.InputMethods.ImeAction.Done), I can edit the text that's being shown, but it's only text. I need it to have the green, circular background. If I go with this route, I'm unsure on how I can edit the styles of this ActionLabel. Here is a picture for reference: Android Keyboard with OK.
I'm having a lot of trouble finding a similar example or problem and can't exactly solve it myself.
You cann add shape to it as a background
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
{
base.OnElementChanged(e);
var newCustomEntryElement = e.NewElement as CustomEntry;
if (Control == null || newCustomEntryElement == null)
{
return;
}
Control.ImeOptions = ImeAction.Go;
Control.SetImeActionLabel("Go", ImeAction.Go);
var shape = new ShapeDrawable(new RectShape());
shape.Paint.Color = Android.Graphics.Color.Red;
shape.Paint.StrokeWidth = 0;
shape.Paint.SetStyle(Paint.Style.Stroke);
Control.SetBackground(shape);
}
Related
I'm pretty new to Android development and completely new to Kotlin. I have an app with a navigation drawer, and am trying to change the color of the AppBarLayout based on what the user selects from the navigation drawer. I've tried a few different methods, and the closest I've come has been to change the toolbar color instead of the whole AppBar. This might be acceptable, but instead of actually setting it to the color I want, it always changes it to a dark grey.
when (item.itemId) {
R.id.nav_audit -> {
txtMain.text = "Audit"
toolbar.setBackgroundColor(R.color.colorAudit)
loadAudits()
}
R.id.nav_testing -> {
txtMain.text = "Testing"
toolbar.setBackgroundColor(R.color.colorTesting)
}
R.id.nav_workflow -> {
txtMain.text = "Workflow"
toolbar.setBackgroundColor(R.color.colorWorkflow)
}
R.id.nav_other -> {
txtMain.text = "Other"
toolbar.setBackgroundColor(R.color.colorPrimary)
}
}
I've also looked at possibly changing the theme, but it looks like it may not be easy to do that after the application has already loaded. Any thoughts are appreciated.
Besides changing the color of the Toolbar that you are already doing, one way to change the status bar in Kotlin is like this:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
(activity as? AppCompatActivity)?.window?.statusBarColor =
ContextCompat.getColor(context, R.color. colorTesting)
}
You could do a method that returns the color depending on itemId
I try to change the items font size in Xamarin.Picker for my Android app. In my project, I use BindablePicker that inherits from Picker class. Source here.
I spent some time to do research and I found that I should create a PickerRenderer class and render the Picker.
My renderer class:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
var picker = e.NewElement;
BindablePicker bp = (BindablePicker)this.Element;
if (this.Control != null)
{
var pickerStyle = new Style(typeof(BindablePicker))
{
Setters =
{
new Setter { Property = VisualElement.BackgroundColorProperty, Value = Color.Red }
}
};
picker.Style = pickerStyle;
}
}
}
For test purposes I set the backgroundColor for Picker and it works fine. However, in my PickerRenderer class I only have access to Control property which is type of Android.Widget.EditText.
The effect :
Question
How can I access to Picker items, and set the font size for them? Is this possible?
Here is my repository with an example project.
https://github.com/k8mil/PickerRendererXamarin
Related links
https://developer.xamarin.com/api/type/Xamarin.Forms.Picker/
Changing the default text color of a Picker control in Xamarin Forms for Windows Phone 8.1
Font size in Picker control in xamarin forms
I has been able to resolve this by add the line:
Control.TextSize = 30;
On OnElementChanged method:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (this.Control != null)
{
Control.TextSize = 30;
}
}
}
Maybe this can help someone that is looking for change font size of a Bindable picker.
After some research I don't think this is possible for a generic picker.
You would likely have an easier time just rolling your own picker control in Forms code using a clickable label that pops up a list to select from.
I was able to style a date or time picker using styles in the Android styles.xml file, but since Android does not have a built in generic picker widget, I imagine that Forms is rolling it's own picker list as I can't find the dialog widget to theme that changes your list text size.
For a DatePicker, I can just add the following to the main style element in styles.xml:
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
and then add a new style element in style.xml
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="android:textSize">60sp</item>
</style>
The above does change the text size for a DatePicker (no custom renderer required). Also the customer picker renderer is a bit of a misnomer... it really is just rendering the edit text field that shows the picked item, and allows opening the picker list on click.
I know this is not a solution, but just an indication as to what I found when checking this out and a suggestion that it is likely easiest to not use the Forms Picker type if you want such customization.
I have a Xamarin.Forms SearchBar on a StackLayout with a dark background color.
By default the input field is dark as well, probably due to a transparent background. To modify the search bar background color there is a BackgroundColor property. (In the example below I set it to dark gray.)
But how to adjust the text color? There is no such property. And even with a custom search bar renderer I don't find a solution.
This is how it looks with just the placeholder:
...and with some input (black "Hello world!" on a pretty dark background):
Here is the code for an Android Custom renderer that will do the trick. I would upload a screenshot, but I don't have enough points yet :(
using System;
using Android.Widget;
using Android.Text;
using G = Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly:ExportRenderer( typeof(MySearchBar), typeof(Some.Namespance.MySearchBar_Droid) )]
namespace Some.Namespace
{
public class MySearchBar_Droid : SearchBarRenderer
{
protected override void OnElementChanged( ElementChangedEventArgs<SearchBar> args )
{
base.OnElementChanged( args );
// Get native control (background set in shared code, but can use SetBackgroundColor here)
SearchView searchView = (base.Control as SearchView);
searchView.SetInputType( InputTypes.ClassText | InputTypes.TextVariationNormal );
// Access search textview within control
int textViewId = searchView.Context.Resources.GetIdentifier( "android:id/search_src_text", null, null );
EditText textView = (searchView.FindViewById( textViewId ) as EditText);
// Set custom colors
textView.SetBackgroundColor( G.Color.Rgb( 225, 225, 225 ) );
textView.SetTextColor( G.Color.Rgb( 32, 32, 32 ) );
textView.SetHintTextColor( G.Color.Rgb( 128, 128, 128 ) );
// Customize frame color
int frameId = searchView.Context.Resources.GetIdentifier( "android:id/search_plate", null, null );
Android.Views.View frameView = (searchView.FindViewById( frameId ) as Android.Views.View);
frameView.SetBackgroundColor( G.Color.Rgb( 96, 96, 96 ) );
}
}
}
You can achieve this by creating a custom View that has a bindable-property like ForegroundTextColor and then create a custom renderer.
In the custom renderer you can inherit from the platform specific renderer, i.e. on WindowsPhone it is:-
Xamarin.Forms.Platform.WinPhone.SearchBarRenderer
You can then monitor for property changes to the bindable-property you created and set the platform native control Text-color that is used to change the appearance of the non-editing view of the SearchBar.
You also have to monitor for IsFocused and apply the colouring on WindowsPhone, at least, also. This may also apply for other platforms possibly as well.
Update 1:-
========
In reply to your comment you don't have to render the whole SearchBar yourself.
If you inherit from the renderer you are able to customize things finer.
With specific reference to Android to achieve this you have to get reference to AutoCompleteTextView and then you can call SetTextColor to change the color.
Update 2:-
==========
SearchBar is a composite control in Android.
The AutoCompleteTextView is buried rather deep in the hierarchy.
On 4.4 this can be found using the following code. Other versions may well differ. This is by no means a good approach necessarily for production using ordinal indexes however:-
AutoCompleteTextView objAutoTextView = (AutoCompleteTextView)(((this.Control.GetChildAt(0) as ViewGroup).GetChildAt(2) as ViewGroup).GetChildAt(1) as ViewGroup).GetChildAt(0);
Where this is the renderer class.
You can then call objAutoTextView.SetTextColor with the color to achieve the change in color to the SearchBar foreground text.
I finally found a very simple solution:
I accidentally used the Android Theme #android:style/Theme.Holo.Light and modified all colors explicitly. But to get a bright text color on a search bar you better use #android:style/Theme.Holo.
It does not allow you to set the color very precisely, but changing it from black to white was all I needed in this case.
You can make the following changes in the xaml if you are using xaml to obtain the different text color of search bar on different platforms:
<SearchBar x:Name="Search"
Placeholder="Search"
TextChanged="SearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
<SearchBar.TextColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>
Black
</OnPlatform.iOS>
<OnPlatform.Android>
White
</OnPlatform.Android>
<OnPlatform.WinPhone>
White
</OnPlatform.WinPhone>
</OnPlatform>
</SearchBar.TextColor>
</SearchBar>
Here's how I did it, another way:
[assembly: ExportRenderer(typeof (CustomSearchBar), typeof (CustomSearchBarRenderer))]
namespace Bahai.Android.Renderers
{
public class CustomSearchBarRenderer : SearchBarRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
SearchBar element = (SearchBar) this.Element;
var native = (global::Android.Widget.SearchView) Control;
// do whatever you want to the controls here!
//--------------------------------------------
// element.BackgroundColor = Color.Transparent;
// native.SetBackgroundColor(element.BackgroundColor.ToAndroid());
// native.SetBackgroundColor(Color.White.ToAndroid());
//The text color of the SearchBar / SearchView
AutoCompleteTextView textField = (AutoCompleteTextView)
(((Control.GetChildAt(0) as ViewGroup)
.GetChildAt(2) as ViewGroup)
.GetChildAt(1) as ViewGroup)
.GetChildAt(0);
if (textField != null)
textField.SetTextColor(Color.White.ToAndroid());
}
}
}
}
SearchBar has a TextColor property. At least in Xamarin 5.
<SearchBar
TextColor="Black"
Text="{Binding SearchString}">
I wanted to try out this funny title bar coloring, but it doesn't work for me as
getWindow().findViewById(android.R.id.title);
returns null. So I had a look at it with Hierarchy Viewer and found out that the view is called id/action_bar instead. But there's no R.id.action_bar (autocomplete doesn't offer it and there's nothing like this is R.java).
So now I'm doubly confused:
Is android.R.id.title sort of obsolete now (I'm using version 16 in my emulator)?
Where does id/action_bar come from?
What's the recommended and simple practice w.r.t. compatibility?
Should I get ActionBarSherlock? I originally just wanted to change the title bar color... not fool around with it a lot.
Use the code below to get the ActionBar's id:
val actionBarId = resources.getIdentifier("action_bar", "id", packageName)
And use findViewById you can find the action bar.
Then find the title from actionbar's children (in normal cases):
val actionbar = findViewById<ViewGroup>(actionBarId)
for (view in actionbar.children) {
if (view is TextView) {
// this is the titleView
}
}
However, if you just want to change the title view's text, just use getSupportActionBar:
supportActionBar?.apply {
// set title text
title = "Hello"
// set colored title text
val coloredTitle = SpannableString("Hello")
coloredTitle.setSpan(ForegroundColorSpan(Color.RED), 0, coloredTitle.length, 0)
title = coloredTitle
}
I would recommend using ActionBarSherlock if you're looking for compatibility with Android versions before API level 14 / Android 4.0.
Changing the background of the ActionBar is straightforward and is most easily done via styles. See the "Background" section of http://android-developers.blogspot.com/2011/04/customizing-action-bar.html
You can also change it via code. Put this in your onCreate():
GradientDrawable gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, new int[] {Color.RED, Color.GREEN});
getActionBar().setBackgroundDrawable(gradientDrawable);
Here is a screenshot of this code in action:
Trying to make an Android InputMethod that is transparent - i.e. the underlying content shows through to the keyboard that I am developing.
I've been able to make the View that I pass to the system transparent - I think - but there seems to be something underneath my view that is solid white - and obfuscating the underlying content.
It is definitely possible, these guys do it:
https://play.google.com/store/apps/details?id=com.aitype.android.tablet.p&feature=search_result#?t=W251bGwsMSwxLDEsImNvbS5haXR5cGUuYW5kcm9pZC50YWJsZXQucCJd
I figured it out! Not sure if this is how the guys in your play store link did it, but this is what worked for me. Also, I realize this post is over a year old, but I'm still answering it just in case someone else out there discovers this when trying to create a transparent keyboard.
The "something" under your view is actually nothing - it's empty space. Your keyboard pushed the entire view up and out of the way to make room for its height, leaving empty white space behind. Your transparent keyboard let this white space show through.
Here's the solution: instead of returning your view in onCreateInputView, return it in onCreateCandidatesView. That's the view that normally lives above the keyboard and lists the autocorrect suggestions. But you're going to use this to house your actual keyboard.
The reason you want to have your keyboard be a candidates view is because the input view most often pushes the underlying view up. Individual apps can decide how they want to behave when a keyboard is shown via android:windowSoftInputMode and the input view respects their preference, but the candidates view always uses adjustPan.
From the docs: "Note that because the candidate view tends to be shown and hidden a lot, it does not impact the application UI in the same way as the soft input view: it will never cause application windows to resize, only cause them to be panned if needed for the user to see the current focus." http://developer.android.com/reference/android/inputmethodservice/InputMethodService.html
So, return your transparent view from onCreateCandidatesView, return null from onCreateInputView and make sure to call setCandidatesViewShown(true) so your candidates view shows up (I call it in onWindowShown).
Normally InputMethodServices uses background color which is same with current binding application's background color. If you want to make this transparent, I think you should make it as popup-window structure, not an inputmethod window I think.
It may such easy to make the full screen keyboard layout extra area transparent via java reflection only if you're quite familiar with InputMethodService.
the extra area has an id name fullscreenArea, you can fetch the area's id, then findViewById() then set its background.
the keyboard look as this before I done my practice :
a giant blank cover the below page.
so after is :
you can see the below page which contained an EditText and others displayed.
here is my code :
public static void makeKeyboardTransparent(InputMethodService service) {
try {
View decorView = service.getWindow().getWindow().getDecorView();
final int viewId = fetchInternalRId("fullscreenArea");
View fullscreenArea = decorView.findViewById(viewId);
if (fullscreenArea != null) {
modifyView(fullscreenArea);
return;
}
} catch (Exception e) {
}
try {
Class<?> superClass = service.getClass().getSuperclass();
Field fullscreenAreaField = superClass.getDeclaredField("mFullscreenArea");
fullscreenAreaField.setAccessible(true);
View fullscreenArea = (View) fullscreenAreaField.get(service);
if (fullscreenArea != null) {
modifyView(fullscreenArea);
}
} catch (Exception e) {
}
}
private static void modifyView(View fullscreenArea) {
fullscreenArea.setBackgroundColor(Color.TRANSPARENT);
}
private static int fetchInternalRId(String name) throws Exception {
Class<?> rIdClass = Class.forName("com.android.internal.R$id");
return rIdClass.getDeclaredField(name).getInt(rIdClass);
}
I provided two approach to make the blank area transparent, both of them worked fine in my test, all you need is pass your InputMethodService into makeKeyboardTransparent() and see what it can do.