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.
Related
I have a GridView which has a ViewFlipper in each tile. Each view in the ViewFlipper has a different size, but when the tile is flipped, both views are forced to the same size as the GridView column. What i've tried:
Googled
Set android:measureAllChildren to false on ViewFlipper(only works with ListView)
Left android:columnWidth unspecified
Made ViewFlipper root tag in grid tile layout file
grid_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp" android:layout_height="150dp">
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:measureAllChildren="false"
android:id="#+id/view_flipper_3"
>
<RelativeLayout
android:layout_width="180dp"
android:layout_height="150dp"
android:id="#+id/front2"
android:background="#088980"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentNumber"
android:textSize="25dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="220dp"
android:layout_height="190dp"
android:background="#000000"
android:id="#+id/back_2"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:id="#+id/commitmentPartOne"
android:paddingBottom="5dp"
android:textSize="25sp"
android:text="Part One"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentPartTwo"
android:textSize="25sp"
android:text="Part Two"
android:paddingBottom="5dp"
android:layout_below="#+id/commitmentPartOne"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentPartThree"
android:textSize="25sp"
android:text="Part Three"
android:layout_below="#+id/commitmentPartTwo"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</ViewFlipper>
</RelativeLayout>
fragment_with_gridview.xml:
<?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">
<GridView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/sixCommitmentsGridView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:numColumns="2"
android:gravity="center"
android:columnWidth="179dp"
android:stretchMode="columnWidth"
/>
</RelativeLayout>
GridViewAdapter.java:
public class SixCommitmentsGridAdapter extends BaseAdapter {
Context context;
String[] numbers;
public SixCommitmentsGridAdapter(Context context, String[] numbers) {
this.context = context;
this.numbers = numbers;
}
#Override
public int getCount() {
return numbers.length;
}
#Override
public Object getItem(int position) {
return numbers[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
View view;
final ViewFlipper flipper;
TextView commitmentNumber;
if(convertView == null){
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.six_commitments_grid_item, parent, false);
}else{
view = convertView;
}
flipper = (ViewFlipper) view.findViewById(R.id.view_flipper_3);
commitmentNumber = (TextView) view.findViewById(R.id.commitmentNumber);
commitmentNumber.setText(numbers[position]);
flipper.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(position % 2 == 0 || position == 0){
AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.RIGHT_LEFT, 200);
}else {
AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.LEFT_RIGHT, 200);
}
}
});
return view;
}
}
Managed to achieve the same grid-style layout with my intented ViewFlipper effect using a StaggeredGridLayoutManager and a RecyclerView.
In Main RelativeLayout contain ViewFlipper, you set height and width!
set them "wrap_content"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
maybe worked.
good luck.
Update
Use this library:
https://github.com/etsy/AndroidStaggeredGrid
I am creating a custom adapter so that I can put a button in a listView. I was putting it in just like I would an image and then I got to this line of code in the tutorial:
button.setImageResource(current_item.getButton_id());
I tried changing it to setButtonResource, but there is no method for that.
Thanks for any help.
I want it to look like this where there is a listview with a textview and a button. I got the text put in just fine, but I can't figure out how to get a button in ther listview.
This is my adapter:
private class MyListAdapter extends ArrayAdapter<SchoolsListClass>{
public MyListAdapter() {
super(searchResults.this, R.layout.da_item, mySchools);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
//Make sure we have a view to work with (may have been given null
View itemView = convertView;
if (itemView == null){
itemView = getLayoutInflater().inflate(R.layout.da_item, parent, false);
}
//Find school to work with
SchoolsListClass currentSchoolsListClass = mySchools.get(position);
//Fill the view
//school name
TextView schoolText = (TextView) itemView.findViewById(R.id.item_schoolName);
schoolText.setText(currentSchoolsListClass.getSchool_name());
//subscribe/unsubscribe button
Button button = (Button)itemView.findViewById(R.id.item_subscribeButton);
button..setImageResource(currentSchoolsListClass.getButton_id());//This is the line of code I am having trouble with. I want it to do exactly what it is doing for images, but use buttons instead of images.
return itemView;
}
SchoolsListClass:
package com.parse.starter;
public class SchoolsListClass {
private String school_name;
private int button_id;
public SchoolsListClass(String school, int button){
super();
this.school_name = school;
this.button_id = button;
}
public String getSchool_name() {
return school_name;
}
public int getButton_id() {
return button_id;
}
}
school_results.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listMain"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/schoolListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true" >
</ListView>
</RelativeLayout>
da_item.xml:(sample for items in my listview)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginLeft="4dp" >
<TextView
android:id="#+id/item_schoolName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/item_subscribeButton"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/item_subscribeButton"
android:ellipsize="end"
android:text="Central Wisconsin Christian School"
android:textSize="#dimen/school_name_size" />
<Button
android:id="#+id/item_subscribeButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
the equivalent is
button.setBackgroundResource(int resid);
you can use but it is debricated in new API
button.setBackgroundDrawable(R.drawable.ic_launcher);
I have used a Custom ListView and I am displaying some data using the same ListView. When I click on the List View item, the onClickListener is not getting called. I am not able to select any list item.
Layout Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="16dp"
android:background="#drawable/list_selector"
android:clickable="true"
android:orientation="horizontal"
android:padding="5dip" >
<LinearLayout
android:id="#+id/imgProperty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip"
android:padding="3dip" >
<ImageView
android:id="#+id/list_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher"
android:focusable="false"/>
</LinearLayout>
<TextView
android:id="#+id/tvCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="75dip"
android:layout_toRightOf="#+id/list_image"
android:paddingBottom="10dip"
android:text="property"
android:textColor="#040404"
android:textSize="15sp"
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:id="#+id/tvprice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgProperty"
android:layout_alignLeft="#+id/tvCity"
android:text="Price"
android:focusable="false"/>
</RelativeLayout>
Adapter code:
public class CustomListAdapter extends BaseAdapter {
ArrayList<Propety> PropertiesArray;
private LayoutInflater Inflater;
public CustomListAdapter(ArrayList<Propety> PropertiesArray) {
this.PropertiesArray=PropertiesArray;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return PropertiesArray.size();
}
#Override
public Object getItem(int position) {
return PropertiesArray.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, final ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
convertView = inflater.inflate(R.layout.customlistview, parent, false);
}
final Propety ListArray = PropertiesArray.get(position);
TextView tvPropertyName = (TextView) convertView.findViewById(R.id.tvCity);
tvPropertyName.setText(ListArray.getName());
TextView tvPrice = (TextView) convertView.findViewById(R.id.tvprice);
tvPrice.setText(ListArray.getPrice());
ImageView imgProperty = (ImageView) convertView.findViewById(R.id.list_image);
imgProperty.setImageResource(R.drawable.ic_launcher);
convertView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(parent.getContext(), "view clicked: " + ListArray.getName(), Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
}
ListView code:
ListView propertylistview = (ListView) findViewById(R.id.listview);
CustomListAdapter customlistview=new CustomListAdapter(PropertiesArray);
propertylistview.setAdapter(customlistview);
ListView XML:
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/customview"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="24dp"
android:background="#drawable/list_selector"
android:textAlignment="center" >
custom.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<SurfaceView
android:id="#+id/surface"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/txtangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="115dp"
android:layout_marginLeft="95dp"
android:text="" />
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/customview"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="24dp"
android:background="#drawable/list_selector"
android:textAlignment="center" >
</ListView>
<view
android:id="#+id/customview"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
class="com.example.samplebuapp.CustomCompass" />
<view
android:id="#+id/view1"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_above="#+id/listview"
android:layout_alignParentRight="true"
android:layout_marginRight="18dp"
class="com.example.samplebuapp.CustomView" />
<LinearLayout
android:id="#+id/rl1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/listview"
android:orientation="vertical"
android:focusable="false">
</LinearLayout>
</RelativeLayout>
Even scrolling is not working.
I am unable to figure out why is this happening? Am I missing out something?
Any help in resolving this is appreciated.
The following will do the job in your case.
ListView propertylistview = (ListView) findViewById(R.id.listview);
propertylistview.setOnItemClickListener( myListViewClicked ):
OnItemClickListener myListViewClicked = new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(YourActivity.this, "Clicked at positon = " + position, Toast.LENGTH_SHORT).show();
}
};
Dont forget to remove the following from the CustomAdapter
convertView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(parent.getContext(), "view clicked: " + ListArray.getName(), Toast.LENGTH_SHORT).show();
}
});
If the touch events are getting intercepted inside the cell layout, in the layout for your custom cell, set
android:descendantFocusability="blocksDescendants" on the top level layout of your cell. For me, it was too much of a pain to add xml attributes to every individual view.
Note that this can also be set in code:
cell.setDescendantFocusability(FOCUS_BLOCK_DESCENDANTS);
I also tried this with a ListView inside a cell, and I had to override onTouchEvent to get it to work:
public class NoTouchListView extends ListView {
#Override
public boolean onTouchEvent(MotionEvent ev) {
return false;
}
}
the simple code that solved my problem, and method view.setOnClickListener be within my custom adapter
view.setFocusable(false)
Check your list row layout once :
layout or any view should not be `android:clickable="true" and
android:focusable="true"
if it is there just delete and run the application again.
Even I was having the same problem, I am having checkbox, did the following to masker itemClickListener work,
Added the following properties to the checkbox,
android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"
and ItemClickListner started working.
For detailed example you can go through the link,
http://knowledge-cess.com/android-itemclicklistner-with-checkbox-or-radiobutton/
Hope it helps Cheers!!
For TextView you should also use
android:textIsSelectable="false"
https://developer.android.com/reference/android/widget/TextView.html#setTextIsSelectable
In my xml I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:background="#FFFFFF" android:id="#+id/listItemMainRelativeLayout">
<RelativeLayout android:id="#+id/myFavourtiesPlaylistTextRelativeLayout"
android:layout_centerVertical="true" android:layout_height="wrap_content" android:layout_width="fill_parent">
<TextView android:layout_marginBottom="1dp"..... android:textColor="#000002"
android:layout_width="wrap_content"></TextView>
<TextView android:visibility="visible" .... android:id="#+id/myFavouritesPlaylistDescription"
android:textColor="#000006"></TextView>
</RelativeLayout>
<RelativeLayout android:id="#+id/myFavourtiesPlaylistButtonRelativeLayout"
android:layout_alignParentRight="true" android:layout_centerVertical="true"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:focusable="false" android:focusableInTouchMode="false" android:visibility="gone">
<ImageButton android:id="#+id/playListPlayButton"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:visibility="visible" android:background="#drawable/play_button"
android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:focusable="false" android:focusableInTouchMode="false"/>
</RelativeLayout>
</RelativeLayout>
My Java Code is:
public OnItemClickListener listOnItemClickListener = new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View v, int position,
long id) {
if (previousSelectedListItem != -1) {
Toast.makeText(getActivity(),
"Hidding Position:" + previousSelectedListItem,
Toast.LENGTH_LONG).show();
RelativeLayout mainRelativeLayout = (RelativeLayout) v;
RelativeLayout buttonsRelativeLayout = (RelativeLayout) mainRelativeLayout
.findViewById(R.id.myFavourtiesPlaylistButtonRelativeLayout);
buttonsRelativeLayout.setVisibility(View.GONE);
}
Toast.makeText(getActivity(), "ShowingPosition:" + position,
Toast.LENGTH_LONG).show();
RelativeLayout mainRelativeLayout = (RelativeLayout) v;
RelativeLayout buttonsRelativeLayout = (RelativeLayout) mainRelativeLayout
.findViewById(R.id.myFavourtiesPlaylistButtonRelativeLayout);
buttonsRelativeLayout.setVisibility(View.VISIBLE);
previousSelectedListItem = position;
}
};
Expected Behavior: I want to make myFavourtiesPlaylistButtonRelativeLayout in the item visible once it is clicked.
What is Happening: myFavourtiesPlaylistButtonRelativeLayout of clicked item remain hidden, but a few other random items become visible instead.
I believe having a RelativeLayout inside of a ListView is the problem. I have wasted 6h of my day today on a simmilar issues.
ListView element not clickable
Try reading this thread, it should provide the fix.
http://code.google.com/p/android/issues/detail?id=3414
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.