How to have a ListView with icons beside the text? - android

I'm trying to have a ListView with icon and text but there is a little problem as you can see in the screen shot (only a very small part of text is visible!):
Here is the xml files creating this layout:
//The overall layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<ListView
android:id="#+id/ListView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
// this layout is for single rows
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/lIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Edit: This is the getView method of my custom adapter.
public View getView(int position, View convertView, ViewGroup parent) {
View myView = convertView;
cu.moveToPosition(position);
if (convertView == null) {
LayoutInflater li = getLayoutInflater();
myView = li.inflate(R.layout.listicon, null);
ImageView imageView = (ImageView) myView.findViewById(R.id.lIcon);
myView.setLayoutParams(new GridView.LayoutParams(60, 90));
myView.setPadding(8, 8, 8, 8);
byte[] b = Base64.decode(cu.getString(2),Base64.DEFAULT);
imageView.setImageBitmap(BitmapFactory.decodeByteArray(b, 0, b.length));
TextView textView = (TextView) myView.findViewById(R.id.lText);
textView.setText(cu.getString(1));
}
//cu.moveToNext();
int catID = cu.getInt(0);
myView.setTag((Object) catID);
return myView;
}

Try setting layout_width of the ListView and TextView to fill_parent
EDIT: you're resetting list item width in the getView. Either remove or correct your code

Use a relative layout for your rows and place the text right of the image as below :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/lIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/lIcon"/>
</RelativeLayout>

This is related to the way single row is inflated in the adapter
You should try using
LayoutInflater#inflate(layoutId, parent, false)
as suggested in this answer:
https://stackoverflow.com/a/1662611

Try this layout for the row layout:
Adjust the IDs to yours.. also notice the android:layout_toRightOf id.
<?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:orientation="horizontal"
>
<ImageView
android:id="#+id/bimage"
android:layout_height="20dip"
android:layout_width="20dip"
android:layout_gravity="left|center"
android:layout_marginTop="10dip"
android:layout_marginLeft="5dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/btitle"
android:layout_toRightOf="#id/bimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="8dip"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:textSize="18dip"
android:textColor="#ffffff"
android:gravity="center_vertical"
/>
</RelativeLayout>

Related

Want to align linearlayout inside another, but setGravity() doesn`t work

I am trying to align a linear layout inside another linear layout programmatically, but setGravity(Gravity.RIGHT) doesn`t work.
I know the differences between gravity and layout_gravity.
Here's the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/conversationwrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bubble_yellow"
>
<TextView
android:id="#+id/messagecontent_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:text="Message_content"
android:textSize="15dp" />
<TextView
android:id="#+id/timestamp_tv"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="HH:MM"
android:ems="2"
android:textSize="12dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
And the code of getView() in my Adapter:
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
if (row == null) {
LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.listitem_conversation, parent, false);
}
wrapper = (LinearLayout) row.findViewById(R.id.conversationwrapper);
initial_wrapper = (LinearLayout) row.findViewById(R.id.initial_wrapper);
time = (TextView) row.findViewById(R.id.timestamp_tv);
Message coment = getItem(position);
content = (TextView)row.findViewById(R.id.messagecontent_tv);
content.setText(coment.content);
time.setText(getCurrentTimeStamp());
wrapper.setBackgroundResource(!coment.mine ? R.drawable.bubble_yellow : R.drawable.bubble_green);
initial_wrapper.setGravity(!coment.mine ? Gravity.LEFT : Gravity.RIGHT);
return row;
}
But it always happen to be on the left, even when the image is green.
The strange thing is that if I type
android:gravity="right"
inside initial_wrapper, It works in the preview but not in the device.
I'm using a Moto G and a Nexus 5, but neither of them work
The problem can be here : android:layout_width="fill_parent", how you supose to set android:gravity="right" here, if your layout is filling whole parent? You should try to use
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
instead of :
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
do this
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity = "left"
>
in your getView() do this
LinearLayout.LayoutParams lp = initial_wrapper.getLayoutParams();//will need to casting
lp.gravity= Gravity.RIGHT; // this is the important part
initial_wrapper.setLayoutParams(lp);
hope it helps

List Fragment not Clickable

I have a class extending a list fragment, and for some reason, the fragment is not receiving the list item clicks. I have narrowed down the problem to the row items, but I still can't see what the problem is. Here is my XML. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:focusable="true">
<ImageButton
android:id="#+id/image_button"
android:layout_width="120px"
android:layout_height="120px"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/text_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"/>
Here is how I inflate this layout in my custom adapter:
public View getView(int position, View convertView, ViewGroup parent){
LayoutInflater vi = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = vi.inflate(R.layout.list_item, parent, false);
T t = list.get(position);
TextView tv1 = (TextView) view.findViewById(R.id.text_view1);
tv1.setText(t.getName());
ImageButton image= (ImageButton) view.findViewById(R.id.image_button);
image.setBackgroundColor(Color.parseColor("blue"));
return view;
}
I don't see any reason for android:focusable="true" in your parent layout, unless you're trying to achieve what seems to be your problem : switch focus from the list to the list item. Remove that element from your layout and it will work fine.
Revised version :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:focusable="true">
<ImageButton
android:id="#+id/image_button"
android:layout_width="120px"
android:layout_height="120px"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/text_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"/>

ImageView doesn't fill the height of its layout

I wish to add an ImageView inside a ListView. I would like the image to fill the layout without distorsion (basically, fill the height and adapt its width).
This is what I get now:
I have put a grey background to the ImageView to make it easier to see. In red, it's the size I wish to get.
Here is my code:
Project_form.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">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/name_project"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="3dp"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp" >
</TextView>
<Button
android:id="#+id/button_project"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_custom"
android:layout_centerVertical="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_alignParentRight="true"
android:padding="3dp"
android:text=" details "
android:textSize="20dp"
android:visibility="invisible" />
<ImageView
android:id="#+id/imagesstep"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/grey"
android:adjustViewBounds="false"
android:layout_centerVertical="true"
android:padding="3dp"
android:layout_alignParentRight="true"
android:visibility="invisible" />
</RelativeLayout>
method getView() of my Adapter :
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
if (row==null) {
LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.project_form, parent, false);
}
TextView text = (TextView) row.findViewById(R.id.name_project);
text.setText(this.objects[position].getName());
int IDImage=this.objects[position].getIDImage();
int IDPlay = this.objects[position].getIDPlay();
text.setCompoundDrawablesWithIntrinsicBounds(IDImage, 0, 0, 0);
text.setCompoundDrawablePadding(7);
ImageView image = (ImageView)
row.findViewById(R.id.imagesstep);
image.setVisibility(View.VISIBLE);
image.setImageResource(IDPlay);
if (position == selectedPosition) {
row.setBackgroundColor(Color.parseColor("#8000ff00"));
}
else {
row.setBackgroundColor(Color.TRANSPARENT);
}
return row;
}
I tried to play with different parameters such as ScaleType, android:adjustViewBounds and layout_width but the height of my image never changed. I also tried to do it programatically (something like image.setMinHeight(parent.getHeight()) but it failed too.
Could anyone point me out what is going wrong?
Many thanks
Try changing the RelativeLayout of the layout_height to fill_parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<TextView ... />
<Button .. />
<ImageView ... />
</RelativeLayout>
Alternatively you could set the minHeight attribute of the ImageView to ?android:attr/listPreferredItemHeight
<ImageView
...
android:minHeight="?android:attr/listPreferredItemHeight" />
Remove the padding from your imageview

android: display data in xml

I want to create a game list wherein the game details like opponent name,score,etc will be displayed.I am having problem fetching the data into xml and then displaying it.please help.
I have created two xml.I have to set data into the 2nd xml and then include that 2nd xml into 1st xml.
my 1st xml is
<FrameLayout
android:id="#+id/gameListFrame"
android:layout_width="fill_parent"
android:layout_height="380dp"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >
<LinearLayout
android:id="#+id/GameListHolder"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/scrollBackG"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
</FrameLayout>
2nd xml is
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gamelist_items"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50px"
android:gravity="left"
android:orientation="horizontal"
android:background="#FFF" >
<ImageView
android:id="#+id/gl_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout android:orientation="horizontal"
android:layout_width="225px"
android:layout_height="fill_parent"
android:gravity="left"
android:background="#000">
<LinearLayout android:orientation="vertical"
android:layout_width="175px"
android:layout_height="wrap_content"
android:gravity="top">
<TextView android:id="#+id/oppName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="top" >
<TextView android:id="#+id/lastWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView android:id="#+id/diffTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
My code is
gameListItem=(LinearLayout) findViewById(R.id.gamelist_items);
for (i=0;i<gamelistVector.size();i++)
{
rowView=View.inflate(context, R.layout.gamelist_details,null );
TextView oppName=(TextView) rowView.findViewById(R.id.oppName);
TextView lastWord=(TextView) rowView.findViewById(R.id.lastWord);
TextView diffTime=(TextView) rowView.findViewById(R.id.diffTime);
oppName.setText(gList.getOppName());
lastWord.setText(gList.getOppLastWord());
diffTime.setText(gList.getDiffTime()+"hr");
gameListItem.addView(rowView); //show the total games}
You need to extend ListAdapter and override the getView() method that sets the data for each row.
See this example
You need inflater reference to inflate views.
To GetInflater reference use:
LayoutInflater inflater = (LayoutInflater)context.getSystemService
(Context.LAYOUT_INFLATER_SERVICE);
gameListItem=(LinearLayout) findViewById(R.id.gamelist_items);
for (i=0;i<gamelistVector.size();i++)
{
rowView=inflater.inflate(R.layout.gamelist_details, null);
TextView oppName=(TextView) rowView.findViewById(R.id.oppName);
TextView lastWord=(TextView) rowView.findViewById(R.id.lastWord);
TextView diffTime=(TextView) rowView.findViewById(R.id.diffTime);
oppName.setText(gList.getOppName());
lastWord.setText(gList.getOppLastWord());
diffTime.setText(gList.getDiffTime()+"hr");
gameListItem.addView(rowView); //show the total games
}
thanks guys 4 answering to my query...i saw ur suggestions and figured a way out.this is wat i did nd its working...
private void doDisplay(){
this.runOnUiThread(new Thread() {
#Override
public void run() {
TextView gameCount=(TextView) findViewById(R.id.game_count);
gameCount.setText(" found "+maxGames+" games ");
for (i=0;i<gamelistVector.size();i++)
{
rowView=View.inflate(context, R.layout.gamelist_details, null);
TextView oppName=(TextView) rowView.findViewById(R.id.oppName);
TextView lastWord=(TextView) rowView.findViewById(R.id.lastWord);
TextView diffTime=(TextView) rowView.findViewById(R.id.diffTime);
TextView score=(TextView) rowView.findViewById(R.id.opplastMoveScore);
oppName.setText(" "+gamelistVector.get(i).getOppName());
lastWord.setText(" "+gamelistVector.get(i).getOppLastWord());
diffTime.setText(gamelistVector.get(i).getDiffTime()+"");
score.setText("("+gamelistVector.get(i).getLastMoveScore()+")");
ImageView oppImage = (ImageView) rowView.findViewById(R.id.gl_avatar);
oppImage.setImageBitmap(gamelistVector.get(i).getOppImage());
ImageView status = (ImageView) rowView.findViewById(R.id.gl_status);
status.setImageResource(gamelistVector.get(i).getTurnUserID());
gameListItem.addView(rowView);
}
}
});
}

problem with custom ListView showing 3 vertical TextViews

im trying to display 3 TextViews as a custom row design in a ListView. Unfortunatly, only 2 TextViews ( row_title and row_postcode_city) are visible...
Maybe somebody has an idea?
Regards,
float
Code of my ArrayAdapter:
private class PartnerAdapter extends ArrayAdapter<Partner> {
private ArrayList<Partner> items;
public PartnerAdapter(Context context, int textViewResourceId, ArrayList<Partner> items) {
super(context, textViewResourceId, items);
this.items = items;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.partner_suche_ergebnis_row, parent, false);
}
Partner o = items.get(position);
if (o != null) {
TextView title = (TextView) v.findViewById(R.id.row_title);
TextView subtitle = (TextView) v.findViewById(R.id.row_subtitle);
TextView postcode_city = (TextView) v.findViewById(R.id.row_postcode_city);
if (title != null) {
title.setText(o.getTitle());
}
if(subtitle != null){
subtitle.setText(o.getSubtitle());
}
if(postcode_city != null){
subtitle.setText(o.getPostcode() + " " + o.getCity());
}
}
return v;
}
}
XML of the custom row design:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="0dip"><!--
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
--><LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="bold"/>
<TextView
android:id="#+id/row_subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
Try to use the following xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dip">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/row_title"
android:text="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="bold"/>
<TextView
android:id="#+id/row_subtitle"
android:text="2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:text="3"
android:id="#+id/row_postcode_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
Check it now.
Change your LinearLayout to "wrap_content" on layout_height
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content">
Also, I don't know why you have a LinearLayout inside a LinearLayout. Since this xml is only for individual rows. Each row will be a horizontal LinearLayout, the second one being unnecessary as ListView automatically lists rows vertically.
Finally, the root LinearLayout should use minHeight for the default Item Height, not layout_height.
android:minHeight="?android:attr/listPreferredItemHeight"
This should be your xml file (unless you really need the second LinearLayout for some odd reason)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:padding="0dip">
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="bold"/>
<TextView
android:id="#+id/row_subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Sorry for offtopic, but I here some useful tips from me
You have a LOT of needless (and flat out wrong) stuff going on here:
Partner o = items.get(position);
if (o != null) {
You should get something for every position, if item retuns null that means you are doing something wrong. In your case, if you get null you just return reused old, or brand new row, which will confuse the user by displaying the old data, or no data at all.
if (title != null) {
You have 2 ways of getting View object of your row, by inflating, or getting it from recycler (convertView). And recycler will ALLWAYS return the right type of View, so those check are useless since your components will always be found.

Categories

Resources