Question

So I want to create this UI below. It is for a College class and I don’t have much time left. I have everything working but I can’t wrap my head around making the list of events. I have a java class eventList that populates a List with data from a database. Any suggestions? Will I have to just dynamically add 2 buttons (up/down) and enough text views to supply the data? How will I keep it formatted if I do something like that? Should I put it all in a scrollview on the mainPage?

Answer 1

Make it a ListView with a custom adapter. Each row can be be designed as a RelativeLayout, so you can put your event name, location and such in there.

The adapter will look something like this: (code sanitized)

public class POPublicationAdapter extends ArrayAdapter<Wrap<POUserPublication>> {
    private final Context context;
    ... 
    private OnClickListener faveClick;
    private OnClickListener shortClick;
    ...

    public POPublicationAdapter( Context context, List<WrapPO<POUserPublication>> values, 
            OnClickListener faveClick, OnClickListener shortClick, ... ) {
        super(context, R.layout.row_publication, values);
        this.context = context;
        this.listId = listId;
        this.faveClick = faveClick;
        this.shortClick = shortClick;
            ...
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        WrapPO<POUserPublication> item = getItem(position);
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = null;

        if( item.item != null ){
            rowView = inflater.inflate(R.layout.row_publication, parent, false);
            rowView.setTag( item );
            TextView tvLabel = (TextView) rowView.findViewById(R.id....);
            ImageView ivPubFavorite = (ImageView) rowView.findViewById(R.id....);

            TextView tvSubLabel = (TextView) rowView.findViewById(R.id.publicationSublabel);
            tvLabel.setText( item.item.pub().get( PO.displayName ) );
            if( !item.item.pub().existsDefault() ) {

            }
            if( listId == POLayer.LIST_REQUIRED ) 
                tvSubLabel.setText(String.format("(Due on %1$TD)", item.item.asDate( PO.dueDate )));
            else if( listId == POLayer.LIST_PREVIEW )
                tvSubLabel.setText( String.format( "(Preview until %1$TD)", item.item.pub().asDate( PO.distributionDate ) ) );
            else
                tvSubLabel.setText( item.item.getTouchInfo() );

            if( this.listId == POLayer.LIST_FAVE ){
                setOfflineImage(ivPubFavorite, SG.isOnline, item.item.isFavorite() ? R.drawable.ls_star_remove : R.drawable.ls_star_grey );
            } else {
                setOfflineImage(ivPubFavorite, SG.isOnline, item.item.isFavorite() ? R.drawable.ls_star_gold : R.drawable.ls_star_grey );
            }
            ivPubFavorite.setClickable(true);
            ivPubFavorite.setTag(item);
            ivPubFavorite.setOnClickListener( faveClick );

            ivNot.setClickable( false );
            if( listId == POLayer.LIST_REQUIRED || listId == POLayer.LIST_UNREAD ) {
                ivNot.setTag(item);
                ivNot.setOnClickListener( notClick );
                if( item.item.isRequired() ) {
                    if( item.item.isComplete() ) {
                        setOfflineImage( ivNot, item.item.asString( PO.offlineUTC ).isEmpty(), R.drawable.ls_doc_confirmed );
                    } else {
                        ivNot.setClickable(true);
                        ivNot.setImageResource( R.drawable.ls_doc_pencil );
                    }
                } else {
                    if( item.item.isComplete() ) {
                        ivNot.setImageResource(R.drawable.ls_check_green);
                    } else {
                        ivNot.setClickable(true);
                        setOfflineImage( ivNot, SG.isOnline, R.drawable.ls_check_grey );
                    }
                }   
            } else {
                ivNot.setVisibility( View.GONE );
            }
        } else {
            switch( item.itemType ) {
            case WrapPO.HEADER_EMPTY:
                rowView = inflater.inflate( R.layout.row_header_empty, parent, false);
                break;
            case WrapPO.HEADER_MORE:
                rowView = inflater.inflate( R.layout.row_header_more, parent, false);
                break;
            default:
                rowView = inflater.inflate( R.layout.row_header, parent, false);
            }
            TextView tvLabel = (TextView) rowView.findViewById(R.id.tvHeader);
            tvLabel.setText( item.itemHeader );
        }
        rowView.setOnLongClickListener( longClick );
        rowView.setOnClickListener( shortClick );
        return rowView;
    }
    @Override
    public long getItemId(int position) {
        if( getItem( position ).item != null )
            return getItem(position).item.asInteger( PO.pubId );
        else
            return (long) -1;
    }
}

It’s probably a bit more complex example of what you need, but it shows how you can use different layouts for a row based on the contents of the row, and it has clickable ImageViews in it, just like you’d need for your voting buttons.