Develop Reference

android customize tablerow with imageview overflow tablerow

i am trying to create a tablelayout to show one user's profile picture and his name.Everything works fine except the layout is wired. the image view overflow the tablerow. i set the tablerow layout_height="70dp" and iamgeview layout_height ="50dp" and layout_margin="10dp" in order to vertically centrallize the image.
tablerow xml:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="70dp"
android:orientation="horizontal"
android:layout_marginBottom="1dp"
android:background="#fff">
<ImageView
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/pic"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:background="#f00"/>
<TextView
android:layout_height="20dp"
android:layout_width="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginRight="25dp"
android:id="#+id/value"
android:textColor="#000"
android:layout_alignParentRight="true"
android:layout_weight="3.0"
android:textAlignment="gravity"
android:gravity="right"
/>
</TableRow>
tablelayout xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff">
<TableLayout android:id="#+id/contact_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#aaa">
</TableLayout>
</ScrollView>
java code:
table =(TableLayout)findViewById(R.id.contact_table);
LayoutInflater inflater = getLayoutInflater();
TableRow row = (TableRow)inflater.inflate(R.layout.profilerow, table, false);
ImageView tag = (ImageView)row.findViewById(R.id.pic);
new DownloadImageTask(tag).execute(me.getDp_address());
TextView value = (TextView)row.findViewById(R.id.value);
value.setText(me.getFirst_name()+" "+me.getLast_name());
table.addView(row);
TableRow row2 = (TableRow)inflater.inflate(R.layout.centertextrow,table ,false);
table.addView(row2);
private class DownloadImageTask extends AsyncTask<String,Void,Bitmap>{
ImageView img;
public DownloadImageTask(ImageView bmImage){
this.img = bmImage;
}
#Override
protected Bitmap doInBackground(String... urls) {
String url_string = urls[0];
Bitmap micoin = null;
try {
InputStream in = new java.net.URL(url_string).openStream();
micoin = BitmapFactory.decodeStream(in);
} catch (IOException e) {
Log.i("michaellog","error a");
//Log.e("michaellog",e.getMessage());
e.printStackTrace();
}
return micoin;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);
img.setImageBitmap(bitmap);
}
}
here is an image of how it looks like:link
the image shift down.

Aloha!
I ran into the same type of problem when creating a list of youtube feeds that was put into a table view for our university app. The only difference I see from my layout and yours is I have added a android:scaleType="centerCrop" to the tableview cell that is created. This should scale your image to fit in the correct area. I am also using a linear layout instead of the tableRow type for each cell in the table that gets populated. I would also check out the answer here as well. https://stackoverflow.com/a/15832564/877568
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/semesterButtonLL"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:layout_width="50dip"
android:id="#+id/image"
android:src="#drawable/icon72"
android:layout_height="50dip"
android:scaleType="centerCrop">
</ImageView>
<TextView android:text="TextView"
android:id="#+id/text"
android:textColor="#color/usu_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:textSize="20dip"
android:layout_marginLeft="10dip">
</TextView>
</LinearLayout>
As for the code you provided everything looks ok on how you are bringing the data in and if it is displaying the image on the link you provided then it may be as simple as adding the centerCrop to the line in your xml. I hope this helps.

Android: Listview's row height changes when clicking on the checkbox it contains

I got an activity that contains a single listview.
This listview displays a relativeLayout with a bitmap and a checkbox and when no bitmap is available, a text is displayed.
My problem is with rows that contains no bitmap. When I click on the checkbox, the height of the row changes (increase when checkbox is checked, de crease when unchecked)
activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/gradient_divider"
android:dividerHeight="1dp" />
</LinearLayout>
row.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"
android:orientation="horizontal" >
<ImageView
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:layout_toLeftOf="#+id/registrationCheckBox"
android:filter="true" >
</ImageView>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_gravity="left"
android:paddingLeft="5dp"
android:layout_toLeftOf="#+id/registrationCheckBox" >
</TextView>
<CheckBox
android:id="#+id/registrationCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:clickable="false"
android:focusable="false"
android:paddingRight="5dp" >
</CheckBox>
</RelativeLayout>
My activity code
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
hideActionBar();
// init the controls
initControls();
// populate the listView
this.adapter = new RegistrationAdapter(this, refreshContent());
this.listView.setAdapter(this.adapter);
this.listView.setItemsCanFocus(false);
this.listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
this.listView.setOnItemClickListener(
new ListView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ViewHolder viewHolder = (ViewHolder) view.getTag();
...
}
}
);
}
Any idea on how to prevent my row height to change when clicking on the checkbox ?

I think you are missing the important part of this code, and that is the Adapter code.
How are you handling switching between bitmap and text?

Perhaps set the ImageView to a fixed height (tall enough to fit in any actual image), or provide a dummy invisible image when there is no real image to show.

Android- empty space at top of list view

I currently have a tabview with a listview inside. I only have three items in the listview and for some reason there is a bunch of white space at top. That is, the first item doesn't start at the top but rather in the middle. Any ideas? Also, i'm thinking that I am using the wrong layout. anything better than a listview if i only need to display three items? Thanks.
Code:
// Data to put in the ListAdapter
private String[] sdrPlaylistNames = new String[]{ "More Playlists...","Dubstep", "House"};
Intent playbackServiceIntentDUB, playbackServiceIntentHOUSE;
//alert dialog
AlertDialog.Builder builder;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.playlists_layout);
//fill the screen with the list adapter
playlistFillData();
playbackServiceIntentDUB = new Intent(this, DUBAudioService.class);
playbackServiceIntentHOUSE = new Intent(this, HOUSEAudioService.class);
}
public void playlistFillData() {
//create and set up the Array adapter for the list view
ArrayAdapter<?> sdrListAdapter = new ArrayAdapter<Object>(this, R.layout.list_item, sdrPlaylistNames);
setListAdapter(sdrListAdapter);
}
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" >
<ListView
android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/selectP" android:stackFromBottom="false">
</ListView>
<TextView
android:id="#id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp" />
<TextView
android:id="#+id/selectP"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="Select A Playlist Above"
android:textColor="#FF3300"
android:textSize="22dp"
android:textStyle="bold" >
</TextView>
</RelativeLayout>

If you want to display only three items then I think you have to use TableLayout.
Android - Table Layout.

Oh I missed your real problem in my previous answer.
Simply set android:layout_alignParentTop="true" to your list view as
<ListView
android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/selectP" android:stackFromBottom="false">
</ListView>
Hope this time I am clear..

Set your list view to AlignParentTop = true

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.

Implementing a listview inside a sliding drawer with a listview already present

I have an app whose main class extends ListActivity:
public class GUIPrototype extends ListActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Cursor c = managedQuery(People.CONTENT_URI, null, null, null, null);
String[] from = new String[] {People.NAME};
int[] to = new int[] { R.id.row_entry };
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,R.layout.drawer,c,from,to);
setListAdapter(adapter);
getListView().setTextFilterEnabled(true);
}
}
I have a sliding drawer included in my XML, and I'm trying to get a separate listview to appear in the sliding drawer. I'm trying to populate the second listview using an inflater:
View inflatedView = View.inflate(this, R.layout.main, null);
ListView namesLV = (ListView) inflatedView.findViewById(R.id.content);
String[] names2 = new String[] { "CS 345", "New Tag", "Untagged" };
ArrayAdapter<String> bb = new ArrayAdapter<String>(this, R.layout.main, R.id.row_entry, names2);
namesLV.setAdapter(bb);
This compiles, and runs, but the slidingdrawer is completely blank. My XML follows:
<SlidingDrawer
android:id="#+id/drawer"
android:handle="#+id/handle"
android:content="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom">
<ImageView
android:id="#id/handle"
android:layout_width="48px"
android:layout_height="48px" android:background="#drawable/icon"/>
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#id/content"/>
</SlidingDrawer>
I feel like I'm missing a vital step. I haven't found any resources on my problem by Googling, so any help would be greatly appreciated.
Edit: This was for a problem a long time ago, and the solution I found was to just redesign my layout. I am unable to accept an answer as I don't have the means to test them.

I Suppose I might have found the solution.
All these above solutions did not worked for me.
But then, what I did was add onClickListener to actual view which I return from adapter and BAM it started working for me.
Here is the sample code:
May layout XML (Not complete one....)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/details"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ScrollView
android:id = "#+id/scrolling"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:paddingBottom="30dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/listingIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
............
</ScrollView>
<SlidingDrawer
android:id="#+id/slidingDrawerShowMore"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:topOffset="132dip"
android:handle="#+id/handle"
android:content="#+id/content">
<LinearLayout
android:id="#+id/handle"
android:padding = "5dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/black">
<TextView
android:id="#+id/title"
android:layout_alignParentRight="true"
android:textSize="14dp"
android:layout_below="#id/rate"
android:singleLine="true"
android:textColor="#3F48CC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/show_more"/>
</LinearLayout>
<LinearLayout
android:id="#id/content"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:gravity="center"
android:background="#android:color/black">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical"
android:background="#drawable/dark_header">
<TextView
android:id="#+id/otherTitle"
android:layout_alignParentRight="true"
android:layout_below="#id/rate"
android:singleLine="true"
android:textSize="21px"
android:paddingLeft="10px"
android:textColor="#EBEBEB"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_weight="0.6"
android:text="#string/someString"/>
<ProgressBar
android:id="#+id/pbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#android:style/Widget.ProgressBar.Small"
android:layout_gravity="center_vertical"/>
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>
Now to handle click events all I had to do was to add onClickListener in my adapter
public View getView(int position, View convertView, ViewGroup parent) {
convertView.setOnClickListener(this);
}
That's it. Problem is I could not get my onItemClickListener working for this ListView. But right now on click listener works for me. One day I would love to find out reason behind this.

It looks like the problem could be that you are inflating a new instance of a ListView rather than using the one in your view.
Try getting the ListView with ListView listView = (ListView) findViewById(R.id.content);
Then apply your adapter to it.

Have you tried
View inflatedView = View.inflate(this, R.layout.main, null);
SlidingDrawer sliding=(SlidingDrawer) inflatedView.findViewById(R.id.drawer);
ListView namesLV = (ListView) sliding.findViewById(R.id.content);