Here i practice some tutorial of making gridview with auto resize image. i'm adopted this tutorial to my activity. what i'm gonna do next is how to make the image clickable. so that when users clicked on each image it goes to some class/activity.
Here is several code from the program I experimented :
activity_main.xml to throw a gridview into layout,stretch mode and column width :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:numColumns="2"
/>
</FrameLayout>
MainActivity.java custom ImageView that maintains its aspect ratio:
public class MainActivity extends ImageView {
public MainActivity(Context context) {
super(context);
}
public MainActivity(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MainActivity(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}
This is a layout for a grid item :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.conversa.MainActivity
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:layout_gravity="bottom"
android:textColor="#android:color/white"
android:background="#55000000"
/>
</FrameLayout>
This is an adapter for gridview :
public class MyAdapter extends BaseAdapter {
private List<Item> items = new ArrayList<Item>();
private LayoutInflater inflater;
public MyAdapter(Context context) {
inflater = LayoutInflater.from(context);
items.add(new Item("Conversation 1", R.drawable.pic1));
items.add(new Item("Conversation 2", R.drawable.pic2));
items.add(new Item("Conversation 3", R.drawable.pic3));
items.add(new Item("Conversation 4", R.drawable.pic4));
items.add(new Item("Conversation 5", R.drawable.pic5));
items.add(new Item("Conversation 6", R.drawable.pic6));
items.add(new Item("Conversation 7", R.drawable.pic7));
items.add(new Item("Conversation 8", R.drawable.pic8));
items.add(new Item("Conversation 9", R.drawable.pic9));
items.add(new Item("Conversation 10", R.drawable.pic10));
}
#Override
public int getCount() {
return items.size();
}
#Override
public Object getItem(int i) {
return items.get(i);
}
#Override
public long getItemId(int i) {
return items.get(i).drawableId;
}
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v = view;
ImageView picture;
TextView name;
if(v == null) {
v = inflater.inflate(R.layout.gridimage, viewGroup, false);
v.setTag(R.id.picture, v.findViewById(R.id.picture));
v.setTag(R.id.text, v.findViewById(R.id.text));
}
picture = (ImageView)v.getTag(R.id.picture);
name = (TextView)v.getTag(R.id.text);
Item item = (Item)getItem(i);
picture.setImageResource(item.drawableId);
name.setText(item.name);
return v;
}
private class Item {
final String name;
final int drawableId;
Item(String name, int drawableId) {
this.name = name;
this.drawableId = drawableId;
}
}
}
And this is where the adapter set into gridview :
public class Gridpiw extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = (GridView)findViewById(R.id.gridview);
gridView.setAdapter(new MyAdapter(this));
}
}
What should I add or maybe modify so that the image can be clicked to show new activity?
You should do it like this:
Firstly, create you activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:numColumns="2"/>
</FrameLayout>
Secondly, change your Gridpiw to MainActivity classname:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setAdapter(new MyAdapter(this));
}
}
Thirdly, change your MainActivity extends ImageView to MeasuredImageView extends ImageView, like this:
public class MeasuredImageView extends ImageView {
public MeasuredImageView(Context context) {
super(context);
}
public MeasuredImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MeasuredImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}
Then, include it into your grid item layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.conversa.MeasuredImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:scaleType="centerCrop"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:layout_gravity="bottom"
android:textColor="#android:color/white"
android:background="#55000000"
/>
</FrameLayout>
NOTE: your ImageView with id "picture" should have attribute android:clickable="true".
Then in your adapter you should store the context, passed as the parameter.
public class MyAdapter extends BaseAdapter {
...
private Context context
...
public MyAdapter(Context context) {
this.context = context;
//your actions...
}
}
And finally, in your getView() function of the adapter class, you should setOnClickListener to your ImageView:
...
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v = view;
ImageView picture;
TextView name;
if(v == null) {
v = inflater.inflate(R.layout.gridimage, viewGroup, false);
v.setTag(R.id.picture, v.findViewById(R.id.picture));
v.setTag(R.id.text, v.findViewById(R.id.text));
}
picture = (ImageView)v.getTag(R.id.picture);
name = (TextView)v.getTag(R.id.text);
Item item = (Item)getItem(i);
picture.setImageResource(item.drawableId);
name.setText(item.name);
picture.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent intent = new Intent(context, SecondActivity.class);
context.startActivity(intent);
}
});
return v;
}
...
Hope this helps.
Add This Kind Of Code For ImageViews to Your Code Inside Your Adapter Inside getView()
Add onClickListener()
picture.setOnClickListener(new OnClickListener() {
// Start new list activity
public void onClick(View v) {
Intent mainIntent = new Inten(SampleMainActivity.this,SecondActivity.class);
startActivity(mainIntent);
}
}
Related
I followed the steps in the accepted answer (from #kcoppock) in the following thread.
https://stackoverflow.com/a/15264039/3296263
or
Gridview with two columns and auto resized images
Edit:
Here is the code.
Gridview code:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/main_category_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:numColumns="2"/>
</FrameLayout>
Grid Item Layout: main_category_list_content.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.praz.notespal.model.SquareImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:layout_gravity="bottom"
android:textColor="#android:color/white"
android:background="#55000000"/>
</FrameLayout>
Custom SquareImageView Class:
public class SquareImageView extends ImageView {
public SquareImageView(Context context) {
super(context);
}
public SquareImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}
}
Adapter Code:
private final class MyAdapter extends BaseAdapter {
private final List<Item> mItems = new ArrayList<Item>();
private final LayoutInflater mInflater;
public MyAdapter(Context context) {
mInflater = LayoutInflater.from(context);
mItems.add(new Item("Red", R.drawable.tile_alevel));
mItems.add(new Item("Magenta", R.drawable.tile_grade10));
mItems.add(new Item("Dark Gray", R.drawable.tile_grade11));
mItems.add(new Item("Gray", R.drawable.tile_grade9));
mItems.add(new Item("Green", R.drawable.tile_alevel));
mItems.add(new Item("Cyan", R.drawable.tile_grade11));
}
#Override
public int getCount() {
return mItems.size();
}
#Override
public Item getItem(int i) {
return mItems.get(i);
}
#Override
public long getItemId(int i) {
return mItems.get(i).drawableId;
}
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v = view;
ImageView picture;
TextView name;
System.out.println("viewing "+ i);
if (v == null) {
v = mInflater.inflate(R.layout.main_category_list_content, viewGroup, false);
v.setTag(R.id.picture, v.findViewById(R.id.picture));
v.setTag(R.id.text, v.findViewById(R.id.text));
}
picture = (ImageView) v.getTag(R.id.picture);
name = (TextView) v.getTag(R.id.text);
Item item = getItem(i);
picture.setImageResource(item.drawableId);
name.setText(item.name);
return v;
}
private class Item {
public final String name;
public final int drawableId;
Item(String name, int drawableId) {
this.name = name;
this.drawableId = drawableId;
}
}
}
Activity Code where i set the adapter
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridView = (GridView)findViewById(R.id.main_category_list);
gridView.setAdapter(new MyAdapter(this));
}
Instead of showing all 6 items, i only see 2. If i increase the 'numColumns' property to 3, then it shows 3. So it only shows the first row. I placed a console out inside the getView() method in the adapter to see the position of the grid that is being called. To my surprise, what i see is the below output.
I/System.out: viewing item 0
I/System.out: viewing item 1
I/System.out: viewing item 0
I/System.out: viewing item 0
I/System.out: viewing item 0
I/System.out: viewing item 0
As you can see, it repeats 0th position instead of moving to 3rd. After alot of searching I still have not been able to figure out what is going on. Any help is highly appreciated.
Please note that i have created a new question, because i cannot reply to his answer because of reputation points shortage.
I figured out what was wrong (by accident of course). The problem is that My GridView was inside a NestedScrolView. For some reason these 2 do not work well together. The moment I take the GridView out of the NestedScrolView, it works like a charm. I did some further searching on what causes this behavior, but i could not find any lead. Anyway, I don't really want a NestedScrolView, so its all good now. Thanks for everyone who replied. If antyone knows the reason for the above behavior, please explain.
GridView is scrolled programmatically, and no new item appears coming up from the bottom.
I tried to update with the following line, but it does not force GridView to load new items.
imageAdapter.notifyDataSetChanged();
gridview.invalidateViews();
gridview.setAdapter(imageAdapter);
Simplified the app, now the scrolling can be fired with button click, but the upcoming empty items are still appearing. Here is some code:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final CustomGridView gridview = (CustomGridView) findViewById(R.id.gridView1);
final ImageAdapter imageAdapter = new ImageAdapter(this);
gridview.setAdapter(imageAdapter);
gridview.setNumColumns(3);
LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams)gridview.getLayoutParams();
linearParams.width=66*3;
gridview.setLayoutParams(linearParams);
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
gridview.scrollBy(0, 44);
}
});
}
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return 300;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(66, 66));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(0, 0, 0, 0); // 8 8 8 8
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(R.drawable.asdf);
return imageView;
}
}
<?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.j4nos.moviebuffs12.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="198dp"
android:layout_height="match_parent"
android:layout_marginTop="66dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="0dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.j4nos.moviebuffs12.CustomGridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:columnWidth="66dp"
android:horizontalSpacing="0dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="horizontal"
android:stretchMode="none"
android:verticalSpacing="0dp"
android:listSelector="#null"
android:scaleType="centerCrop">
</com.j4nos.moviebuffs12.CustomGridView>
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
public class CustomGridView extends GridView {
public CustomGridView(Context context) {
super(context);
}
public CustomGridView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomGridView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/* ADD THIS */
#Override
public int computeVerticalScrollOffset() {
return super.computeVerticalScrollOffset();
}
}
I think the problem is with the way you are scrolling:
gridview.scrollBy(0, 44);
This moves the gridview, not the content of the gridview. You can verify this by adding the following into your layout inside the CustomGridView component:
android:fastScrollAlwaysVisible="true"
Now you can see it's not the gridview content that is being interacted with on the button press.
Instead, I suggest you try to use:
gridview.scrollListBy(44);
if your API level allows it.
I make WearableListView list. Problem is that setting android:layout_height="20dp" doesn't help
How to set height in this case? In Android Wear sample projects Notifications and Timer they also just set atribute android:layout_height="80dp". But I tried to set in the projects android:layout_height="20dp" but it didn't help! (below is my project source code):
list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<base.mobitee.com.mobiteewatch.adapter.HolesListItemLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="20dp"
android:gravity="center_vertical" >
<TextView
android:id="#+id/text_hole"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:textSize="#dimen/list_item_text_size" />
</base.mobitee.com.mobiteewatch.adapter.HolesListItemLayout>
HolesListItemLayout.java:
public class HolesListItemLayout extends LinearLayout
implements WearableListView.OnCenterProximityListener {
private TextView mName;
private final int mFadedTextColor;
private final int mChosenTextColor;
public HolesListItemLayout(Context context) {
this(context, null);
}
public HolesListItemLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public HolesListItemLayout(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
mFadedTextColor = getResources().getColor(R.color.grey);
mChosenTextColor = getResources().getColor(R.color.black);
}
// Get references to the icon and text in the item layout definition
#Override
protected void onFinishInflate() {
super.onFinishInflate();
mName = (TextView) findViewById(R.id.text_hole);
}
#Override
public void onCenterPosition(boolean animate) {
mName.setTextSize(18);
mName.setTextColor(mChosenTextColor);
}
#Override
public void onNonCenterPosition(boolean animate) {
mName.setTextColor(mFadedTextColor);
mName.setTextSize(14);
}
}
HolesListAdapter.java:
public class HolesListAdapter extends WearableListView.Adapter {
private final Context mContext;
private final LayoutInflater mInflater;
public HolesListAdapter(Context context) {
this.mContext = context;
mInflater = LayoutInflater.from(context);
}
#Override
public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new WearableListView.ViewHolder(
mInflater.inflate(R.layout.list_item_hole, null));
}
#Override
public void onBindViewHolder(WearableListView.ViewHolder holder, int position) {
TextView text = (TextView) holder.itemView.findViewById(R.id.text_hole);
text.setText(mContext.getString(R.string.hole_list_item) + " " + (position + 1));
text.setTextColor(mContext.getResources().getColor(android.R.color.black));
holder.itemView.setTag(position);
}
#Override
public int getItemCount() {
return Preferences.HOLES;
}
}
The WearableListView is hard-coded to only display three items at a time - it measures the item height by dividing the list view's height by three ... so there isn't a practical way of doing what you want.
I suggest making the text font larger ...
I've got idea. Insert list into FrameLayout container. And by changing height of container list item height is changed. Result:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_centerInParent="true">
<android.support.wearable.view.WearableListView
android:id="#+id/wearable_list_game_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dividerHeight="0dp"
android:scrollbars="none"/>
</FrameLayout>
</RelativeLayout>
Add one LinearLayout inside and set
android:layout_height="50dp"
android:layout_margin="5dp"
Note: This problem only happens in gridview, if you setimagebitmap in a single imageview, it works well.
See the following pictures, The left picture is what I want, and the picture on right is what actually I get.
The only difference is the way I set the image, if I set the image as below, I get the correct result(left picture above).
holder.image.setImageResource(imagesArray.get(position));
But if I set the image with bitmap as below, the image not scaled as I want(the right picture above)
holder.imageView.setImageBitmap(bitmap);
Why I set the image as bitmap instead of drawable?
because my images were encrypted, I need to decrypt them before load into the imageview. the basic step is:
depryct the image into byte arrya.
create bitmap from the bytes.
load the bitmap into imageview.
Note, the problem was not caused by the decryption, I have test with an normal image without decryption, it does not work either.
Here is the code
GridViewActivity
public class GridViewActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gridview);
GridView gridView = (GridView)findViewById(R.id.grid_view);
ImageAdapter imageAdapter = ImageAdapter.getInstance();
imageAdapter.setContext(this);
gridView.setAdapter(imageAdapter);
for (int i = 0; i < 50; i++) {
int resourceId = getResources().getIdentifier("myimage", "drawable", getPackageName());
imageAdapter.imagesArray.add(resourceId);
}
}
}
ImageAdapter
public class ImageAdapter extends BaseAdapter {
private static ImageAdapter imageAdapter = null;
private Bitmap bitmap;
private Context mContext;
public ArrayList<Integer> imagesArray = new ArrayList<Integer>();
private ImageAdapter() {
}
public static ImageAdapter getInstance() {
if (imageAdapter == null) {
imageAdapter = new ImageAdapter();
}
return imageAdapter;
}
public void setContext(Context context) {
mContext = context;
}
#Override
public int getCount() {
return imagesArray.size();
}
#Override
public Object getItem(int position) {
return imagesArray.get(position);
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
ViewHolder holder;
if (row == null) {
LayoutInflater inflater = ((Activity)mContext).getLayoutInflater();
row = inflater.inflate(R.layout.row_grid, parent, false);
holder = new ViewHolder();
holder.imageView = (ImageView)row.findViewById(R.id.image);
row.setTag(holder);
}
else {
holder = (ViewHolder)row.getTag();
}
// Create bitmap from image in assets folder.
String imageFileName = "myimage.jpg";
AssetManager assetMgr = mContext.getAssets();
try {
InputStream fis = assetMgr.open(imageFileName);
bitmap = BitmapFactory.decodeStream(fis);
}
catch (Exception ex) {
Log.i("zdd", ex.getLocalizedMessage());
}
holder.imageView.setImageBitmap(bitmap);
//holder.image.setImageResource(imagesArray.get(position));
return row;
}
static class ViewHolder {
ImageView imageView;
}
}
SquareImageView
public class SquareImageView extends ImageView
{
public SquareImageView(Context context)
{
super(context);
}
public SquareImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public SquareImageView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}
Here is the layout
activity_gridview.xml
<?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="fill_parent">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7f7f7f"
android:numColumns="4"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp"
android:gravity="center"
android:stretchMode="columnWidth"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
</GridView>
</RelativeLayout>
row_grid.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp"
android:background="#ffffff">
<com.jiyuzhai.setimagebitmaptest.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
</LinearLayout>
Try changing the row item's parent size to "match_parent".
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
android:background="#ffffff">
<com.jiyuzhai.setimagebitmaptest.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
</LinearLayout>
Try removing "padding" property from linear layout (or setting it to 0dp) and setting scaleType to fitXY in SquareImageView.
I want to create a grid view with clickable images.
Whenever an image is clicked, a corresponding value will be shown below that grid view.
The problem I am facing is in the design part, I don't know how to design a grid view like this. Every time I try to do that I get some bad results. I have no android UI design experience as of now.
How can I accomplish this?
Try this
Main activity
public class MainActivity extends AppCompatActivity {
List<String> list;
int[] imageId = {
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e,
R.drawable.f,
};
String[] web = {
"Google",
"Github",
"Instagram",
"Facebook",
"Flickr",
"Pinterest",
"Quora",
"Twitter",
"Vimeo",
"WordPress",
"Youtube",
"Stumbleupon",
"SoundCloud",
"Reddit",
"Blogger"
} ;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageAdapter adapter = new ImageAdapter(MainActivity.this,web,
imageId);
GridView grid=(GridView)findViewById(R.id.grid_view);
grid.setAdapter(adapter);
grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
}
});
}
}
activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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.mypc.grid.MainActivity">
<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="2"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth" >
</GridView>
</LinearLayout>
ImageAdapter class
public class ImageAdapter extends BaseAdapter
{
private Context mContext;
private final int[] Imageid;
private final String[] web;
public ImageAdapter(Context c,String[] web,int[] Imageid )
{
mContext = c;
this.Imageid = Imageid;
this.web=web;
}
#Override
public int getCount()
{
return Imageid.length;
}
#Override
public Object getItem(int position)
{
return position;
}
#Override
public long getItemId(int position)
{
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup
parent)
{
LayoutInflater inflater = (LayoutInflater)
mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null)
{
gridView = new View(mContext);
// get layout from mobile.xml
gridView = inflater.inflate(R.layout.grid_layout, null);
// set value into textview
TextView textView = (TextView)
gridView.findViewById(R.id.grid_item_label);
textView.setText(web[position]);
// set image based on selected text
ImageView imageView = (ImageView)
gridView.findViewById(R.id.grid_item_image);
imageView.setImageResource(Imageid[position]);
}
else
{
gridView = (View) convertView;
}
return gridView;
}
}
grid_layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginRight="10dp"
>
</ImageView>
<TextView
android:id="#+id/grid_item_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:layout_marginTop="5px"
android:textSize="15px" >
</TextView>
</LinearLayout>