I am trying to use the GridView to create a set of Image buttons.
I am using an array list to store the images. Every time an image is assigned to a button through the getView() method, the images array list is reduced by one.
my problem is that only one button is shown in my grid! I am not sure if this is because the getView() method is called more than one time for each button. If so, I guess the array of images becomes empty before all buttons are assigned.
Any help is appreciated.
here is my code
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridView1"
android:layout_width= 'fill_parent'
android:layout_height= 'fill_parent'
android:numColumns="auto_fit"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
item_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="35dp"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
/>
</RelativeLayout>
Images as assigned randomly to the buttons and then removed from the list:
the assignImag()e method is in the MainActivity class and is called every time from the getView() method of the adapter class:
public class MainActivity extends Activity {
ArrayList imgs = new ArrayList();
GridView gridView;
.....
......
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ButtonAdapter(this));
}
public class ButtonAdapter extends BaseAdapter
{
private Context context;
ImageButton imageButton;
public ButtonAdapter(Context c)
{
context = c;
}
//---returns the number of images---
public int getCount() {
return imgs.size();
}
//---returns the ID of an item---
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent)
{
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null) {
gridView = new View(context);
gridView = inflater.inflate(R.layout.item_layout, null);
imageButton = (ImageButton) gridView.findViewById(R.id.button1);
// assign image to the button
assignImage(imageButton);
} else {
gridView = (View) convertView;
}
return gridView;
}
}
}
public void assignImage(ImageButton b){
Random generator = new Random();
int index = generator.nextInt(imgs.size());
b.setContentDescription(imgs.get(index).toString());
b.setBackgroundResource(imgs.get(index));
imgs.remove(index);
}
}
Modify your adapter like this:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4,
-----
R.drawable.imgN
};
// Constructor
public ImageAdapter(Context c){
mContext = c;
}
#Override
public int getCount() {
return mThumbIds.length;
}
#Override
public Object getItem(int position) {
return mThumbIds[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(67, 55));
return imageView;
}
}
No need to create separate layout for each image in the gridView
Related
I would like to create a simple populated GridView using BaseAdapter but I keep getting empty list - application runs but there are no Views displayed.
Below are all files are use for this task:
Main:
String[] items = {"Some", "items", "to", "display"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView grid = (GridView)findViewById(R.id.grid);
final TextView text = (TextView)findViewById(R.id.text);
MyAdapter adapter = new MyAdapter(getApplicationContext(), items);
grid.setAdapter(adapter);
MyAdapter:
LayoutInflater inflater;
Context context;
String[] myData;
public MyAdapter(Context context, String[] myData) {
this.context = context;
this.myData = myData;
}
#Override
public int getCount() {
return 0;
}
#Override
public Object getItem(int position) {
return myData[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = inflater.inflate(R.layout.grid, parent, false);
TextView text = (TextView) convertView.findViewById(R.id.textView);
text.setText(myData[position]);
return convertView;
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.random.MainActivity">
<GridView
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="40dip"
android:horizontalSpacing="5dip"
android:numColumns="auto_fit"
android:columnWidth="100dip"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</android.support.constraint.ConstraintLayout>
grid.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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</LinearLayout>
I have checked in various sources countles times and I did not manage to find an error in my code. It would be amazing if someone would take a look at it and find a reason for empty activity as the reason is probably obvious.
Your getCount method always return 0. Return the number of elements in your myData array instead.
#Override
public int getCount() {
return myData.length;
}
You can try this my friend
public class MyAdapter extends BaseAdapter {
Context context;
String[] data;
public MyAdapter(Context context, String[] myData) {
this.context = context;
this.data = myData;
}
#Override
public int getCount() {
return data.length;
}
#Override
public Object getItem(int position) {
return data[position];
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater)
context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.grid, null);
}
TextView text = (TextView) convertView.findViewById(R.id.textView);
text.setText(data[position]);
return convertView;
}
}
I am currently working on a very basic android application and have encountered an obstacle I cannot solve on my own.
In my application I want to have a start screen with a ListView. In each Line of this ListView there should be a Button and a TextView. I want to have approximately 5 Lines. When you click on each of the Button you should be able to get to different Activities. How do I do that? I read something about adapters but I am still not sure how to build this.
Here's my xml code for the TextView and the Button:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:id="#+id/rl01">
<TextView
android:layout_width= "wrap_content"
android:layout_height="50dp"
android:id="#+id/text01"
android:text="hello"
android:textSize="24dp"
android:textColor="#color/abc_search_url_text_normal"
android:paddingRight="#dimen/activity_horizontal_margin"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_toRightOf="#id/text01"
android:text="Press Me!"
/>
</RelativeLayout>
The xml layout you have posted, will be used as each listview item.
Step 1:
Create a class which extends BaseAdapter;
public class CustomAdapter extends BaseAdapter
{
Context con;
String[] data;
public CustomAdapter (Context context, String[] data)
{
this.con = context;
this.data = data;
}
#Override
public int getCount() {
return data.length;
}
#Override
public Object getItem(int position) {
return data[position];
}
#Override
public long getItemId(int position) {
return 0;
}
//this method will be called for every item of your listview
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView= inflater.inflate(R.layout.customview, parent, false);
TextView text = (TextView) view.findViewById(your text view id); //recognize your view like this
text.setText(data[position]);
return convertView;
}
}
Step 2:
In your activity, recognize your listview:
yourListViewReference = (ListView) findViewById(R.id.your_list_view_id);
And initialize String array:
String[] data = {"item 1", "item2", "item3"}; //how many items you want
And then create instance of custom adapter you created, and set it to listview:
CustomAdapter ad = new CustomAdapter(this, data);
yourListViewReference.setAdapter(ad);
And sorry for my bad english. I am actually working on it.
This article from Vogella is really useful for what you want to do.
Basically, you'll create an Adapter that extends the BaseAdapter class as follows:
public class Adapter extends BaseAdapter {
private List<Item> mItems;
private Context mContext;
public EventAdapter(Context context, List<Event> items) {
mContext = context;
mItems = items;
}
public View getView(int position, View convertView, ViewGroup parent) {
// This recycles your view and prevents constant inflation, which can really hit your performance.
View rowView = convertView;
if (rowView == null) {
ViewHolder viewHolder = new ViewHolder();
rowView = inflater.inflate(R.layout.yourLayout, parent, false);
viewHolder.text = (TextView) rowView.findViewById(R.id.yourTextViewId);
viewHolder.button = (Button) rowView.findViewById(R.id.yourButtonId);
rowView.setTag(viewHolder);
}
ViewHolder holder = (ViewHolder) rowView.getTag();
// Get the correct item by position
Item item = item.get(position);
// Update the row layout with your item data
holder.text.setText(item.text);
holder.button.setButton(item.button);
// Return your row view
return rowView;
}
#Override
public int getCount() {
return mItems.size();
}
#Override
public Object getItem(int position) {
}
#Override
public long getItemId(int position) {
}
static class ViewHolder {
public TextView text;
public Button button;
}
Afterwards you just need to set this adapter to your ListView or RecyclerView by doing
listView.setAdapter(new Adapter(this, items));
I would write a simple example:
You dont need a button in listview row, just implement onItemClick();
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/custom_list"
android:longClickable="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
list_row.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:id="#+id/rl01">
<TextView
android:layout_width= "wrap_content"
android:layout_height="50dp"
android:id="#+id/text01"
android:text="hello"
android:textSize="24dp"
android:textColor="#color/abc_search_url_text_normal"
android:paddingRight="#dimen/activity_horizontal_margin"
/>
MainActivity.java
oncreate()
{
....
lv1 = (ListView) result.findViewById(R.id.custom_list);
String[] listdata = {"txt1", "txt2", "txt3", "txt4", "txt5"};
ListAdapter listAdapt = new ListAdapter(this, listdata );
lv1.setAdapter(listAdapt);
lv1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> a, View v, int position, long id) {
//do ur work here when list row selected
}
});
..
}
ListAdapter.java
public class ListAdapter extends BaseAdapter {
String[] listData;
private LayoutInflater layoutInflater;
public CustomListAdapter(Context aContext, String[] listData) {
this.listData = listData;
layoutInflater = LayoutInflater.from(aContext);
}
#Override
public int getCount() {
return listData.size();
}
#Override
public Object getItem(int position) {
return listData.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.list_row, null);
TextView tv1 = (TextView)convertView.findViewById(R.id.text01);
tv1.setText(listData.[position]);
return convertView;
}
This question already has answers here:
Array Adapter Load Images from Res Folder (Android App)
(2 answers)
Closed 7 years ago.
Hello I have been working on android GridView I am unable to arrange my imageviews in the form of the picture
Like this
After working on GridView I can only arrange my images Like this
Unable to understand how to do so and also I want to play different sound after clicking each button..
Here is the code of gridview.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth" >
Here is the mainactivity code
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_layout);
GridView gridView = (GridView) findViewById(R.id.grid_view);
// Instance of ImageAdapter Class
gridView.setAdapter(new ImageAdapter(this));
}
}
Here is the ImageAdapter code
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.alif, R.drawable.baa,
R.drawable.taa, R.drawable.saa,
R.drawable.raa, R.drawable.jeem,
R.drawable.zaal, R.drawable.haa,
R.drawable.zouen, R.drawable.haah,
R.drawable.zowad, R.drawable.hamza,
R.drawable.yaa, R.drawable.daal,
R.drawable.yay
};
// Constructor
public ImageAdapter(Context c){
mContext = c;
}
#Override
public int getCount() {
return mThumbIds.length;
}
#Override
public Object getItem(int position) {
return mThumbIds[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.);
imageView.setLayoutParams(new GridView.LayoutParams(100, 100));
return imageView;
}
First create new item.xml file with this code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="1dp"
android:id="#+id/itemimg"
android:layout_gravity="center"
/>
</LinearLayout>
then please change your adapter class getview method like this :
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = null;
LayoutInflater inflater;
final ViewHolder holder = new ViewHolder();
if (convertView == null) {
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
itemView = inflater.inflate(R.layout.item, null,false);
} else {
itemView = convertView;
}
holder.img = (ImageView) itemView.findViewById(R.id.itemimg);
holder.img.setImageResource(mThumbIds[position]);
return itemView;
}
static class ViewHolder {
ImageView img;
}
hope this help
I'm trying to create a custom gridview inside a fragment that should look something like this:
http://imgur.com/6fEFYTN
So I created a FragmentLayout that contains the image and the label:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/grid_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
/>
<TextView
android:id="#+id/grid_label"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:layout_marginTop="175dp"
android:background="#drawable/label"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="12sp"
android:textStyle="bold" />
The adapter that manages the FragmentLayout looks like this:
public class CustomGridAdapter extends BaseAdapter{
private Context mContext;
private final String[] label;
private final int[] imgId;
public CustomGridAdapter(Context c,String[] label,int[] imgId ) {
mContext = c;
this.imgId = imgId;
this.label = label;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return 0;
}
#Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
#Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View grid;
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
grid = new View(mContext);
grid = inflater.inflate(R.layout.image_button_layout, null);
TextView textView = (TextView) grid.findViewById(R.id.grid_label);
ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
textView.setText(label[position]);
imageView.setImageResource(imgId[position]);
} else {
grid = (View) convertView;
}
return grid;
}
}
The fragment grid is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<GridView
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/form_grid"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
/>
</LinearLayout>
I'm creating this from the onCreateView method, I'm using onclickListener so the images work as buttons and display a toast when pressed:
#Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_layout_softdrinks, container, false);
GridView grid = (GridView) rootView.findViewById(R.id.form_grid);
CustomGridAdapter adapter = new CustomGridAdapter(rootView.getContext(), label, imgId); //label and imgId are arrays containing strings and int respectively
grid.setAdapter(adapter);
grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
Toast.makeText(inflater.getContext(), "You Clicked at " +label[+ position], Toast.LENGTH_SHORT).show();
}
});
return rootView;
}
The problem is that when I run the code, the screen is blank, so the gridview is not being populated.
Any advice on this?
First of all you will need to provide a payload in imgId array and label array.
Then your grid view won't inflate as well because you are returning 0 in your getCount method!
To inflate your layout replace in your getCount method
Return 0;
With
Return imgId.length;
The getCount method tells the base adapter how much images or strings(..data) you have in your array which you want to inflate in the grid view. If you returning 0, base adapter thinks that there are 0 data to inflate.
hy there, i will create Android Gallery on my app, but this not perfect because use old Interface, i hope my Gallery look modern UI, can you help, my Gallery look like this :
i want my gallery look like this :)
this is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#null"
>
<Gallery
android:id="#+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
/>
<ImageView
android:id="#+id/image1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix"
android:background="#null"/>
</LinearLayout>
and my Activity:
public class MainActivity extends Activity {
//---raw---
Integer[] imageID = {
R.drawable.gbr1,
R.drawable.gbr2,
R.drawable.gbr3,
R.drawable.gbr4
};
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery gallery = (Gallery) findViewById(R.id.gallery1);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
Toast.makeText(getBaseContext(), "Foto" + (position + 1) + " dipilih", Toast.LENGTH_SHORT).show();
//---show click img---
ImageView imageView = (ImageView) findViewById(R.id.image1);
imageView.setImageResource(imageID[position]);
}
});
}
public class ImageAdapter extends BaseAdapter {
private Context context;
private int itemBackground;
public ImageAdapter(Context c) {
context = c;
//---style---
TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 1);
a.recycle();
}
//--- back mount picture---
public int getCount() {
return imageID.length;
}
//---back ID item---
public Object getItem(int position) {
return position;
}
//---back ID item---
public long getItemId(int position) {
return position;
}
//---back view ImageView---
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(context);
imageView.setImageResource(imageID[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}
}
thanks for All before :D
You can use traditional components that are exist in the Github (github.com) for this purpose.
Or design it by yourself (that's more flexible way!)
But it may need to write couple of custom controls to achieve the appearance you want.
Both pictures you attached, almost have the same core (Code Behind) and the main difference between them is their design.