• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Apps Complex foursquare-like UI

ThanosF

Lurker
hello,
I'd like to implement a GUI like the one in foursquare but much simpler
Have a look at this image
PU2DS.png


What I want to achieve is a layout like the circled one. Actually, I'd like to dynamically append that layout during run time, so to make many of these and form a scrollable list-like UI where you can make selections (and keep the proper spacing between each layout).

Any idea how can this be achieved? I'd really appreciate some code examples.
 
I think one way would be to override getView in ArrayAdaptor. I've tried to make an example that adds items to a List View.

Here's the XML for the activity.
[HIGH] <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/listView1"
/>

<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText1"
android:text="Add"
android:onClick="addToList"/>

</RelativeLayout> [/HIGH]This Layout, dated_message.xml is for the items in the list view.
[HIGH]<?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">
<TextView
android:id="@+id/rowDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="12sp" />

<TextView
android:id="@+id/rowMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/rowDate"
android:textSize="18sp" />
</RelativeLayout>

[/HIGH]A class for my messages:
[HIGH]package com.example.test2;

import java.text.DateFormat;
import java.util.Date;

public class DatedMessage {

private String message;
private String date;

DatedMessage(String message){
this.message = message;
Date now = new Date();
DateFormat df = DateFormat.getDateTimeInstance();
date = df.format(now);
}

public String getMessage(){
return message;
}

public String getDate(){
return date;
}

}[/HIGH]And adapter class for the above:
[HIGH]package com.example.test2;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MessagesAdapter extends ArrayAdapter<DatedMessage>{

int resource;

public MessagesAdapter(Context context, int _resource, List<DatedMessage> items){
super(context, _resource, items);

resource = _resource;
}

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

if (convertView == null) {
view = new LinearLayout(getContext());
String inflater = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li = (LayoutInflater)getContext().getSystemService(inflater);
li.inflate(resource, view, true);
}
else {
view = (LinearLayout) convertView;
}

DatedMessage dm = this.getItem(position);
TextView dateView = (TextView) view.findViewById(R.id.rowDate);
dateView.setText(dm.getDate());
TextView message = (TextView) view.findViewById(R.id.rowMessage);
message.setText(dm.getMessage());
return view;
}

}
[/HIGH]The main activity.
[HIGH]package com.example.test2;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;


public class MainActivity extends Activity {

EditText editText;
MessagesAdapter ma;

@Override
protected void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView)findViewById(R.id.listView1);
editText = (EditText)findViewById(R.id.editText1);

ArrayList<DatedMessage> messages = new ArrayList<DatedMessage>();
ma = new MessagesAdapter
(this, R.layout.dated_messages, messages);
listView.setAdapter(ma);

listView.setClickable(true);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
DatedMessage dm = ma.getItem(position);
Toast.makeText(getApplicationContext(), dm.getDate() + "\n" + dm.getMessage(), Toast.LENGTH_LONG).show();

}
});
}

public void addToList(View v){
ma.add(new DatedMessage(editText.getText().toString()));
ma.notifyDataSetChanged();
editText.setText("");
}

}
[/HIGH]
 
Cool thanks a lot for the code, However I don't think this UI is made with ListView at all and if it is then how can i keep a spacing between each listview row?

Im guessing each one of those white listview-like windows (including the circled one) is a fragment which can be added dynamically during runtime and scrolls via <scrollView> but im really confused on how to implement that kind of style.
The same kind of GUI is on Facebook and Youtube for android too
 
Ah, I see what you mean looking at Youtube. Sorry about that.

I've not used fragments and will have to leave it to someone else to come up with a suggestion.
 
It seems to be really what I had in my mind. :D
How did you do it? Fragments? if not how did u achieved the spacing between the rows?
 
A compound control. It's nested one level deeper than I'd like but it was the only way I could see how to get a space in.

[HIGH]<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/content"
android:padding="2sp"
android:background="@drawable/box" >
<TextView
android:id="@+id/rowDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="12sp" />

<TextView
android:id="@+id/rowMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/rowDate"
android:textSize="18sp" />

</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>[/HIGH]A Java class for it

[HIGH]import java.text.DateFormat;
import java.util.Date;

import android.content.Context;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class DatedMessage extends RelativeLayout{

TextView date;
TextView message;

public DatedMessage(Context context){
super(context);
String infService = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li;
li = (LayoutInflater) getContext().getSystemService(infService);
li.inflate(R.layout.dated_message, this, true);
date = (TextView) findViewById(R.id.rowDate);
message = (TextView) findViewById(R.id.rowMessage);
}

public DatedMessage(Context context, String msg){
super(context);
String infService = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li;
li = (LayoutInflater) getContext().getSystemService(infService);
li.inflate(R.layout.dated_message, this, true);
Date now = new Date();
DateFormat df = DateFormat.getDateTimeInstance();
date = (TextView) findViewById(R.id.rowDate);
date.setText(df.format(now));
message = (TextView) findViewById(R.id.rowMessage);
message.setText(msg);
}

}
[/HIGH]Main activity XML:

[HIGH]<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/scroller">

<LinearLayout
android:padding="20sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical"
android:id="@+id/layout">
</LinearLayout>
</ScrollView>[/HIGH]From my main activity:

[HIGH] LinearLayout ll = (LinearLayout) findViewById(R.id.layout);
ll.addView(new DatedMessage(this, "item1"));
ll.addView(new DatedMessage(this, "item2"));
[/HIGH]
 
Wow thanks a lot for your help I've tested this and it works really well. I guess if you want to support apis lower than 14 you could use a simple
[HIGH]
<View
android:layout_width="match_parent"
android:layout_height="20dp" >
</View>[/HIGH]for space and can adjust it to your liking
Iam going to experiment with this more extensively the next days and post back better practices maybe or how to wrap this thing into fragments since i need to use it on multiple activities with view pager and stuff
 
Back
Top Bottom