Intersoft Community - Crosslight - Crosslight ListView Styling

Crosslight ListView Styling

yudi — Mon, 22 Dec 2014 01:35:17 GMT

What I want to achieve is setting the background color of selected list items programmatically at runtime. On iOS this seems to work quite easy by setting "this.Appearance.CellSelectedBackgroundColor = UIColor.Green;" as you described. Is there a similar way on Android, too?

I'm afraid that there is no similar way on Android. You will need to do the styling via cell templates and xml.

Crosslight ListView Styling

thomas.albert@tea-net.ch — Thu, 18 Dec 2014 15:51:12 GMT

Hello Yudi,

doing all the styling at design time via templates and xml works. This is no problem.

But what about styling in code as I described above?

How can I understand your answer? Haven't you figured out how to do it yet or is it not possible at all to do this?

Thanks,

Thomas

Crosslight ListView Styling

yudi — Thu, 18 Dec 2014 07:32:34 GMT

For your information, I can use following snippet code to change button's background color (on a simple Android layout) at runtime.

protected override void InitializeView()
{
    base.InitializeView();

    Button btnSendFeedback = FindViewById<Button>(Resource.Id.SendFeedbackButton);
    btnSendFeedback.SetBackgroundColor(Color.Red);
}

However, I haven't managed to get the same approach working for customizing item style of custom cell template scenario. In the meantime, you can try to use the custom cell template way to set the style of listview items for Android platform.

Crosslight ListView Styling

thomas.albert@tea-net.ch — Tue, 16 Dec 2014 05:50:17 GMT

Any news?

Crosslight ListView Styling

thomas.albert@tea-net.ch — Thu, 11 Dec 2014 11:06:02 GMT

Hello Yudi,

Thank you for your answer. I think my original question was not precise enough to describe my problem. Sorry for that.

What I want to achieve is setting the background color of selected list items programmatically at runtime. On iOS this seems to work quite easy by setting "this.Appearance.CellSelectedBackgroundColor = UIColor.Green;" as you described. Is there a similar way on Android, too?

With a similar mechanism I would like to set the style of the text within a cell template. So commands like "this.Appearance.CellTextColorOfText1 = UIColor.Red" or "this.Appearance.CellFontWeightOfText1 = FontWeight.Bold" would be great (for both iOS and Android).

These commands should then work with the built-in cell templates as well as with custom cell templates.

Thanks,

Thomas

Crosslight ListView Styling

yudi — Tue, 09 Dec 2014 07:29:40 GMT

Customizing cell template technique can be used to implement this scenario, to set the style of listview items at runtime (setting the color of texts of a list item and setting the color of the list selector).

Create custom cell template for iOS UITableView

You can customize the appearance and presentation of cell template in a table view for iOS to match your business requirement. Your apps look better when the cell template are presented more intuitively, for instances, setting the color of label to a TableViewCell.

A how-to article, Create Custom Cell Template for iOS UITableView, will guide you to customize the appearance of cell template. After adding a label (in step: Create View for Custom Cell Template), you can change the textColor property of UILabel via Interface Builder.

Set the color of the list selector in iOS can be done by set the CellSelectedBackgroundColor property in OnInitializeView of the relevant view controller. The snippet code below shows how.

protected override void InitializeView()
{
    base.InitializeView();

    this.Appearance.CellSelectedBackgroundColor = UIColor.Green;
}

We can use DataSamples project and implement the above snippet code in SimpleListViewController.cs. The result will look like following screenshot.

Create custom cell template for Android

The steps to create custom cell template for Android is simple. First, we'll need to create view for custom cell template. For example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:minHeight="75dp">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        ...
        <TextView
            android:text="Label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:paddingRight="10dp"
            android:id="@+id/PriceLabel" />
    </LinearLayout>
    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="5" />
</LinearLayout>

Next, override ListItemLayoutId in activities that consumes the custom cell template. Simply pass in the layout that represents the custom cell template.

protected override int ListItemLayoutId
{
    get { return Resource.Layout.CustomTableCell; }
}

To set the color of text of a list item can be done by defining textColor of TextView (for example: android:textColor="#00FF00")

The result will look like following:

Hope this help.

Crosslight ListView Styling

thomas.albert@tea-net.ch — Fri, 05 Dec 2014 14:24:05 GMT

Hello Support,

is there a way how I can set the style of listview items at runtime. With style I mean, setting the color of texts of a list item and setting the color of the list selector.

An example for iOS and Android would be great.

Thanks,

Thomas