how to expand a card in a custom Android Wear app?

Question

Does anyone know how to expand a card? I'm following the official developer guide to create a card into my custom wear app, but I'm still unable to expand the card. There is my onCreate method code extract:

    CardScrollView scv = (CardScrollView) findViewById(R.id.scp_credits_scroll);
    scv.setCardGravity(Gravity.BOTTOM);
    CardFrame cf = (CardFrame) findViewById(R.id.scp_credits_card_frame);
    cf.setExpansionEnabled(true);
    cf.setExpansionDirection(CardFrame.EXPAND_DOWN);
    cf.setExpansionFactor(EXPANSION_FACTOR);

And the EXPANSION_FACTOR constant is set to 50.0.

There is my layout:

    <?xml version="1.0" encoding="utf-8"?>
<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_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.wearable.view.CardFrame
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/scp_credits_card_frame">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                style="@style/Pager">

                <TextView
                    android:id="@+id/scp_card_title_text"
                    style="@style/PagerTitle"
                    android:text="@string/scp_credits"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/scp_card_margin" />
                <TextView
                    android:id="@+id/scp_credits_card_content_text"
                    style="@style/PagerMedium"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/scp_card_margin" />
            </LinearLayout>
        </android.support.wearable.view.CardFrame>
    </android.support.wearable.view.CardScrollView>
</android.support.wearable.view.BoxInsetLayout>

Answer 1

I found an easy solution/workaround.

This is my activity: ExampleCardActivity.java

// ...
import android.support.wearable.view.CardFragment;
import android.support.wearable.view.FragmentGridPagerAdapter;
import android.support.wearable.view.GridViewPager;

public class ExampleCardActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_example_card);
        GridViewPager gridViewPager = (GridViewPager) findViewById(R.id.gridViewPager);
        gridViewPager.setAdapter(new FragmentGridPagerAdapter(getFragmentManager()) {
            @Override
            public Fragment getFragment(int row, int col) {
                return CardFragment.create("Title", "This\nis\na\nvery\nvery\nlong\ndescription\nwith\nmany\nlines.\nTry it!");
            }

            @Override
            public int getRowCount() {
                return 1;
            }

            @Override
            public int getColumnCount(int rowNum) {
                return 1;
            }
        });
    }
}

and my layout: activity_example_card.xml

<android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.wearable.view.GridViewPager
        android:id="@+id/gridViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:keepScreenOn="true" />
</android.support.wearable.view.BoxInsetLayout>

Now scroll works fine!

Answer 2

I encountered similar issue. I had the following changes in the code:

    CardScrollView cardScrollView = (CardScrollView)view.findViewById(R.id.card_scroll_view);
    cardScrollView.setExpansionEnabled(true);
    cardScrollView.setCardGravity(Gravity.BOTTOM);
    cardScrollView.setExpansionFactor(10f);
    cardScrollView.setExpansionDirection(CardFrame.EXPAND_DOWN);
    CardFrame cardFrame = (CardFrame) view.findViewById(R.id.card_frame);
    cardFrame.setExpansionEnabled(true);
    cardFrame.setExpansionDirection(CardFrame.EXPAND_DOWN);
    cardFrame.setExpansionFactor(10f);

Still, adding those changes alone weren't sufficient to make the card expandable. So, I suspected that the container for CardScrollView, BoxInsetLayout, may be culprit. When I removed the BoxInsetLayout and made CardScrollView the root element, the card became expandable. Hope that this applies to your case as well.

Answer 3

If you want your card to be expanded simply don't set the expansion factor and have cf.setExpansionEnabled(true). This should expand all your cards to the needed size to show all the content.

On the other side if you try to achieve something like this:

1. Start with all cards collapsed
2. Swipe down until you decide to expand a certain card
3. Click to expand it
4. Scroll down until you read it all, then continue scrolling to move to the next card

I couldn't find a way to replicate this pattern, I'm not sure even if the navigation should happen like this. In the Google Keep app you can swipe down through cards (which have expansion factor 1.0f), but if you want to expand one - it leads you to a new Activity, where you can read the whole content. So after you scroll down to the end of the content you cannot continue scrolling down to the next card. To do that, you'll need to go back to the previous screen.

I'm not sure what exactly you want to achieve, but I hope that this info will help you.