I'm trying to create a custom CardFragment where I have an icon that is above the card. Here's an example of what I'm trying to do:
So I found out two possibles solutions to do that.
Solution 1
Extending CardFragment and overriding onCreateContentView like proposed in the answer of this question. Since the CardFrame contains the view, we can only see half of the icon. At first, I thought it was only because clipChildren and clipToPadding wasn't set to false. So, I did the change for all the ViewGroup parents of the ImageView but it doesn't seem to work. I had the same result.
I abandoned this to solution to concentrate with the next one.
Solution 2
Extending a Fragment and using CardScrollView and CardFrame. With this solution, I was able to put the ImageView outside the CardFrame. It worked perfectly at the first execution of the loaded pages of the FragmentGridPagerAdapter (page(0)(0),page(0)(1),page(1)(0)). When getFragment is called after scrolling to a another page, it seems that CardScrollView doesn't expand the CardFrame. Here's the result:
MainActivity:
package cardfragment.test.com.cardfragmentexample;
import android.os.Bundle;
import android.support.wearable.activity.WearableActivity;
import android.support.wearable.view.BoxInsetLayout;
import android.support.wearable.view.GridViewPager;
import java.text.SimpleDateFormat;
import java.util.Locale;
public class MainActivity extends WearableActivity {
private static final SimpleDateFormat AMBIENT_DATE_FORMAT =
new SimpleDateFormat("HH:mm", Locale.US);
private BoxInsetLayout mContainerView;
private MontreGridPagerAdapter mAdapter;
private GridViewPager mPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setAmbientEnabled();
mContainerView = (BoxInsetLayout) findViewById(R.id.container);
mPager = (GridViewPager) findViewById(R.id.pager);
mAdapter = new MontreGridPagerAdapter(getFragmentManager());
mPager.setAdapter(mAdapter);
}
@Override
public void onEnterAmbient(Bundle ambientDetails) {
super.onEnterAmbient(ambientDetails);
updateDisplay();
}
@Override
public void onUpdateAmbient() {
super.onUpdateAmbient();
updateDisplay();
}
@Override
public void onExitAmbient() {
updateDisplay();
super.onExitAmbient();
}
private void updateDisplay() {
if (isAmbient()) {
mContainerView.setBackgroundColor(getResources().getColor(android.R.color.black));
} else {
mContainerView.setBackground(null);
}
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
android:id="@+id/container"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@color/black">
<android.support.wearable.view.GridViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.wearable.view.BoxInsetLayout>
FragmentGridPagerAdapter:
package cardfragment.test.com.cardfragmentexample;
import android.app.Fragment;
import android.app.FragmentManager;
import android.support.wearable.view.FragmentGridPagerAdapter;
public class MontreGridPagerAdapter extends FragmentGridPagerAdapter
{
public MontreGridPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getFragment(int row, int col)
{
return MyFragment.newInstance();
}
@Override
public int getRowCount()
{
return 4;
}
@Override
public int getColumnCount(int i) {
return 3;
}
}
Custom Fragment:
package cardfragment.test.com.cardfragmentexample;
import android.app.Fragment;
import android.os.Bundle;
import android.support.wearable.view.CardFrame;
import android.support.wearable.view.CardScrollView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class MyFragment extends Fragment {
public final static String TAG = MyFragment.class.getSimpleName();
private ImageView mIcon2;
private ImageView mIcon1;
private TextView mTitle;
private TextView mDescription;
private CardScrollView mCardScrollView;
private CardFrame mCardFrame;
public static MyFragment newInstance() {
MyFragment fragment = new MyFragment();
final Bundle args = new Bundle(1);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View vue = inflater.inflate(R.layout.fragment_my, container, false);
mIcon2 = (ImageView) vue.findViewById(R.id.icon2);
mIcon1 = (ImageView) vue.findViewById(R.id.icon1);
mTitle = (TextView) vue.findViewById(R.id.title);
mDescription = (TextView) vue.findViewById(R.id.description);
mCardScrollView = (CardScrollView) vue.findViewById(R.id.card_scroll_view);
mCardFrame = (CardFrame) vue.findViewById(R.id.card_frame);
/*mCardFrame.setExpansionEnabled(true);
mCardFrame.setExpansionDirection(1);
mCardFrame.setExpansionFactor(10.0F);
mCardScrollView.setExpansionEnabled(true);
mCardScrollView.setExpansionDirection(1);
mCardScrollView.setExpansionFactor(10.0F);*/
mIcon1.setImageResource(R.drawable.icon1);
mIcon2.setImageResource(R.drawable.icon2);
mTitle.setText("Title");
mDescription.setText("My description");
return vue;
}
}
fragment_my.xml :
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.wearable.view.CardScrollView
android:id="@+id/card_scroll_view"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.wearable.view.CardFrame
android:id="@+id/card_frame"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="bottom">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_info"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@id/title" />
<ImageView
android:id="@+id/icon1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</android.support.wearable.view.CardFrame>
</android.support.wearable.view.CardScrollView>
<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">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
app:layout_box="all">
<ImageView
android:id="@+id/icon2"
android:layout_width="30dp"
android:layout_height="30dp"/>
</RelativeLayout>
</android.support.wearable.view.BoxInsetLayout>
</RelativeLayout>
I tried to set the expansion direction and factor like suggested by others but I had the same problem. What am I missing to be able to expand the CardFrame correctly in the others pages?
