Develop Reference

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();

ListView - Start activity if clicked on ImageView

My ListView gets filles by this
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:id="#+id/projectImage"
android:maxHeight="70dp"
android:maxWidth="70dp"
android:adjustViewBounds="true"
android:minHeight="50dp"
android:minWidth="50dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="90dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/projectTitle"
android:textStyle="bold"
android:focusable="false"
android:clickable="false"
android:textSize="15dp"
android:text="projecttitle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/projectTopic"
android:focusable="false"
android:clickable="false"
android:textSize="14sp"
android:text="projectTopic"
android:layout_marginTop="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/projectdeadline"
android:textSize="14sp"
android:text="projectdeadline"
android:layout_marginTop="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="projectTaskCount"
android:id="#+id/projectTaskCount"
android:layout_marginTop="3dp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It contains one ImageView and three TextViews.
If I click on the ImageView I want to start my Activity Example1, else open next Activity WiFi.
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent in = new Intent(this, WiFi.class);
in.putExtra("projectFileNamesMap", projectFileNamesMap.get(position));
in.putExtra("position", position);
in.putExtra("sessionId", sessionId);
startActivity(in);
}
How can I solve my Problem?
Summarized:
If I click on ImageView open Example1 Activity.
If elsewhere clicked, then open WiFi Activity.
Hope everybody can understand this.
Kind Regards!

use image.setOnclickListener and view.setOnItemCLickListener inside getView method to perform click on image view and whole view.

First set your image:
android:clickable="true" //setOnClickListener makes a view clickable if it doesn't have that as a default but use it anyway.
then:
imgView.setOnClickListener(new View.OnClickListener() {
//#Override
public void onClick(View v) {
Log.v(TAG, " click");
}
});
pls tell me if this works

Write OnClickListener for ImageView when creating a new Instance for each ImageView elements for the listView in the Adapter's getView method
Also make sure before you addView's to the Linearlayout you set appropriate LayoutParams.
public View getView(final int position, View convertView, ViewGroup parent) {
TextView txtOne, txtTwo, txtThree;
ImageView iv;
LinearLayout layout;
if(convertView == null){
layout = new LinearLayout(context);
txtOne = new TextView(context);
txtTwo = new TextView(context);
txtThree = new TextView(context);
iv = new ImageView(context);
} else{
layout = (LinearLayout) convertView;
txtOne = (TextView) layout.getChildAt(0);
txtTwo = (TextView) layout.getChildAt(0);
txtThree = (TextView) layout.getChildAt(0);
iv = (ImageView) layout.getChildAt(0);
}
layout.addView(txtOne);
layout.addView(txtTwo);
layout.addView(txtThree);
layout.addView(iv);
iv.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Do your handling here
}
});
}

ScrollView not working with fragment

I am trying to create a dynamic fragment. I am adding inside of it 30 buttons and I want it to be scrollable.
Here is my xml code for Fragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light"
tools:context="com.viewpagerexample.app.FragmentA">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView">
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false">
</TableLayout>
</ScrollView>
</LinearLayout>
And this is code for my fragment:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_a,container,false);
// Inflate the layout for this fragment
int numberOfButtons= getArguments().getInt("someInt",0);
linearLayout = new LinearLayout(v.getContext());
view = new TableLayout(v.getContext());
TableRow tr;
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
// Inflate the layout for this fragment
view.setOrientation(TableLayout.VERTICAL);
view.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams
.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT));
TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams
(TableLayout.LayoutParams.FILL_PARENT,TableLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(20,20,20,20);
int numberOfRows = numberOfButtons/2;
int masaCounter = 0;
for (int i = 0;i<numberOfRows;i++)
{
tr = new TableRow(view.getContext());
tr.setLayoutParams(layoutParams);
for (int j= 0;j<2;j++)
{
masaCounter++;
btn = new Button(getActivity());
btn.setBackgroundResource(R.drawable.buttonstyle);
btn.setHeight(200);
btn.setText("Masa" + masaCounter);
btn.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams
.MATCH_PARENT, TableRow.LayoutParams.MATCH_PARENT, 1));
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
tr.addView(btn);
}
view.addView(tr);
}
linearLayout.addView(view);
myView = linearLayout;
return myView;
}
I adds buttons but I can't see all of them. Because scrollview is not working. I could not find what i am doing wrong. How can I make it to work?

Change the height,width of parent layout and ScrollView to match_parent and add property of
android:fillViewport="true"
in ScrollView and change the height,width of table layout to wrap_content and fill_parent respectivity will solve your problem.

Try having the ScrollView as rootView on the layout and put LinearLayout and all the other Views inside it.
Like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light"
tools:context="com.viewpagerexample.app.FragmentA" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false" >
</TableLayout>
</LinearLayout>

Adding multiple TextViews into LinearLayout programmatically

There is long string. I am dividing long string into words and setting TextView for each word.
(You can ask why I need this function? When user clicks on textview(word), application shows the meaning of the word)
...
TextView tv = new TextView(this);
tv.setTextSize(24);
tv.setText(word);
ll.addView(tv);
...
My LinearLayout:
<LinearLayout
android:id="#+id/llReader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical" >
</LinearLayout>
If I put LinearLayout's orientation vertical, it is putting each TextView in new line.
For example:
word1
word2
word3
If I put it in horizontal orientation, it is putting all words only in one line:
word 1, word 2, word 3
In result word4,word5, word6 is not visible.
How to add TextViews programmatically in this way?

You should add Horizontal LinearLayout in your Vertical LinearLayout:
<LinearLayout
android:id="#+id/verticalLinear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/horizontalLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>

In your activity,
private LinearLayout mReaderLayout;
protected void onCreate(Bundle savedInstanceState) {
mReaderLayout = (LinearLayout) findViewById(R.layout.llReader);
}
private void addText(String text) {
TextView textView = new TextView(this);
textView.setText(text);
mReaderLayout.addView(textView);
}

You can use gridview with adapter.
<GridView
android:id="#+id/gridview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="50dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>
and in onCreate:
String[] strings= "Long string".split(" ");
gridView = (GridView) findViewById(R.id.gridview1);
// Create adapter to set value for grid view
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, strings);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(getApplicationContext(),
((TextView) v).getText() , Toast.LENGTH_SHORT).show();
}
});

You can add use a RelativeLayout right away or you can add a two buttons in a linear, vertical Layout and then add that into a horizontal layout. Then add the next vertical linear layout with the other two buttons into the horizontal layout.

Zigzag type of Listview in android

I want to make ListView in android like this
this is possible in iPhone ,in iPhone they used to call it Circle view

It also possible using xml.jst u need to inflate rowLayout then add "Padding" to its view.
The below code execute properly
Please try the below code..
public class MainActivity extends ListActivity {
/** Called when the activity is first created. */
ListView lv;
int [] arr={20,40,60,80,80,60,40,20};
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
lv=getListView();
CustomAdapter adapter=new CustomAdapter(this, arr);
lv.setAdapter(adapter);
}
write below getview method in your customAdapter. change the array as per your requirement
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LinearLayout ll = new LinearLayout(context);
LinearLayout llInside = new LinearLayout(context);
ll.setLayoutParams(new ListView.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
llInside.setLayoutParams(new ListView.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
TextView tv = new TextView(context);
tv.setLayoutParams(new ListView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
tv.setText("this is textbview");
tv.setTextColor(Color.RED);
tv.setLayoutParams(new ListView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
llInside.addView(tv);
//the padding is set here dynamically
int rem = position % 8;
Log.d("" + rem, "" + rem);
llInside.setPadding(img[rem], 0, 0,0 );
ll.addView(llInside);
return ll;
}
Output

If it doesn't need to be too dynamic you could use a scroll view, which contains a LinearLayout, and have textViews inside it with different padding on the left which would stagger them like this, but it would take a while to do and wouldn't be very dynamic in terms of length. I can't think of any other way to do this in android though.
Something like this, and after a few start decrementing the padding to get the zig zag
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:text="TextView" />
</LinearLayout>
</ScrollView>