Android Wear CardFrame not adapting to shape of screen

Question

I'm using the CardFrame exactly like in the official tutorial.

However the card frame is getting displayed on my moto360 (round shaped display) with borders at the side. It is also displayed wrong in android studio. The Card is used in the first column of a GridViewPager and the CardScrollView should detect the shape automatically and display the cards depending on it. So, what am i missing?

Furthermore, i noticed that if i swipe to the right (to dismiss the view), don't release the screen and swipe back to the left... the card is displayed correct (without borders at the side). But if i scroll in the GridView it will be displayed wrong again.

<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/transparent">

<android.support.wearable.view.CardScrollView
    android:id="@+id/card_scroll_view"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    app:layout_box="bottom">

    <android.support.wearable.view.CardFrame
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/card"
        android:layout_gravity="bottom">

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="vertical">
            <TextView
                android:id="@+id/title"
                android:fontFamily="sans-serif-light"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:textColor="@color/grey"
                android:textSize="18sp"
                android:singleLine="true"
                android:ellipsize="end"/>
            <TextView
                android:id="@+id/fecha"
                android:fontFamily="sans-serif-light"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:textColor="@color/black"
                android:textSize="16sp"
                android:maxLines="2"
                android:ellipsize="end"/>
            <TextView
                android:id="@+id/distancia"
                android:fontFamily="sans-serif-light"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:textColor="@color/grey"
                android:textSize="14sp"/>
        </LinearLayout>
    </android.support.wearable.view.CardFrame>
</android.support.wearable.view.CardScrollView>

EDIT1: I created a repository with a small example: https://github.com/MeinLieberScholli/cardframebug and here a screenshot: https://i.stack.imgur.com/UDpxJ.png

score 0 · Answer 1 · answered Jul 21 '15 at 17:42

0

I just tried this: created a simple GridViewPager with two columns and put a CardFrame in each column, using your exact layout and it worked just fine on both square and round watches, with and without chin (and inside the emulator as well), there is no "border" and it looks as expected, regardless of swiping or not. You may need to look into your view pager setup or something like that. Here is a screenshot from an emulator:

enter image description here

answered Jul 21 '15 at 17:42

Ali Naddaf

16,951
2
21
28

I also implemented a very simple example and the result was, that the first two cards are getting displayed correct and the rest not. Furthermore, if i scroll to the fourth element and then back to the first two, they will be also displayed wrong. I will edit my post and add the github repository of my example and screenshots of the emulator. – MeinLieberScholli Jul 31 '15 at 07:40

Android Wear CardFrame not adapting to shape of screen

1 Answers1