Develop Reference

How do I add margin values to inflated ListView?

This is my code for how each row looks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:id="#+id/recipe_container"
android:layout_margin="12dp"
android:background="#f1f1f1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/recipe_name_text_view"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:textSize="32sp"
android:text="DUMMY TEXT"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/recipe_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DUMMY TEXT"/>
<TextView
android:id="#+id/recipe_difficulty_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DUMMY TEXT"/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/recipe_thumbnail_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sladice"/>
</LinearLayout>
As you can see I have margin set, if I check preview it is also shown.
I populated with inflate this listivew.
This is activity_sladice.xml.
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/recipe_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.recepti.Sladice"
android:background="#color/colorPrimary">
</ListView>
Now each row is together, there is no spacing between left, right, bottom , top.
If I add margin or padding to listview it only works on the entire list, not on each row.
How to do it? I know I can add divider between each row but I also want spacing right and left.
This is getView method from custom adapter.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View recipeView = convertView;
ReceptThumbnail recipe = getItem(position);
// Inflate view if to be inflated
if (recipeView == null) {
recipeView = LayoutInflater.from(getContext()).inflate(R.layout.recipe_item, parent, false);
}
TextView recipeName = (TextView) recipeView.findViewById(R.id.recipe_name_text_view);
recipeName.setText(recipe.getName());
TextView recipeTime = (TextView) recipeView.findViewById(R.id.recipe_time_text_view);
recipeTime.setText(recipe.getTime());
TextView recipeDifficulty = (TextView) recipeView.findViewById(R.id.recipe_difficulty_text_view);
recipeDifficulty.setText(recipe.getDifficulty());
ImageView recipeImage = (ImageView) recipeView.findViewById(R.id.recipe_thumbnail_image_view);
recipeImage.setImageResource(recipe.getImageResourceID());
}

If you want to add margins to the ListView, add margns to the listview.
If you want to add margins to the items, add margins to the items.
It is simple.
However, I suggest you to use ConstraintLAyout. And RecyclerView instead of ListView.

Try using padding in the LinearLayout, and create another LinearLayout as a child of the original, and move the background attribute to it.

try setting margin programmatically in getView method using below method.
public static void setMarginLeft(View v, int left) {
ViewGroup.MarginLayoutParams params =
(ViewGroup.MarginLayoutParams)v.getLayoutParams();
params.setMargins(left, params.topMargin,
params.rightMargin, params.bottomMargin);
}

How to make list view items align left and right programmatically in Android

I am working on a chat app and on chat view I have to show message left and right. But as I am pretty new in Android programming, I am not being able to achieve this. Here is what I am getting :
Here is my chatbubble.xml that is being used to show line items.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bubble_layout_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/bubble_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_msg1">
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxEms="12"
android:layout_gravity="center"
android:text="Hi! new message"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
</LinearLayout>
And getView method of ChatApapter.java
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = layoutInflater.inflate(resource, parent, false);
Holder holder = new Holder();
holder.txtMsg = (TextView) view.findViewById(R.id.message_text);
HashMap<String,String> hashMap = new HashMap<String,String>();
hashMap = chats.get(position);
LinearLayout layout = (LinearLayout) view.findViewById(R.id.bubble_layout);
LinearLayout parent_layout = (LinearLayout) view.findViewById(R.id.bubble_layout_parent);
layout.setPadding(20,20,20,20);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(0,0,0,20);
layout.setLayoutParams(params);
if(hashMap.get("is_mine").equals("yes")) {
layout.setBackgroundResource(R.drawable.bg_msg1);
parent_layout.setGravity(Gravity.RIGHT);
} else {
layout.setBackgroundResource(R.drawable.bg_msg2);
parent_layout.setGravity(Gravity.LEFT);
}
holder.txtMsg.setText(hashMap.get("message"));
holder.txtMsg.setTextColor(Color.BLACK);
return view;
}
Here is activity_chat_list.xml that is main list view file which is being used with adapter.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.mychatapp.UserChat">
<ListView
android:id="#+id/msgListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:divider="#null"
android:dividerHeight="0dp"
android:paddingBottom="10dp"
android:text="Hello World" />
<LinearLayout
android:id="#+id/form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#91f1f1f1"
android:paddingBottom="2dp">
<EditText
android:id="#+id/messageEditText"
android:layout_width="252dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/sendMessageButton"
android:layout_weight="0.72"
android:ems="10"
android:maxHeight="80dp" />
<ImageButton
android:id="#+id/sendMessageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/send_button"
android:text="d" />
</LinearLayout>
</RelativeLayout>
So can someone help me to make message left and right.
Thanks in advance.

You should set your layout_gravity to left or right, instead of the gravity.
I'm copying the concept from How to set layout_gravity programmatically?
Example (warning, code is not tested):
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
if(hashMap.get("is_mine").equals("yes")) {
layout.setBackgroundResource(R.drawable.bg_msg1);
params.gravity = Gravity.RIGHT;
parent_layout.setParams(params);
} else {
layout.setBackgroundResource(R.drawable.bg_msg2);
params.gravity = Gravity.LEFT;
parent_layout.setParams(params);
parent_layout.setGravity(Gravity.LEFT);
}
Alternatively, you make 2 different XMLs and assign layout_gravity inside the xml itself, and inflate appropriate layout for each row.

Use two different textview left and right for is_mine if is_mine is yes set visbility GONE for the other one and set your text on that textview and vice versa.

Instead of using listview try using dynamic textview :
create new Linear layout like
Lineqarlayout ll =new Linear Layout();
LayoutParams lparams = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
TextView tvIncoming=new TextView(this);
tvIncoming.setLayoutParams(lparams);
tvIncoming.setGravity(GRAVITY.RIGHT);
tvIncoming.setText("test");
this.ll.addView(tv);
//similarly tvOutgoing with gravity left
if(hashMap.get("is_mine").equals("yes")) {
tvOutgoing.setBackgroundResource(R.drawable.bg_msg1);
holder.txtMsg.setText(hashMap.get("message"));
} else {
tvincogoing.setBackgroundResource(R.drawable.bg_msg1);
holder.txtMsg.setText(hashMap.get("message"));
}
Let me know if it helps::)
Edit: Use this code(or pseudocode ) in your activity and not in adapter

In your Layout folder, you should create 2 different xml files: rightchatbubble.xml and leftchatbubble.xml with
android:layout_gravity="right"
and
android:layout_gravity="left"
respectively.
In your Adapter you should change the following:
if(hashMap.get("is_mine").equals("yes")) {
layout.setBackgroundResource(R.drawable.bg_msg1);
parent_layout.setGravity(Gravity.RIGHT);
} else {
layout.setBackgroundResource(R.drawable.bg_msg2);
parent_layout.setGravity(Gravity.LEFT);
}
with:
if (hashMap.get("is_mine").equals("yes")) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.leftchatbubble, parent, false);
}
else {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.rightchatbubble, parent, false);
}
and it should work fine.
Obviously, in the main remember to update
YOURadapter.notifyDataSetChanged();

Moving layout position programmatically in linear layout

I have the following 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="wrap_content" >
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_margin="10dip"
android:weightSum="1"
android:background="#000"
android:orientation="horizontal">
<TextView
android:id="#+id/textMessage"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight = ".9"
android:layout_gravity="center"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:background="#FFF"
android:text="TEXT NOT SET"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/thumbPhoto"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight = ".1"
android:src="#drawable/ic_contact_default"/>
</LinearLayout>
</LinearLayout>
What i would like to do is to have the position of my ImageView change to the left side of my textMessage programmatically.
This could be done through xml by placing my ImageView above the TextView. However I would like to achieve the same result but programmatically.
Suppose I have this 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.chat_item, parent, false);
}
wrapper = (LinearLayout) row.findViewById(R.id.wrapper);
// How should I change the position of my ImageView ??
wrapper.setGravity([some_condition] ? Gravity.LEFT : Gravity.RIGHT);
return row;
}

try like this....
ImageView imageView= (ImageView)yourLinearLayout.findViewById(R.id.thumbPhoto);
yourLinearLayout.removeViewAt(1);
yourLinearLayout.addView(imageView, 0);
By using this line
// How should i change the position of my ImageView ??
wrapper.setGravity([some_condition] ? Gravity.LEFT : Gravity.RIGHT);
It shows no effect. Because here you are applying gravity to linearlayout, this gravity aligns its whole content either in left or right.

http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html
Refer the above documentation for more details about how to set the Layout Parameter for specific component.
LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(
R.id.componentid;
btn.leftMargin = x;
btn.topMargin = y;
btn.width = width;
btn.height = height;
imageview.setLayoutParams(layoutParam);
above code will show how to use layoutparam.

How to have a ListView with icons beside the text?

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>

Center TextViews vertically in RelativeLayout when one or more has visibility set to GONE

I am trying to create a list item layout with 4 items. It is very similar to the example here with some key differences:
the RelativeLayout layout_height may be larger than listPreferredItemHeight
the image is a CheckBox
there are three TextViews
The top and middle TextViews could have visibility set to GONE
What I would like is: If _label is gone, then _message and _definition should be evenly weighted in the layout. If _label and _message are gone, _definition should be centered. I have tried several variations of height, width, gravity, layout_gravity and I even tried to solve this with a LinearLayout (both as the whole layout and just to contain the vertical text). The only way I can get this to work is if I set layout_height to listPreferredItemHeight, but then only two of the text views fit.
<?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:minHeight="?android:attr/listPreferredItemHeight">
<CheckBox android:id="#+id/alarm_list_item_able"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="True"
android:layout_alignParentLeft="True"
android:layout_alignParentBottom="True"
android:layout_centerVertical="True"
android:focusable="false"
android:layout_marginRight="6dp"
android:onClick="onClick"
/>
<TextView android:id="#+id/alarm_list_item_label"
android:text="Label place holder"
android:singleLine="True"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/alarm_list_item_able"
android:layout_alignParentTop="True"
android:gravity="center_vertical"
/>
<TextView android:id="#+id/alarm_list_item_message"
android:text="Message place holder"
android:singleLine="True"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/alarm_list_item_label"
android:layout_toRightOf="#id/alarm_list_item_able"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
/>
<TextView android:id="#+id/alarm_list_item_location"
android:singleLine="True"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/alarm_list_item_message"
android:layout_toRightOf="#id/alarm_list_item_able"
android:layout_marginBottom="5dp"
android:layout_alignWithParentIfMissing="true"
android:layout_alignParentRight="true"
android:paddingBottom="5dp"
android:text="(0.000, 0.000) 0m"
android:gravity="center_vertical"
/>
</RelativeLayout>
Adapter getView Code using the xml from blessenm's answer
#Override
public View getView(int position, View convertView, ViewGroup parent){
Log.d(Global.TAG,"Position "+position);
View newView;
if (convertView != null )
newView = convertView;
else {
LayoutInflater layout = LayoutInflater.from(MyActivity.this);
newView = layout.inflate(R.layout.alarm_list_item, null);
}
String tmp1 = "Place Holder Label"
TextView label = (TextView)newView.findViewById(R.id.alarm_list_item_label);
LayoutParams l = label.getLayoutParams();
if (tmp1.matches("^\\s*$")){
label.setLayoutParams(new LinearLayout.LayoutParams(l.width,l.height,0f));
} else {
label.setLayoutParams(new LinearLayout.LayoutParams(l.width,l.height,1f));
}
label.setText(tmp1)
String tmp2 = "Place Holder Message"
TextView message = (TextView)newView.findViewById(R.id.alarm_list_item_message);
l = message.getLayoutParams();
if (tmp2.matches("^\\s*$")){
message.setLayoutParams(new LinearLayout.LayoutParams(l.width,l.height,0f));
} else {
message.setLayoutParams(new LinearLayout.LayoutParams(l.width,l.height,1f));
}
message.setText(tmp2);
TextView location = (TextView)newView.findViewById(R.id.alarm_list_item_location);
location.setText("location");
return newView;
}

Layout_gravity will only work inside a linear layout. When you want all your textviews to take even height, put them in a linearlayout with vertical orientation and give weight as 1 for all the textviews. So now all of them will take equal heights.
When you need to hide the textviews, just set their layout_weight to 0, now the remaining textview will take the full available space. And if you give the textview gravity="center", the text will be centered both vertically and horizontally.
Edit: The xml and getView method
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox android:id="#+id/alarm_list_item_able"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_marginRight="6dp"
android:onClick="onClick"
android:layout_centerVertical="true"/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/alarm_list_item_able"
android:orientation="vertical"
android:layout_centerVertical="true">
<TextView android:id="#+id/alarm_list_item_label"
android:text="Label place holder"
android:singleLine="True"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/alarm_list_item_message"
android:text="Message place holder"
android:singleLine="True"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/alarm_list_item_able"
android:layout_below="#id/alarm_list_item_label"/>
<TextView android:id="#+id/alarm_list_item_location"
android:singleLine="True"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="(0.000, 0.000) 0m"
android:layout_toRightOf="#id/alarm_list_item_able"
android:layout_below="#id/alarm_list_item_message"/>
</LinearLayout>
</RelativeLayout>
The getview method
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if(convertView == null){
convertView = inflater.inflate(R.layout.list, null);
holder = new ViewHolder();
holder.label = (TextView)convertView.findViewById(
R.id.alarm_list_item_label);
holder.msg = (TextView)convertView.findViewById(
R.id.alarm_list_item_message);
holder.loc = (TextView)convertView.findViewById(
R.id.alarm_list_item_location);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
if(holder != null){
if(data.get(position).mLabel.equals("")){
LinearLayout.LayoutParams labelLp = new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT,0);
if(!data.get(position).mMsg.equals("")) {
holder.label.setLayoutParams(labelLp);
holder.msg.setText(data.get(position).mMsg);
holder.loc.setText(data.get(position).mLoc);
} else {
holder.label.setLayoutParams(labelLp);
holder.msg.setLayoutParams(labelLp);
holder.loc.setText(data.get(position).mLoc);
}
} else {
holder.label.setText(data.get(position).mLabel);
holder.msg.setText(data.get(position).mMsg);
holder.loc.setText(data.get(position).mLoc);
}
}
return convertView;
}