Complex layout depending on parent´s size

Question

I need to implement a ListView with rows like the ones you see in the UI-Mockup:

I managed to handle different row layouts depending on the row´s data. The question is, which way would you go to implement the shown timeline layout? I started to use RelativeLayouts, using margins to place the marker and text at the correct positions on the timeline, however it makes a lot of troubles when scrolling the list. The TextViews are not always at the absolutely correct position.

This is the important part of the row´s layout (the 2nd row of the image with the long blue line):

<LinearLayout 
        android:id="@+id/progress"
        android:layout_height="50dp"
        android:layout_width="fill_parent"
        android:paddingBottom="10dp"
        android:paddingRight="10dp"
        android:layout_gravity="bottom">
        <RelativeLayout
            android:id="@+id/progressContainer"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_width="0px"
            android:layout_weight="6"
            >
            <RelativeLayout
                android:id="@+id/blue"
                android:background="#FF33B5E5"
                android:layout_width="fill_parent"
                android:layout_height="7dp"
                android:layout_alignParentBottom="true"
                />

            <tv.px.android.play.widget.CustomImageView android:id="@+id/progressMarker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/marker"
                android:layout_alignParentBottom="true"
                />
            <tv.px.android.play.widget.CustomTextView android:id="@+id/periodIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_above="@id/progressMarker"
                android:paddingBottom="2dp"
                />
        </RelativeLayout>
        <RelativeLayout 
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:layout_width="0px"
            >
            <RelativeLayout
                android:id="@+id/red"
                android:background="@drawable/red_fadeout_linear_gradient"
                android:layout_alignParentBottom="true"
                android:layout_width="fill_parent"
                android:layout_height="7dp"
                />
            <TextView android:id="@+id/periodEndIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sa"
                android:layout_above="@id/red"
                android:layout_alignParentLeft="true"
                android:paddingBottom="2dp"
                />
        </RelativeLayout>
    </LinearLayout>

In the CustomImageView I override the onMeasure method to calculate the position (leftMargin), which works good:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);

    int widthPerDay = width / daysTotal;
    int margin = (daysOver * widthPerDay) - getWidth()/2;

    ((RelativeLayout.LayoutParams) this.getLayoutParams()).leftMargin = margin;
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

In the CustomTextView I tried a similar way but it results in different positions. I guess there is a problem when recycling the Views in the Adapter like the width of the TextView is not updated. Edit: I just found out that the parentWidth differs from row to row.

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);

    int widthPerDay = parentWidth / daysTotal;
    int margin = (daysOver * widthPerDay) - getWidth() / 2;

    if (margin < 0) {
        margin = 0;
    }

    if (margin + getWidth() >= parentWidth) {
        margin = parentWidth - getWidth() - 10;
    }

    ((RelativeLayout.LayoutParams) this.getLayoutParams()).setMargins(margin, 0, 0, 0);
    this.requestLayout();
}

And last but not least the getView implementation of the Adapter:

@Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;

        View v = convertView;

        TimeLineItem ci = getItem(position);

        if (v == null) {
            LayoutInflater vi;
            vi = LayoutInflater.from(getContext());
            holder = new ViewHolder();

            v = vi.inflate(R.layout.cleaning_list_item, null);

                holder.marker = (CustomImageView) v.findViewById(R.id.progressMarker);
                holder.periodIndicator = (CustomTextView) v.findViewById(R.id.periodIndicator);

            }

            v.setTag(holder);

        } else {
            holder = (ViewHolder) v.getTag();
        }

        if (ci != null) {

                int daysTotal = 6;
                int daysOver = ci.getTotal();
                // CustomTextView
                holder.periodIndicator.setDaysTotal(daysTotal);
                holder.periodIndicator.setDaysOver(daysOver);
                if (daysTotal - daysOver == 1) {
                    holder.periodIndicator.setText("in einem Tag");
                } else {
                    holder.periodIndicator.setText("in " + (daysTotal - daysOver) + " Tagen");
                }
                // CustomImageView
                holder.marker.setDaysTotal(daysTotal);
                holder.marker.setDaysOver(daysOver);
                holder.marker.requestLayout();


        }

        return v;

    }

So, the first question is: am I on the right way to implement such a complex layout? And if so, what am I doing wrong? Why is the CustomTextView not correctly positioned?

Answer 1

If it gets too hard to do a custom display with the standard widgets and layouts, create a custom widget by subclassing View. Doing this is very easy: in your case, you probably only need to override onDraw to draw your custom display.