I am a beginner in android application development. I was going through listview today . Got a small doubt , say, I have a listview populated with string data . Now when I click on a list view item , it should set an image to the side of the text view in that particular row. Is it possible ? Please help me out. A code snippet or a tutorial link is much appreciated ! Thanks in advance to all those genius developers out here in this forum.
Of course this is possible.You should do the following:
1. you need to define a layout file for your row of listView, it should include an Imageview and a TextView.
2. In getView method of your Adapter class, you need to inflate the layoutfile in step1, and set ImageView invisible.
3. In your onItemClicked function, you should set ImageView visible.
Wish this helps.
It's possible. First you'll need to use and adapter that inflates custom ListView item layout.
The layout would look something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/itemImage"/>
</RelativeLayout>
Then for your list you would register a OnItemClickListener like this:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ImageView image = (ImageView) view.findViewById(R.id.itemImage);
try {
// Open the image as an InputStream
InputStream input = getAssets().open("image.jpg");
// Transform the stream to a Bitmap and set it to the ImageView
image.setImageBitmap(BitmapFactory.decodeStream(input));
} catch (IOException e) {
e.printStackTrace();
}
}
});
Note that for the listener receives the position which can be used to open and set specific images (this example uses 1 image for all items of the list).
Related
I know this question is asked several times and I tried to solve according the other solution but in vain. I used customAdapterView with listview. I have also set clickable in the xml. But it's not working.
My question is what's the error that listview is not being clickable?
**Another interesting matter catches my eye that if i start any id name with "list....." during findViewby resoruce id or case - the "l" alphabet automatically becomes captial. Why it happens?
The following portion is inside of onCreate method:-
uddin= getResources().getStringArray(R.array.uddin_name_array);
body=getResources().getStringArray(R.array.uddin_body_array);
prof = getResources().getStringArray(R.array.prof_name_array);
ListView listView= findViewById(R.id.uddinListView);
listView.setClickable(true);
listView.setAdapter(new MyCustomAdapter(this,R.layout.activity_list_view,uddin,prof));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent intent=new Intent(MainActivity.this,ReadingUddinActivity.class);
startActivity(intent);}
}
);
At last I have found the culprit in the code. It was in the xml code. My Java code worked without error. But it was not clickable because of a rating bar in the custom adapter view.
<RatingBar
android:id="#+id/ratingBar"
style="#style/Widget.AppCompat.RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:numStars="2" />
When i assign the style as
style="#style/Widget.AppCompat.RatingBar"
list item prevents to become clickable.
but if i assign the style as
style="#style/Widget.AppCompat.RatingBar.Small"
or,
style="#style/Widget.AppCompat.RatingBar.Indicator"
it works fine. I don't know why the first one doesn't work. Expert may find the reasons.
How can I add name to each gridview list of items ?
for example :-
I have some items and I want to show there names at bottom of each list item.
Anybody have any idea how can I do this ?
You can do it the following way:
// String[] items = {"list", "of", "items"}; -> I am using a string list. You will have to use your object list.
// setContentView(R.layout.viewWithGrid); -> whatever layout has the gridview in it
GridView g=(GridView) findViewById(R.id.grid);
g.setAdapter(new ArrayAdapter<String>(this, R.layout.cell, items));
Now you need to define your "cell.xml" layout which will have a LinearLayout that contains a TextView and an ImageView inside another linear layout (it looks like you are using images) as children.
<?xml version="1.0" encoding="utf-8"?>
<Parent Linear Layout> <!-- fill in attributes -->
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
/>
</ Parent Linear Layout>
Note that you will have to set the text and image dynamically through code (through some listener like onItemClick() or so).
You can do whatever you want, if you make it into a View and pass that into your Adapter. So figure out how to put your image/text overlay into an XML View, and do something like this:
ArrayAdapter<String> adapter=new ArrayAdapter(context,R.layout.image_with_text);
It seems likely that you will actually need to write a class that extends ArrayAdapter (Or CursorAdapter) to do what you want. In that case, extend the layout, and populate your view in getView(). Something like this would work.
View getView(int position, View convertView, ViewGroup parent) {
if (convertView==null) {
convertView = LayoutInflater.from(context).inflate(R.layout.image_with_text);
}
((ImageView)convertView.findViewById(R.id.image)).setImage(getImage(position));
((TextView)convertView.findViewById(R.id.text)).setText(getText(position));
return convertView;
}
I want to make an application that show lyric of sound with music,
I put lyrics in a custom made listview with layout below ( layout for row's ), and time of that lyric in text separated with comma,
then, I want to scroll with media.
This is my custom layout for rows:
<TextView
android:id="#+id/custom_text_arabic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:lineSpacingExtra="15dp"
android:textSize="20sp" />
<TextView
android:id="#+id/custom_text_persian"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:lineSpacingExtra="10dp"
android:textColor="#999999"
android:textSize="12sp" />
</LinearLayout>
and I have an adapter for this custom row layout in list view,
I have a music file that plays with MediaPlayer and I get current position of sound and check that in an array of time to find the position of row in list view, then I scroll to that row in a listview, along side this things, I want that row background change to black!
So, I get that row with this code and change it!
// cAdapter is the name of my BaseAdapter and whereIsMe is current child of listview
// that i want to manipulate it
View mVi = cAdapter.getView(whereIsMe-1, null, lv);
TextView persian = (TextView) mVi.findViewById(R.id.custom_text_persian);
// this toast works great!
Toast.makeText(getApplicationContext(),persian.getText(), Toast.LENGTH_LONG).show();
// this part of code is not working!
persian.setBackgroundColor( Color.BLACK );
the problem is:
I can Toast Text in a TextView perfectly! But I can't change that TextView Background or any other manipulation! why and how can I fix that?
Calling getView doesn't return the actual child of the ListView. There are two options, you can call getChild for the ListViewand update the background color or call notifyDataSetChanged and set the background color in your adapter getView method.
The getView method of the adapter is not meant to be used as you are using it.
Read some tutorials on creating a custom adapter for a listView. Then you can do whatever you want.
Here is a good read on custom adapters;
http://www.vogella.com/tutorials/AndroidListView/article.html
For getting the view you want from outside the adapter use something like this:
View view;
int nFirstPos = lv_data.getFirstVisiblePosition();
int nWantedPos = invalidaEste - nFirstPos;
if ((nWantedPos >= 0) && (nWantedPos <= lv_data.getChildCount())
{
view = lv_data.getChildAt(nWantedPos);
if (view == null)
return;
// else we have the view we want
}
Sometimes listView.getChildAt(int index) returns NULL (Android)
This happens because getView is called internally to create a view. by what you are doing you are actually creating a new view which is not added to any screen/layout so any changes you do wont be reflected on the UI
I am trying to crate a Custom UI similar to pulse android app. As I understand, to start with I have to first create a custom button as shown on the below image marked.
My button has an image and text overlay on it. I know it is a basic question, but I am facing this issue, as I am a beginner to android development. Please do help me to understand how to go with this.
You could compose a simple layout from an ImageView and a TextView aligned to the bottom with black text and some transparency. Both views should be placed inside a RelativeLayout. Then you set a click listener for the RelativeLayout and take appropriate action on click.
Ex:
<RelativeLayout
android:id="#+id/item"
android:layout_width="150dp"
android:layout_height="150dp" >
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/my_test_image" />
<TextView
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#4000"
android:text="Giorgio Armany Galaxy S"
android:textColor="#FFF" />
</RelativeLayout>
Then in your program:
RelativeLayout item=(RelativeLayout)findViewById(R.id.item);
item.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// take action
}
});
This is one scenario. Another scenario is to extend the Button and compose your custom UI component if you would like, which will involve some more coding but instead you'll have a unique component.
Please accept the answer if it answered your question.
Now about the part with grid integration: save the XML content of the example above (RelativeLayout + ImageView + TextView), into a new XML file, let it be layout/grid_item.xml.
Add a unique id for the ImageView and TextView
Then in the getView() method of your adapter inflate that layout and find the ImageView and TextView by id, and set appropriate content.
Note, this is not full source code, but a basic scheleton should look like this:
public View getView(int position, View convertView, ViewGroup parent) {
....
convertView = mInflater.inflate(R.layout.grid_item, null);
....
ImageView myImage=(ImageView)convertView.findViewById(R.id.my_image);
TextView myTextView=(TextView)convertView.findViewById(R.id.my_textview);
myImage.setImageResource(...);
myTextView.setText(...);
...
return convertView
}
I have a ListView. My point is, after selecting one of the elements on that view, I want to show a menubar Right below that element. What Im tryin to do is pretty much something like the app Any.Do.
Heres a picture of what I intent to do.
How can I do it ? Id rather not use GreenDroid.
To fill the array I use this code snniped:
TaskBoard.class
setListAdapter(new SimpleAdapter(this, array_tasks, R.layout.dash_tasks,
new String[] { "task", "project" , "date"}, new int[] { R.id.dashtask,
R.id.taskproject, R.id.final_date}));
R.layout.dash_tasks is the view im showing to the user.
This is a code snipped to call the menubar I want to show:
dash_tasks.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu_bar"
style="#style/page"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="gone">
<include layout="#layout/menubar"></include>
</RelativeLayout>
EDITED:
Ive figured out how can I find the position Im clicking. The problem is, its a relative position. I mean, if I click in the 2nd item on the array, the menubar will apear in the 2nd position every 7 items (thts the number of items that fill a page). Im guessin this position is acording to the screen and not the ListView..
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
View x= parent.getChildAt(position);
View a= x.findViewById(R.id.mini_menu_bar);
a.setVisibility(View.VISIBLE);
I hope this helps you understand the problem
What you do is that in your list items layout xml you also have the menu (wrapped in a vertical linearlayout) but set it to android:visibility="gone". When the item is pressed you just show that hidden menu view.
It depends on how many view you wanna display at the same time. If there is only one, and you want it to sorta stand out without much of programming I would go for QuickAction. If you have multiple views at the same time expanded, my suggestion would be to use RelativeLayout and BeLow. What you need to do is fairly simple. Make sure there is a way for your to find the item below the tapped on, add the new view below the tapped item and add the change the item bellow tapped item to be below the new item. Something like the code below
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW, view.getId());
Another solution would be to use LinearLayout but requires a loop to find the index of the item tapped on and adding the new item below it:
parent.addView(subItem, index+1);