androidgridviewandroid-viewflipper

Two views with different heights in a viewflipper on a gridview tile


I have a GridView which has a ViewFlipper in each tile. Each view in the ViewFlipper has a different size, but when the tile is flipped, both views are forced to the same size as the GridView column. What i've tried:

grid_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp" android:layout_height="150dp">

<ViewFlipper
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:measureAllChildren="false"
    android:id="@+id/view_flipper_3"
    >

    <RelativeLayout
        android:layout_width="180dp"
        android:layout_height="150dp"
        android:id="@+id/front2"
        android:background="#088980"

        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/commitmentNumber"
            android:textSize="25dp"
            />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="220dp"
        android:layout_height="190dp"
        android:background="#000000"
        android:id="@+id/back_2"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:id="@+id/commitmentPartOne"
            android:paddingBottom="5dp"
            android:textSize="25sp"
            android:text="Part One"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/commitmentPartTwo"
            android:textSize="25sp"
            android:text="Part Two"
            android:paddingBottom="5dp"
            android:layout_below="@+id/commitmentPartOne"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/commitmentPartThree"
            android:textSize="25sp"
            android:text="Part Three"
            android:layout_below="@+id/commitmentPartTwo"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            />

    </RelativeLayout>

</ViewFlipper>

</RelativeLayout>

fragment_with_gridview.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<GridView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/sixCommitmentsGridView"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:numColumns="2"
    android:gravity="center"
    android:columnWidth="179dp"
    android:stretchMode="columnWidth"
    />
</RelativeLayout>

GridViewAdapter.java:

public class SixCommitmentsGridAdapter extends BaseAdapter {

Context context;
String[] numbers;

public SixCommitmentsGridAdapter(Context context, String[] numbers) {
    this.context = context;
    this.numbers = numbers;
}

@Override
public int getCount() {
    return numbers.length;
}

@Override
public Object getItem(int position) {
    return numbers[position];
}

@Override
public long getItemId(int position) {
    return 0;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    View view;
    final ViewFlipper flipper;
    TextView commitmentNumber;

    if(convertView == null){
       LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(R.layout.six_commitments_grid_item, parent, false);
    }else{
        view = convertView;
    }

    flipper = (ViewFlipper) view.findViewById(R.id.view_flipper_3);
    commitmentNumber = (TextView) view.findViewById(R.id.commitmentNumber);

    commitmentNumber.setText(numbers[position]);
    flipper.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(position % 2 == 0 || position == 0){
                AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.RIGHT_LEFT, 200);
            }else {
                AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.LEFT_RIGHT, 200);
            }

        }

    });

    return view;
}
}

Solution

  • Managed to achieve the same grid-style layout with my intented ViewFlipper effect using a StaggeredGridLayoutManager and a RecyclerView.