Develop Reference

How to use grid layout in a card game

I'm developing the memory card game that has twelve cards, three rows made up of four cards.
To do this, the layout consists of three linear layouts that contain four textview each.
How can I do in another way using a grid layout?
This is my layout xml to create the cards rows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/iv_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_c"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_d"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
</LinearLayout>

You can use GridView for this situation. I put my very simplified codes here, so you can use them and change them as you need. This GridView has just 12 ImageViews.
Create an Adapter class for GridView:
MyGridViewAdapter.java
public class MyGridViewAdapter extends BaseAdapter {
private Context context;
private List<Integer> drawables;
MyGridViewAdapter(Context context) {
this.context = context;
}
void setDrawables(List<Integer> drawables)
{
this.drawables = drawables;
}
public int getCount() {
return drawables.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create new ImageViews for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
// main layout of each item of gridView:
RelativeLayout relativeLayout=new RelativeLayout(context);
relativeLayout.setLayoutParams(new GridView.LayoutParams((int)dpToPx(context, 100),
(int)dpToPx(context, 100)));
// images:
ImageView imageView = new ImageView(context);
imageView.setImageResource(R.drawable.ic_launcher_background);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT));
relativeLayout.addView(imageView);
return relativeLayout;
}
private float dpToPx(Context context, float dp) {
return dp * context.getResources().getDisplayMetrics().density;
}
}
Add GridView to your activity layout:
activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".TestActivity"
android:orientation="vertical">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridView"
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:choiceMode="singleChoice"
android:drawSelectorOnTop="true"
android:focusable="true"
android:clickable="true"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:layout_margin="10dp"/>
</LinearLayout>
Use these codes in your activity:
TestActivity.java
public class TestActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// list of 12 images:
List<Integer> drawables=new ArrayList<>();
for(int i=0; i<12; i++)
{
drawables.add(R.drawable.ic_launcher_background);
}
// gridView adapter:
MyGridViewAdapter adapter = new MyGridViewAdapter(this);
adapter.setDrawables(drawables);
// gridView:
GridView gridView = findViewById(R.id.gridView);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// what happen when you click on each item
}
});
}
}
and the result:
Good luck!

<GridLayout 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:columnCount="4"
android:rowCount="3" >
<ImageView
android:id="#+id/iv_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
.
.
.
</ GridLayout>
Read: https://medium.com/google-developer-experts/android-grid-layout-1faf0df8d6f2

How to make android listview scrollable?

I have two listviews, but they don't scroll. How do I correct this?
Here is my layout.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgrund" >
<!-- Header Starts -->
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentTop="true"
android:background="#layout/header" >
</LinearLayout>
<!-- Header Ends -->
<!-- Footer Start -->
<TextView
android:id="#+id/textAD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/header"
android:layout_alignParentRight="true"
android:layout_marginBottom="14dp"
android:layout_marginRight="26dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFFFFF" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_gravity="center_horizontal"
android:focusable="false"
android:paddingBottom="5px"
android:paddingTop="10px"
android:src="#android:drawable/divider_horizontal_bright" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#000000"
android:focusable="false" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"
android:orientation="vertical" >
<TextView
android:id="#+id/textm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Malzemeler"
android:textSize="20dp"
android:textColor="#000000"/>
<EditText
android:id="#+id/editaramalzeme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" />
<Button
android:id="#+id/btnmalzlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:text="Ara" />
<ListView
android:id="#+id/mylist"
android:layout_width="match_parent"
android:layout_height="420dp"
android:layout_weight="1"
android:background="#FFFFFF" >
</ListView>
<ListView
android:id="#+id/listsecili"
android:layout_width="wrap_content"
android:layout_height="210dp"
android:layout_weight="1"
android:background="#FFFFFF" >
</ListView>
<EditText
android:id="#+id/txtNot"
android:layout_width="match_parent"
android:layout_height="88dp"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:lines="6"
android:singleLine="false" >
<requestFocus />
</EditText>
</LinearLayout>
<Button
android:id="#+id/btnkaydet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout1"
android:text="malzeme ekle" />
<Button
android:id="#+id/btntoplugonder"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textAD"
android:layout_below="#+id/btnkaydet"
android:text="toplu gonder" />
</RelativeLayout>
</ScrollView>**

Never put ListView in ScrollView. ListView itself is scrollable.

By default ListView is scrollable. Do not put ScrollView to the ListView

I know this question is 4-5 years old, but still, this might be useful:
Sometimes, if you have only a few elements that "exit the screen", the list might not scroll. That's because the operating system doesn't view it as actually exceeding the screen.
I'm saying this because I ran into this problem today - I only had 2 or 3 elements that were exceeding the screen limits, and my list wasn't scrollable. And it was a real mystery. As soon as I added a few more, it started to scroll.
So you have to make sure it's not a design problem at first, like the list appearing to go beyond the borders of the screen but in reality, "it doesn't", and adjust its dimensions and margin values and see if it's starting to "become scrollable". It did, for me.

Practically its not good to do. But if you want to do like this, just make listview's height fixed to wrap_content.
android:layout_height="wrap_content"

Listview so have inbuild scrolling capabilities. So you can not use listview inside scrollview. Encapsulate it in any other layout like LinearLayout or RelativeLayout.

This is my working code. you may try with this.
row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listEmployeeDetails"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_gravity="center"
android:background="#ffffff">
<TextView android:id="#+id/tvEmpId"
android:layout_height="wrap_content"
android:textSize="12sp"
android:padding="2dp"
android:layout_width="0dp"
android:layout_weight="0.3"/>
<TextView android:id="#+id/tvNameEmp"
android:layout_height="wrap_content"
android:textSize="12sp"
android:padding="2dp"
android:layout_width="0dp"
android:layout_weight="0.5"/>
<TextView
android:layout_height="wrap_content"
android:id="#+id/tvStatusEmp"
android:textSize="12sp"
android:padding="2dp"
android:layout_width="0dp"
android:layout_weight="0.2"/>
</LinearLayout>
details.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listEmployeeDetails"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/page_bg"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lLayoutGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/page_bg"
android:orientation="vertical" >
................... others components here............................
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alwaysDrawnWithCache="true"
android:dividerHeight="1dp"
android:horizontalSpacing="3dp"
android:scrollingCache="true"
android:smoothScrollbar="true"
android:stretchMode="columnWidth"
android:verticalSpacing="3dp"
android:layout_marginBottom="30dp">
</ListView>
</LinearLayout>
</RelativeLayout>
Adapter class :
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
public class ListViewAdapter extends BaseAdapter {
private Context context;
private List<EmployeeBean> employeeList;
publicListViewAdapter(Context context, List<EmployeeBean> employeeList) {
this.context = context;
this.employeeList = employeeList;
}
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
EmployeeBeanHolder holder = null;
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(R.layout.row, parent, false);
holder = new EmployeeBeanHolder();
holder.employeeBean = employeeList.get(position);
holder.tvEmpId = (TextView) row.findViewById(R.id.tvEmpId);
holder.tvName = (TextView) row.findViewById(R.id.tvNameEmp);
holder.tvStatus = (TextView) row.findViewById(R.id.tvStatusEmp);
row.setTag(holder);
holder.tvEmpId.setText(holder.employeeBean.getEmpId());
holder.tvName.setText(holder.employeeBean.getName());
holder.tvStatus.setText(holder.employeeBean.getStatus());
if (position % 2 == 0) {
row.setBackgroundColor(Color.rgb(213, 229, 241));
} else {
row.setBackgroundColor(Color.rgb(255, 255, 255));
}
return row;
}
public static class EmployeeBeanHolder {
EmployeeBean employeeBean;
TextView tvEmpId;
TextView tvName;
TextView tvStatus;
}
#Override
public int getCount() {
return employeeList.size();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
}
employee bean class:
public class EmployeeBean {
private String empId;
private String name;
private String status;
public EmployeeBean(){
}
public EmployeeBean(String empId, String name, String status) {
this.empId= empId;
this.name = name;
this.status = status;
}
public String getEmpId() {
return empId;
}
public void setEmpId(String empId) {
this.empId= empId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status =status;
}
}
in Activity class:
onCreate method:
public static List<EmployeeBean> EMPLOYEE_LIST = new ArrayList<EmployeeBean>();
//create emplyee data
for(int i=0;i<=10;i++) {
EmployeeBean emplyee = new EmployeeBean("EmpId"+i,"Name "+i, "Active");
EMPLOYEE_LIST .add(emplyee );
}
ListView listView;
listView = (ListView) findViewById(R.id.listView);
listView.setAdapter(new ListViewAdapter(this, EMPLOYEE_LIST));

Putting ListView inside a ScrollView is never inspired.
But if you want your posted XML-like behavior, there're 3 options to me:
Remove ScrollView: Removing your ScrollView, you may give the ListViews some specific size with respect to the total layout (either specific dp or layout_weight).
Replace ListViews with LinearLayouts: You may add the list-items by iterating through the item-list and add each item-view to the respective LinearLayout by inflating the view & setting the respective data (string, image etc.)
If you really need to put your ListViews inside the ScrollView, you must make your ListViews non-scrollable (Which is practically the same as the solution 2 above, but with ListView codes), otherwise the layout won't function as you expect.
To make a ListView non-scrollable, you may read this SO post, where the precise solution to me is like the one below:
listView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});

I found a tricky solution... which works only in a RelativeLayout.
We only need to put a View above a ListView and set clickable 'true' on View and false for the ListView
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listview
android:clickable="false" />
<View
android:layout_width="match_parent"
android:background="#drawable/gradient_white"
android:layout_height="match_parent"
android:clickable="true"
android:layout_centerHorizontal="true"
android:layout_alignTop="#+id/listview" />

I had this problem and I found the solution. In my case the listView was bigger than the screen, so the list was not big enough to need scroll, but I coudn´t see it because half list was out of screen.
I solved it adding enough marginBotton to make the listView shorter and it suits to the screen.
<ListView
android:id="#+id/lvDatos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="300dp"/>

Gridview multiline Textview cut off

I have a GridView and each cell has an ImageView with TextView under it. Unfortunately if the TextView has more than one line the text gets cut off. I have tried everything but I cant find a solution.
It seems that the row height of the GridView is the problem and not the actual text because you can see half of the text in the Textview.
Here is my code:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ImageAdapter());
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int position, long id) {
startActivity(new Intent(Main.this, Acronyms.class));
}
});
}
public class ImageAdapter extends BaseAdapter {
private Integer[] iconImg = {
R.drawable.acronyms, R.drawable.acronyms,
R.drawable.acronyms
};
private String[] iconTitle = {
"Acronyms", "Cardiac Strips",
"Test 3"
};
public int getCount() {
return iconImg.length;
}
public Object getItem(int arg0) {
return null;
}
public long getItemId(int arg0) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
if (convertView == null) {
LayoutInflater inflater = getLayoutInflater();
view = inflater.inflate(R.layout.icon, null);
TextView textView = (TextView) view.findViewById(R.id.icon_text);
textView.setText(iconTitle[position]);
ImageView imageView = (ImageView) view.findViewById(R.id.icon_image);
imageView.setImageResource(iconImg[position]);
} else {
view = convertView;
}
return view;
}
}
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#a3e6ff"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:text="Example"
android:textColor="#248fb7"
android:textSize="40dp"
android:typeface="serif" android:gravity="center_horizontal"/>
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="15dp" >
</GridView>
</LinearLayout>
and my icon.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_icon_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/icon_image"
android:layout_width="90dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/icon_text"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="2"
android:singleLine="false"
android:text="Samples Samples"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:typeface="serif" />
</LinearLayout>
And here is a screenshot:

I resolved using, when i define it
TextView.setLines(2);
in the xml the textview is
android:layout_width="wrap_content"
android:layout_height="wrap_content"

[EDIT1]
You could try using a RelativeLayout instead of a Linear Layout for the icon.xml.
If this doesnt work then I would then move to a static height TextView. From looking at your screenshot, it looks like you will always use the same image, and the text is either going to be 1 line or 2. Just make the text height static to allow for 2 lines.
[ORIGINAL]
I think the problem is in your linear layout definition for your icon.xml. In your definition, you have the layout having "match_parent" as the width and height parameters. You should, since these are to essentially be subviews within the gridview be "wrap_content". Here is what I think it should be
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_icon_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView android:id="#+id/icon_image"
android:layout_width="90dp"
android:layout_height="wrap_content" />
<TextView android:id="#+id/icon_text"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="2"
android:singleLine="false"
android:text="Samples Samples"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:typeface="serif" />
</LinearLayout>

Change ConstraintLayout for LinearLayout.
Make sure you are using ConstraintLayout and if possible change by LinearLayout. For long texts, Constraint is not very good.

Android - GridView height to max height

I've got a GridView inside a scrollview and the GridView has 4 images loaded into it (via an ImageAdapter). My issue is I can get 3 of the images to show but the 4th doesn't. After further investigation, I've found that the height of the gridview is only the height of the row, so if I set the gridview height in xml to 700dp, then it shows up.
Here's a screenshot:
As you can see, I've set the background of the GridView to HotPink to illustrate where the GridView is.
Here's the XML for the main_menu:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<ScrollView
android:id="#+id/svMenu"
android:layout_width="400dp"
android:layout_height="match_parent"
>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->
</LinearLayout>
The LinearLayout "llLeft" is the layout where the menu items get loaded (inside the ScrollView). layout_left is only a shape which draws the dark outline around the greenish background.
Here's the main_menu_header.xml which contains the GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TextView
android:id="#+id/tvDashboardHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Dashboard Main Menu"
android:textSize="20dp"
style="#style/TextShadow"
android:paddingTop="5dp"
android:gravity="left"
android:background="#drawable/menu_item_bg"
/>
<GridView
android:id="#+id/gvMenuItems"
android:layout_width="400dp"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:background="#color/HotPink"
android:gravity="center" >
</GridView>
</LinearLayout>
And here's how I populate the GridView:
ScrollView sv = (ScrollView)findViewById(R.id.svMenu);
LayoutInflater liInflater = getLayoutInflater();
ViewGroup vg = (ViewGroup)liInflater.inflate(R.layout.main_menu_header, sv, false);
sv.addView(vg);
//Setup the Main Menu items on the left side.
GridView gvMenuItems = (GridView) findViewById(R.id.gvMenuItems);
gvMenuItems.setAdapter(new ImageAdapter(this));
ImageAdapter class:
ImageAdapter class:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(parent.getLayoutParams().width, 125)); //new GridView.LayoutParams(400, 125));
//imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setMaxHeight(50);
imageView.setMaxWidth(50);
//imageView.setPadding(30, 0, 0, 0);
//imageView.setPadding(40, 30, 20, 30);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.home,
R.drawable.open_folder,
R.drawable.paper_pen,
R.drawable.person
};
}
I thought the gridview property of android:layout_height="match_parent" would work but it's not. Any ideas as to how I can get the GridView to take up the whole left side, inside the scrollview?

My best guess is that scrollview is giving you problem.
Why do u need scrollview for?
Grid View will handle the scrolling. It is kind of redundant.So please remove it and add inflated view directly to llLeft directly. That shall solve the problem.
In fact, it would be more elegant just to use xml to solve your UI problem. Use <include> tag in your main_menu.xml. Here is how
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/main_menu_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->

A grid layout of icon/text buttons

I am attempting to create a 3 x 3 grid of items. Each Item consists of an ImageView on top of a TextView. Unfortunately, I am having issues getting everything to play nicely.
Here is my attempt to get 2 such items side by side. The text views don't even show, and the icons are squished together (instead of evenly spaced)
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" android:gravity="center"
android:paddingLeft="40px" android:paddingRight="40px" >
<TableRow>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/usertoolsimage"
android:src="#drawable/ftnicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="User Accounts"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/queueimage"
android:src="#drawable/ftnicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Queue Management"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
</TableRow>
<TableRow>
<TextView
android:text="test 3"
android:padding="3dip" android:textColor="#ffffff" />
<TextView
android:text="test 4"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</TableRow>
</TableLayout>
My goal in the end is to have a grid of clickable items where the item is an image and text for a main menu. Can anyone guide me on what layouts I should use to achieve this?

Your best bet in my opinion would be to use the gridView that way it supports scrolling and spacing and you can be very dynamic in what each items layout and events are. Another option is to just create a lay out the images with a combination of Relative/Linear Layouts.
GridView layout:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:columnWidth="60dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
and then in your activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
mGame.status = GameStatus.PLAYING;
setContentView(R.layout.gridLayout);
GridView grid = (GridView) findViewById(R.id.myGrid);
grid.setAdapter(new customAdapter());
grid.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
//do some stuff here on click
}
});
}
public class customAdapter extends BaseAdapter {
public View getView(int position, View convertView, ViewGroup parent) {
//create a basic imageview here or inflate a complex layout with
//getLayoutInflator().inflate(R.layout...)
ImageView i = new ImageView(this);
i.setImageResource(mFams.get(position).imageId);
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
final int w = (int) (36 * getResources().getDisplayMetrics().density + 0.5f);
i.setLayoutParams(new GridView.LayoutParams(w * 2, w * 2));
return i;
}
public final int getCount() {
return 9;
}
public final Family getItem(int position) {
return mFams.get(position);
}
public final long getItemId(int position) {
return position;
}
}
Or the basic layout using linear layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:layout_height="fill_parent""
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>

You should really use a GridView to do grids, and not TableRows. Have you seen Android's tutorial for GridView's? To be able to achieve what you want with an image overlayed with text, you would need to utilize the FrameLayout as shown in Android's FrameLayout example. The tricky part here though, is that you need to apply this layout to each item that is going to be in the Gridview.
So for example, lets say you create a layout file called image_text_view.xml which looks like this:
<FrameLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id="#+id/gridImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="false">
</ImageView>
<CheckedTextView
android:id="#+id/imageTick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000000"
android:layout_gravity="center_horizontal|bottom"
android:checkMark="#drawable/icon"
android:checked="false"
android:visibility="invisible"
>
</CheckedTextView>
</FrameLayout>
You need to apply this layout in each of your GridView item. To do this (editing Android's GridView example) You would need to redefine the getView in the ImageAdapter as follows:
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if(convertView==null){
v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
v.setLayoutParams(new GridView.LayoutParams(100,100));
ImageView imageView = (ImageView)v.findViewById(R.id.image);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
imageView.setImageResource(mThumbsIds[position]);
CheckedTextView checkedTextView = (TextView) v.findViewById(R.id.imageTick);
checkedTextView.setEnabled(true);
checkedTextView.setVisibility(View.VISIBLE);
}
else
{
v = convertView;
}
return v;
Using this, for example, you will have whatever you set (whether its text or icons) overlaying the images for each item in the grid. You may need to do minor tweaks to this example to meet your exact needs, but this is the strategy i would go with.