How to change ListView item text color in Xamarin.Android? - xamarin

I have a simple ListView like below : -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/asimplelistView1"
/>
I am binding this ListView by array ArrayAdapter using:
ArrayAdapter<string> arrayAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleExpandableListItem1,mItems);
My app secondary text color is white(#FFFFFF) and theme is android:Theme.Material.Light..
My problem is: I need to change item text color to gray because items text color is not visible on white background.
In Java we can do like below:
// Create a List from String Array elements
List<String> fruits_list = new ArrayList<String>(Arrays.asList(fruits));
// Create an ArrayAdapter from List
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>
(this, android.R.layout.simple_list_item_1, fruits_list){
#Override
public View getView(int position, View convertView, ViewGroup parent){
// Get the Item from ListView
View view = super.getView(position, convertView, parent);
// Initialize a TextView for ListView each Item
TextView tv = (TextView) view.findViewById(android.R.id.text1);
// Set the text color of TextView (ListView Item)
tv.setTextColor(Color.RED);
// Generate ListView Item using TextView
return view;
}
};
How to achieve this in C# using xamarin.android

I had that same situation and was able to fix it setting a new "item" entry on the styles.xml file:
<item name="android:textColorPrimary">#color/colorAccent</item>
The color value can be any entry reference to your colors.xml or an hexadecimal value

Related

How to do you change the color of the "underline" marking the selected tab on a TabbedPage in Xamarin.Forms?

I'm currently adding several different themes (10-ish) to a Xamarin.Forms app. I've figured out how to dynamically change the color of everything except the "underline" on a tab on TabbedPage (see the attached image).
Screenshot identifying the TabbedPage "underline" with a red rectangle
I've tried to set the five different color properties (that I know of) on the TabbedPage as well as the BackgroundColor on the ContentPages in the tabs:
TabbedPage tabbedPage = new TabbedPage { Title = "Tabbed Page" };
tabbedPage.BarBackgroundColor = Color.Black;
tabbedPage.BarTextColor = Color.Gray;
tabbedPage.SelectedTabColor = Color.Black;
tabbedPage.UnselectedTabColor = Color.Black;
tabbedPage.BackgroundColor = Color.Black;
tabbedPage.Children.Add(new ContentPage { Title = "Page 1", BackgroundColor = Color.Gray });
tabbedPage.Children.Add(new ContentPage { Title = "Page 2", BackgroundColor = Color.Gray });
await Application.Current.MainPage.Navigation.PushAsync(tabbedPage);
Is it possible to set the color of the "underline" in Xamarin.Forms? Or do I need to make platform-specific changes to achieve this?
Use app:tabIndicatorColor.
All you have to do is to create a Tabar.xml file with below code in the layout folder(create one if needed) in the Android project's Resources folder and change the color via app:tabIndicatorColor;
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.tabs.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0000"/>
And then add below code in onCreate method of MainActivity.cs
TabLayoutResource = Resource.Layout.Tabar;

creating childern from xaml and C# Xamarin Forms

I have 2 labels in my Xamarin forms page which are added from Xaml
I want to add a new label from C#
How is that possible?
Xaml Code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Lecture11.Page1">
<ContentPage.Content>
<StackLayout>
<Label Text="Label from Xaml" />
<Label Text="Hi There!!"
</StackLayout>
</ContentPage.Content>
</ContentPage>
`
C# Code:
public partial class Page1 : ContentPage
{
public Page1 ()
{
InitializeComponent ();
//Code to add the label to the page.....?
}
Label _lblNew = new Label
{
Text = "Label from C#",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
};
}
`
You would normally just create an instance of a 'Label' with whatever attributes you need it to have.
Label newLabel = new Label {
Text = "Hello, Forms!",
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
Then you simply add it to your view, it might be that your other labels are in a vertical stack layout, in which case you just have to add it to the stack layout in the position you'd like it.
mainStackLayout.Children.Add(newLabel);
Please find the Xamarin developer centre guide to the labels control here.

how to apply max height and enable scroll to Xamarin.Forms.Editor

I wanted chat application type user interface in my app & i am targeting android and iOS.
I am using Xamarin.Forms.Editor for reply
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black
}
in this case the editor height remains constant and allows scrolling and editor does not expands
Then i used InvalidateMeasure()
_replyEntry .TextChanged += (sender, e) => { this.InvalidateMeasure(); };
in this case editor expands as when the text requires more space but does not allow scroll inside editor and if user types long message then editor does not allows scroll and text goes behind the keyboard and not visible to user
Is there any way to enable scroll and give max height to edit either in xamarin.forms of by writing custom renderer
Thanks
Here is my code
public class abc : ContentPage
{
public abc()
{
Image attchment = new Image
{
Source = "attachment.png",
HorizontalOptions = LayoutOptions.Start
};
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black,
};
Button _sendButton = new Button
{
Text = "Send",
TextColor = Color.Black,
BackgroundColor = Color.Transparent,
HorizontalOptions = LayoutOptions.End
};
StackLayout replyStack = new StackLayout
{
Orientation = StackOrientation.Horizontal,
Padding = new Thickness(10),
Spacing = 10,
VerticalOptions = LayoutOptions.End,
Children = { attchment, _replyEntry, _sendButton }
};
Content = replyStack;
}
}
It looks like you will have to use a custom renderer to achieve what you are wanting.
There is a post here that has pretty much the same thing with what you are trying to achieve for Android.
In that demo it has an expanding multi-line EditText control (android:singleLine="false"), with only vertical scrollbars (android:scrollbars="vertical"), whilst disabling the horizontal scrollbars (android:scrollHorizontally="false").
You need to ensure the Editor' parent is expanding, then the editor will automatically expand too. If you make an empty contentpage and add an Editor, the is will just expand. If you place it inside a stacklayout, the you need to ensure that the stacklayout is expanding.

Style an EntryCell Xamarin Forms Android

I have an android custom renderer for a Xamarin Forms EntryCell control. As far as I can tell the EntryCell is a combination of an input and a label. I would like to modify the following properties:
Font of the EntryCell label
Color of the EntryCell Label
TextSize of the EntryCell Label
Color of the text of the input control
I have been able to change the colour and size of the EntryCell input using the code below
public class CustomEntryCellRenderer : EntryCellRenderer
{
protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
{
var cell = base.GetCellCore(item, convertView, parent, context) as EntryCellView;
if (cell != null)
{
var textField = cell.EditText as TextView;
textField.SetTextSize(Android.Util.ComplexUnitType.Dip, 20);
textField.SetTextColor(Color.FromHex("#FF8800").ToAndroid());
}
return cell;
}
}
Can you please let me know how I access the label part of the EntryCell?
There is no standard way to access label part of EntryCell.
You can use SetLabelTextColor to set its color.
If you really need to change the font as well, you could use ViewCell instead of EntryCell and define Label and Entry separately inside its template. In this case you probably will be able to set all the things you need without using custom renderer.

How to programatically scroll a scrollviewer and retain the animation

I have a page whose contents are horizontally wider than the phone, sort of like a Panorama but without all the parallax stuff, and I want to let the user flick to scroll, and also press a button to scroll to specified offsets within the scrollviewer. ScrollToHorizontalOffset works fine for the button, except that it loses the animation, and I want to retain the animation.
I am doing a very similar thing. I have created WizardControl and WizardPage user controls. The user can flick between pages or use next and previous buttons.
I have created a slide effect animation to move between pages. Here is the code:
Storyboard sb = SlideEffect(MainPanel, (-_pageWidth * pagesToMove));
sb.Completed += Slide_Completed;
sb.Begin();
private Storyboard SlideEffect(UIElement controlToAnimate, double positionToMove)
{
//Get position of stackpanel
GeneralTransform gt = controlToAnimate.TransformToVisual(MainGrid);
Point p = gt.Transform(new Point(0, 0));
//add new storyboard and animation
Storyboard sb = new Storyboard();
DoubleAnimation da = new DoubleAnimation { To = p.X + positionToMove };
Storyboard.SetTarget(da, controlToAnimate);
Storyboard.SetTargetProperty(da, new PropertyPath("(controlToAnimate.RenderTransform).(TransformTranslate.X)"));
ExponentialEase ee = new ExponentialEase { Exponent = 6.0, EasingMode = EasingMode.EaseOut };
da.EasingFunction = ee;
sb.Children.Add(da);
return sb;
}
MainPanel is a horizontal stack panel. Wizard pages are added to it.
_pageWidth matters as this works in both portrait and landscape mode.
pagestoMove is used as I have a button to return directly to the first page.
UPDATE - added Wizard main panel def and add page method
<StackPanel
x:Name="MainPanel"
Grid.Row="1"
Orientation="Horizontal"
RenderTransformOrigin="0.5,0.5"
Margin="0,0,0,10"
Width="480">
<StackPanel.RenderTransform>
<TranslateTransform
X="0" />
</StackPanel.RenderTransform>
</StackPanel>
public void AddPage(WizardPageControl page)
{
MainPanel.Width += _pageWidth;
page.PageWidth = _pageWidth;
double newRight = (MainPanel.Width - _pageWidth) * -1;
MainPanel.Margin = new Thickness(0, 0, newRight, 10);
MainPanel.Children.Add(page);
_wizardPageList.Add(page);
TotalPages++;
}

Resources