I want to create a gridview having clickable images..
When ever an image is clicked a corresponding value will be shown below that grid view.
The problem I am facing is in designing part, I dont 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 designing experience as of now.
Please Help !
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With