How can I implement this simple XAML Grid layout in Android AXML?

Question

I am trying to figure out the Android layout in the context of a ListView and it seems pretty primitive (although it is possible that I am Doing It Wrong ™) if I wanted to make something simple into a list consisting of a name and a graph, something like this:

I would use this kind of XAML in WP8 / WPF / Silverlight:

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Height="*" /> <ColumnDefinition Height="Auto" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" x:Name="Thing" /> <TextBlock Grid.Column="1" x:Name="Count" /> </Grid> 

However, this is not possible in Android Layout - I tried to use RelativeLayout , but it seems that any of them will always be full size, and the other will be eaten.

Answer 1

Do you need something like this?

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:text="Thing" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:text="Count" /> </RelativeLayout> 

Or you can use LinearLayout and set weights :

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="4" android:text="Thing" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Count" /> </LinearLayout> 

Or you can use GridView , a great example on developer.android.com.

Answer 2

So here it is. Everything except one line per grid entry requires something special. This is not perfect code in any way, but it will help.

Start with your base layout.

Let's just say this is called mainlist.xml

 <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" > <ListView android:id="@+id/itemList" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </RelativeLayout> 

So you have Relative with ListView. Pretty basic right?

In your activity you will need such a code.

 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.mainlist); GetAndAssociateData(); } public void GetAndAssociateData() { ListView list = (ListView)findViewById(R.id.itemList); final ArrayList<CountedItem> items; list.setAdapter(new CountedItemAdapter(getApplicationContext(), R.id.countedItemRow, items, this)); } 

Everything that is outside this line requires not only an adapter, but also a layout for each element.

The CountedItemAdapter is the adapter in this case (it tells how to populate the view).

countedItemRow is the layout for each item.

/src/CountedItemAdapter.java

 public CountedItemAdapter(Context context,int textViewResourceId, ArrayList<CountedItem> objects,CountedItemActivity parentActivity) { super(context, textViewResourceId, objects); this.context = context; this.items = objects; this.parentActivity = parentActivity; // TODO Auto-generated constructor stub } public View getView(int position, View convertView, ViewGroup parent) { View view = convertView; if (view == null) { LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); view = inflater.inflate(R.layout.countedItemRow, null); } if (items != null){ CountedItem item = items.get(position); if (item != null) { TextView thing= (TextView) view.findViewById(R.id.thing); if (thing!= null) { thing.setText(item.GetThingText()); } TextView thingCount = (TextView) view.findViewById(R.id.thingCount); if (thingCount != null) { thingCount .setText(item.GetThingCount()); } } } return view; } 

/res/layout/countedItemRow.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/countedItemRow" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/thing" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="0dp" android:layout_y="0dp" /> <TextView android:id="@+id/thingCount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="0dp" android:layout_y="150dp" /> </RelativeLayout> 

Answer 3

Late party. I am not a big fan of GridView with two columns. I recommend a ListView with weighted views in each list layout. Also TableLayout can fit, but for some reason my example does not scroll. Click the button on the home screen to go to the ListView example.

I quickly changed some kind of test code that I put to fit your example - see here