Android performance complex views

#1

Hi guys,

I have a view that has a list of cards (not the Ionic card), with two ng-repeats for each card column.

Each card have two images and a few texts.

On iOS every transition and scroll works fantastic but when I tested on an Android phone (Moto G Second generation Android 5.0) almost all transitions are slow and scroll is very very poor.

I tried to remove all box-shadow properties and tried to add bind once with ::. The performance got better but I still have issues. Still very slow compared to the iOS version.

Any tips?

#2

Try using <collection-repeat> and scroll should improve. And also using Android 5.0 webview I don’t see any reason why your app feels sluggish. It should be at par with IOS.

#3
<div class="padding" id="channels-list">
            <div class="row">
                <div class="col col-50">
                    <channel-tile ng-repeat="channel in evenChannels track by channel.id"></channel-tile>
                </div>
                <div class="col col-50">
                    <channel-tile ng-repeat="channel in oddChannels track by channel.id"></channel-tile>
                </div>
            </div>
        </div>

This is my main screen. Basically I have two columns with elements but each element can have a different height depending on the text of the tile and the image size of the tile.

Thats why I don’t know how to use collection-repeat in that case.

The channel tile element

<div class="a-card" ng-click="joinChannel(channel)">
    <div class="img-box">
        <img src="img/placeholder.jpg" class="channel-image" data-ng-src="{{::channel.current_schedule.image_url}}">
    </div>
    <div class="card-info">
        <img ng-src="{{::channel.image_url}}" class="channel-logo" alt="logo da emissora">

        <h2 class="channel-name">{{::channel.name}}</h2>

        <p class="channel-info">{{::channel.current_schedule.name}}</p>
        <p class="channel-info">100 participantes</p>
        <p class="rate channel-info">
            <i class="rate-icon ion-ios-star"></i>
            {{::channel.current_schedule.current_score || "-.-"}}
        </p>
        <button class="btn button-salmon">Entrar no chat</button>
    </div>
</div>

#4

I found a way to change to collection-repeat and everything is working perfectly now!

#5

Hi @grillorafael, I know it’s been a while since you found a solution, would you mind posting what you did? thanks a lot!