Android TV, how to change color of title and color of headeritem? - android-tv

I want to change title color(Hello Android TV!) and headeritem for row color(GridItemPresenter).

To change the list row header style you must use custom ListRowPresenter:
public class CustomListRowPresenter extends ListRowPresenter {
public CustomListRowPresenter() {
super();
setHeaderPresenter(new CustomRowHeaderPresenter());
}
}
public class CustomRowHeaderPresenter extends RowHeaderPresenter {
#Override
public Presenter.ViewHolder onCreateViewHolder(ViewGroup parent) {
Presenter.ViewHolder viewHolder = super.onCreateViewHolder(parent);
RowHeaderView rowHeaderView = (RowHeaderView) viewHolder.view;
rowHeaderView.setTypeface(...);
rowHeaderView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, ...);
return viewHolder;
}
}
Haven't had any direct experience with BrowseFragment, but I expect there is some kind of a custom presenter too.

public class CustomListRowPresenter extends ListRowPresenter {
public CustomListRowPresenter() {
super();
setHeaderPresenter(new CustomRowHeaderPresenter());
}
}
class CustomRowHeaderPresenter extends RowHeaderPresenter {
#Override
public void onBindViewHolder(Presenter.ViewHolder viewHolder, Object item) {
HeaderItem headerItem = item == null ? null : ((Row) item).getHeaderItem();
RowHeaderPresenter.ViewHolder vh = (RowHeaderPresenter.ViewHolder) viewHolder;
TextView title = vh.view.findViewById(R.id.row_header);
if(!TextUtils.isEmpty(headerItem.getName())) {
title.setText(headerItem.getName());
title.setTextColor(ContextCompat.getColor(FiosTVApplication.getAppContext(),
R.color.white));
title.setTypeface(ResourcesCompat.getFont(title.getContext(), R.font.nhaasgroteskdsstd_bold));
title.setTextSize(TypedValue.COMPLEX_UNIT_SP,16);
}
}
}

Another simple way to set color for header text is to override leanback color in xml:
<color name="lb_browse_header_color">#f00</color>
advantage/drawback: it set color for all headers.

Might be a bit late but for whosoever is still looking
<style name="AppTheme" parent="#style/Theme.AppCompat.Leanback">
<item name="rowHeaderStyle">#style/MediaHeader</item>
</style>
<style name="MediaHeader">
<item name="android:textAppearance">#style/MyMediaTextStyle</item>
</style>
<style name="MyMediaTextStyle">
<item name="android:fontFamily">#font/roboto</item>
<item name="android:textSize">30sp</item>
<item name="android:textColor">#android:color/white</item>
</style>

Change rowHeaderStyle in your theme
<style name="Header" parent="Widget.Leanback.Header"> <item name="android:textAppearance">#style/YourApperance</item> </style>

Related

Xamarin Forms Shell TabBar Rounded Corner

I'd like to know if there's a renderer to allows me to use a rounded corner in the tabbar using Shell, like in the image above.
You could do it in your custom shellrenderer :
create the MyShellRenderer in your android project:
[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace your namepace
{
class MyShellRenderer:ShellRenderer
{
public MyShellRenderer(Context context) : base(context)
{
}
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new MyShellBottomNavViewAppearanceTracker();
}
}
}
define the MyShellBottomNavViewAppearanceTracker:
namespace ShellDemo.Droid
{
class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(BottomNavigationView bottomView)
{
}
public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
}
}
}
create the round corner drawable bottombackground.xml in your Resources/drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f00" />
<corners android:topLeftRadius="20dp"
android:topRightRadius="20dp"
/>
</shape>
the effect :
Update for ios:
the similar to android
MyShellRenderer:ShellRenderer class
[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace your namepace
{
class MyShellRenderer:ShellRenderer
{
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new MyShellTabBarAppearanceTrancker();
}
}
}
MyShellTabBarAppearanceTrancker class:
class MyShellTabBarAppearanceTrancker : IShellTabBarAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(UITabBarController controller)
{
}
public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
UIBezierPath uIBezierPath = UIBezierPath.FromRoundedRect(controller.TabBar.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(30, 30));
CAShapeLayer cAShapeLayer = new CAShapeLayer();
cAShapeLayer.Frame = controller.TabBar.Bounds;
cAShapeLayer.Path = uIBezierPath.CGPath;
controller.TabBar.Layer.Mask = cAShapeLayer;
}
public void UpdateLayout(UITabBarController controller)
{
}
}

Override TableRow styling on TableCell

so I have the following problem.
I have a JavaFX TableView, where all the Cells has the same styling but one. For that one cell I would like to remove all the styling, but I guess the RowFactory has some priority or whatever.
I have some kind of code like that:
FXML
<TableView fx:id="tableView">
<columns>
<TableColumn fx:id="tcolNoStyle"/>
<TableColumn fx:id="tcolStyled"/>
</columns>
</TableView>
Controller
public class TableController {
#FXML
TableView<TableData> tableView;
#FXML
TableColumn<TableData, String> tcolNoStyle;
#FXML
TableColumn<TableData, String> tcolStyled;
#FXML
public void initialize(){
tableView.setRowFactory(row -> new RowFactory());
tcolNoStyle.setCellFactory(cell -> new CellFactoryForNoStyling());
}
}
The Data behind the table
public class TableData {
public final SimpleStringProperty noStyleTextProperty;
public final SimpleStringProperty styledTextProperty;
public TableData(){
noStyleTextProperty = new SimpleStringProperty();
styledTextProperty = new SimpleStringProperty();
}
}
RowFactory
public class RowFactory extends TableRow<TableData> {
public RowFactory(){
itemProperty().addListener(((observable, oldValue, newValue) -> {
if (newValue != null){
setStyle("-fx-text-alignment: right");
}
}));
}
}
CellFactory that one no styled Cell
public class CellFactoryForNoStyling extends TableCell<TableData, String> {
public CellFactoryForNoStyling(){
super();
setStyle(null);
}
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
setStyle(null);
}
}
So what I want is, that only that one column should have no style
Thank you in advance!
The problem here is the fact that the -fx-text-alignment property is inherited. setStyle(null) only makes sure there are no additional changes done for the node it's called for.
The probably simplest option would be to simply specify the default value using setStyle:
public CellFactoryForNoStyling() {
setStyle("-fx-text-alignment: left");
}
You could leave the styling to a CSS stylesheet though. This is much more convenient than using inline styles, since it's much easier this way to deal with selection, focus, ect.
You could e.g. add the following stylesheet to the scene; this way you do not to use a custom cellValueFactory/rowFactory:
/* default cell style */
.my-table .table-cell {
-fx-text-alignment: right;
}
/* overwrite above style using selector with higher specifity */
.my-table .table-cell.unstyled {
-fx-text-alignment: inherit;
}
<TableView fx:id="tableView" styleClass="my-table"> <!-- style class added here-->
<columns>
<TableColumn fx:id="tcolNoStyle" styleClass="unstyled"/> <!-- style class added here -->
<TableColumn fx:id="tcolStyled"/>
</columns>
</TableView>

My scroll view does not responding i can not scroll down

In my XAML file, I used scroll view for scroll down but it does not work I can not find any issue where I did a couple of extra things here one is I add pull to refresh nuget and use it and I create a theme content class and I inherited it with default content page. another command in content page is working but scroll view does not support
Here my Xaml file
<views:BaseContentPage.Content>
<ScrollView BackgroundColor="White">
<controls:PullToRefreshLayout x:Name="PullToRefreshLayout" IsPullToRefreshEnabled="True" RefreshCommand="RefreshPatientDetailsPage">
<StackLayout>
// some code
</StackLayout>
</controls:PullToRefreshLayout>
</ScrollView>
</views:BaseContentPage.Content>
this is the Base content page I create
public abstract class BaseContentPage : ContentPage
{
public readonly BaseViewModel BaseViewModel;
protected bool IsNavigated;
public BaseContentPage(BaseViewModel baseViewModel)
{
BaseViewModel = baseViewModel;
}
protected abstract override void OnAppearing();
protected override void OnDisappearing()
{
IsNavigated = true;
}
}
I think this scroll view does not work because of the NuGet I put or it's the base content page
for android, I used this customer render
public class SortPaneListViewRendererAndroid : ListViewRenderer
{
public SortPaneListViewRendererAndroid(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.VerticalScrollBarEnabled = false;
var listView = Control as Android.Widget.ListView;
listView.DividerHeight = 1;
}
}
}
The reason this was happening is because you are nesting scrollable controls, Removing one of them will solve the issue

How to Decrease Height of Navigation bar in xamarin forms

I have used MasterDetail page as main page of my app. Here TabbedPage is my detail page which contain various ContentPage as children of TabbedPage. I have set Details as Detail = NavigationPage(tabbedpage); it work great for IOS but in android it occupie more space in NavigationBar title and Tabbed Name, I cannot omit both, my question is how can i reduce the height of title bar of navigation page.
Please check attached image for reference.
You need to set padding platform specific for example.
<OnPlatform x:TypeArguments="FontAttributes" x:Key="fontAttributes">
<OnPlatform.iOS>Bold</OnPlatform.iOS>
<OnPlatform.Android>Italic</OnPlatform.Android>
</OnPlatform>
You need to implement a CustomNavigationPage with a Custom renderer. Refer this - https://xamgirl.com/transparent-navigation-bar-in-xamarin-forms/
<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransparentNavBarXForms.CustomNavigationPage"
BarTextColor="White">
<NavigationPage.BarBackgroundColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="Android, iOS" Value="Transparent" />
</OnPlatform>
</NavigationPage.BarBackgroundColor>
</NavigationPage>
public partial class CustomNavigationPage : NavigationPage
{
public CustomNavigationPage() : base()
{
InitializeComponent();
}
public CustomNavigationPage(Page root) : base(root)
{
InitializeComponent();
}
public bool IgnoreLayoutChange { get; set; } = false;
protected override void OnSizeAllocated(double width, double height)
{
if (!IgnoreLayoutChange)
base.OnSizeAllocated(width, height);
}
}
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
public CustomNavigationPageRenderer(Context context) : base(context)
{
}
IPageController PageController => Element as IPageController;
CustomNavigationPage CustomNavigationPage => Element as CustomNavigationPage;
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
CustomNavigationPage.IgnoreLayoutChange = true;
base.OnLayout(changed, l, t, r, b);
CustomNavigationPage.IgnoreLayoutChange = false;
int containerHeight = b - t;
PageController.ContainerArea = new Rectangle(0, 0, Context.FromPixels(r - l), Context.FromPixels(containerHeight));
for (var i = 0; i < ChildCount; i++)
{
AView child = GetChildAt(i);
if (child is Android.Support.V7.Widget.Toolbar)
{
continue;
}
child.Layout(0, 0, r, b);
}
}
}
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new CustomNavigationPage(new MainPage());
}
}

Custom flex mx Canvas borderThickness doesn't work

package custom
{
import mx.containers.Canvas;
public class CustomCanvas extends Canvas
{
public function CustomCanvas()
{
super();
}
override protected function commitProperties():void
{
super.commitProperties();
this.setStyle('backgroundColor',0x0055ff);
this.setStyle('borderColor',0x00aaff);
this.setStyle('borderThickness',5);
this.setStyle('borderStyle',"solid");
}
}
}
The style borderThickness doesn't apply. What Iwrong with canvas style initialization?
Use this link to address your issue. You need quotes surrounding the "5" for your border thickness:
canvasEdit.setStyle("borderThickness","5");

Resources