Need to create Footer for Gridview in Android - android

See below layout. I am unable to put footer button below a GridView.
Any help will be appreciate.
When Gridview fill in the screen Button is not displayed.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/gridview"
android:text="Load More Images" />
</RelativeLayout>

I have been keeping searching for a long time for a GridView which allows us to addFooterView and addHeaderView like ListView.
It's a post 2 years ago. I come here by following the link in google search result. I don't know weather this problem has been solved or not.
If not, here is a library which may be helpful. https://github.com/liaohuqiu/android-GridViewWithHeaderAndFooter.
It's very simple:
GridViewWithHeaderAndFooter gridView = (GridViewWithHeaderAndFooter) v.findViewById(R.id.ly_image_list_grid);
LayoutInflater layoutInflater = LayoutInflater.from(this);
View headerView = layoutInflater.inflate(R.layout.test_header_view, null);
View footerView = layoutInflater.inflate(R.layout.test_footer_view, null);
gridView.addHeaderView(headerView);
gridView.addFooterView(footerView);
Here is a screen snapshot:
Hope this would be helpful. Good luck!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
>
<GridView android:layout_height="match_parent" android:id="#+id/all_workouts_list"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" android:cacheColorHint="#ffffffff"
android:layout_width="match_parent"
android:layout_above="#+id/add_workout_all_workout_list"></GridView>
<Button android:layout_width="wrap_content"
android:id="#+id/add_workout_all_workout_list" android:layout_height="wrap_content"
android:text="Add Workout" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"></Button>
</RelativeLayout>
Works fine for me

I managed to add footer to my gridview with a little trick. Lets say your adapters main data is
List of MyDataInfo objects list, now when you passed all the data to adapter you can add two empty(null)
objects and check in getView whether data is null or not and inflate desired view .
// in the adapter
public void addVoid(YourInfo info) {
dataList.add(info);
dataList.add(info);
notifyDataSetChanged();
}
public View getView(int position, View convertView, ViewGroup parent) {
if (dataList.get(position) !=null) {
View vi = convertView;
ViewHolder holder;
if (convertView == null || convertView.getTag().equals("stop")) {
//inflate your gridview item
}
else {
holder = (ViewHolder) vi.getTag();
}
// provide data to views
return vi;
}
else {
View v;
if (position == dataList.size() - 2) {
v = inflater.inflate(R.layout.show_more, null); // load more view
v.setTag("stop");
}
else {
v = inflater.inflate(R.layout.progress_bar, null); // progress bar
v.setTag("stop");
}
return v;
}
}
Before this in your main activity where you set adapter you'll have something like this
YourAdapter adap = new YourAdapter(this, dataList);
gridView.setAdapter(adap);
YourInfo info = null;
adapter.addVoid(info);
And important thing you'll have to handle onitemclick
int size = adapter.getCount();
public void onItemClick(AdapterView<?> parent,View view, int position, long id) {
if (position == size - 2) { // user selected SHOW MORE view
int wantedPosition = size - 1;
int firstPosition = grid.getFirstVisiblePosition();
int wantedChild = wantedPosition- firstPosition;
ProgressBar progBar = grid.getChildAt(wantedChild);
progBar.setVisibility(View.Visible);
return;
}
if (position == size - 1) // user selected progress bar
return;
}
Hope this helps ^^

Add to GridView two attributes:
android:paddingBottom of the size as your Button;
android:clipToPadding="false"
This will make some space for button at the bottom of the grid.

Use the same as the below:
Edited:
<FrameLayout android:id="#+id/linear_Layout_List"
android:layout_gravity="center_horizontal|top|bottom"
android:layout_marginTop="90dip" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_marginBottom="60dip" android:background="#E4E4E4">
<GridView android:layout_width="fill_parent"
android:layout_gravity="center_horizontal|top|bottom"
android:columnWidth="90dp" android:numColumns="3"
android:horizontalSpacing="10dp" android:stretchMode="columnWidth"
android:gravity="center" android:id="#+id/Search_Result_Grid"
android:background="#E4E4E4" android:focusable="true"
android:verticalSpacing="10dp" android:layout_height="wrap_content"
android:layout_marginBottom="45dip">
</GridView>
<Button android:id="#+id/txt_LoadMoreGrid"
android:layout_width="fill_parent" android:layout_gravity="center_horizontal|bottom"
android:layout_height="wrap_content" android:text="Load More...."
android:clickable="true" android:textColor="#ffffff"
android:visibility="invisible" android:background="#drawable/top_bar_bg"></Button>
</FrameLayout>
and Call the onScroll method to hide the same as you want...........this implementation for LOAD MORE functionality in GridView.............It works for me.
grid.setOnScrollListener(new OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
System.out.println("The first visible Item:"+firstVisibleItem);
if(width<=320 && height<=480)
{
if(firstVisibleItem+5==totalItemCount-1)
{
/*FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT,FrameLayout.LayoutParams.WRAP_CONTENT,Gravity.NO_GRAVITY);
layoutParams.setMargins(0, 0, 0, 45);
grid.setLayoutParams(layoutParams);*/
tv_Load.setVisibility(tv_Load.VISIBLE);
}
else
{
/* FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT,FrameLayout.LayoutParams.WRAP_CONTENT,Gravity.NO_GRAVITY);
layoutParams.setMargins(0, 0, 0, 0);
grid.setLayoutParams(layoutParams);*/
tv_Load.setVisibility(tv_Load.GONE);
}
}
else
{
if(firstVisibleItem+8==totalItemCount-1)
{
/*FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT,FrameLayout.LayoutParams.WRAP_CONTENT,Gravity.NO_GRAVITY);
layoutParams.setMargins(0, 0, 0, 45);
grid.setLayoutParams(layoutParams);*/
tv_Load.setVisibility(tv_Load.VISIBLE);
}
else
{
/* FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT,FrameLayout.LayoutParams.WRAP_CONTENT,Gravity.NO_GRAVITY);
layoutParams.setMargins(0, 0, 0, 0);
grid.setLayoutParams(layoutParams);*/
tv_Load.setVisibility(tv_Load.GONE);
}
}
}
});

Try adding the button first and putting the grid view on top of it. Something like this ought to work:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Load More Images" />
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button1"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
</RelativeLayout>
EDIT
Based on your comments, I can see why the above does not work. Assuming you mean that you want the button to appear only after you scroll to the bottom (and not be on the screen the entire time), here's the layout I recommend:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Load More Images" />
</LinearLayout>
</ScrollView>

check if this helps
<Button
android:id="#+id/button1"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Load More Images" />

Related

Remove scroll in Listview

There are only two items in my listview and it covers half of screen but listview still shows scroll around it. I have set height to wrap_content
layout code is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="10.0sp"
/>
</LinearLayout>
I don't want scroll to appear on listview because it will have only two items and there is no need to show. I am not sure what is causing scroll to appear.
Any help would be highly appreciated.
Thanking you in advance
UPDATE
Here is my row item xml :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#drawable/roundedshape"
android:alpha="0.7">
<ImageView
android:id="#+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="desc"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:src="#drawable/ic_insert_emoticon_black_48dp"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/icon"
android:paddingBottom="5dp"
android:text="Assignments"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#000"/>
<TextView
android:id="#+id/last_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/title"
android:layout_below="#+id/title"
android:text="Last Update : 01-01-2017"
android:textSize="13sp"
android:textColor="#696969"/>
<TextView
android:id="#+id/unread_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/title"
android:layout_alignBottom="#+id/title"
android:layout_alignParentRight="true"
android:text="04"
android:textSize="12sp"
android:background="#drawable/shape_circular"
android:padding="5dp"
android:textColor="#FFF"
android:textStyle="bold"
android:layout_marginRight="5dp"
/>
</RelativeLayout>
<ListView
...
android:scrollbars="none"
...
/>
try adding:
android:scrollbars="none"
user android:scrollbar="none" like this;
<ListView
android:id="#+id/list_view_meals_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />
To hide scrollbars
do this
android:scrollbars="none"
To disable scrolling do this
listView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});
PS: I think you have messed up your item view which includes icon title and description.
Use this code .....
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="your text view"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="#+id/text_ap"/>
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:layout_above="#id/text_ap"
android:layout_height="match_parent"/>
</RelativeLayout>
try this :
to hide the scrollbar
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:scrollbars="none" // add this
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="10.0sp"
/>
or in your code:
yourlistView.setVerticalScrollBarEnabled(false);
To disable Scrolling of listview Items try:
listView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
return true; // Action will not be forwarded
}
return false;
}
});
OR
yourListView.setScrollContainer(false);
I know it's an old question i was searching for solution and i remembered that i use it in another project and i forgot the owner of the solution so here is the code :
public static void justifyListViewHeightBasedOnChildren (ListView listView) {
ListAdapter adapter = listView.getAdapter();
if (adapter == null) {
return;
}
ViewGroup vg = listView;
int totalHeight = 0;
for (int i = 0; i < adapter.getCount(); i++) {
View listItem = adapter.getView(i, null, vg);
listItem.measure(0, 0);
totalHeight += listItem.getMeasuredHeight();
}
ViewGroup.LayoutParams par = listView.getLayoutParams();
par.height = totalHeight + (listView.getDividerHeight() * (adapter.getCount() - 1));
listView.setLayoutParams(par);
listView.requestLayout();
}

Android GridView not showing any images

I have followed the example at https://developer.android.com/guide/topics/ui/layout/gridview.html and used other resources on SO to make it at least not crash given I'm using the grid view in a fragment.
I'm trying to just get a list of images to show in the grid view (for simplicity I've just put the same image twice in mThumbIds in ImageAdapter).
But when I run the app, no GridView at all is showing in the fragment. Other views in the fragment load fine, but it's like the gridview isn't even there. I'm not really sure how to debug this.
Any help is appreciated, thanks.
ImageAdapter.java:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
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(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.placeholder, R.drawable.placeholder
};
}
PlaceholderFragment:
public static class PlaceholderFragment extends Fragment
{
...
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_items, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.items_subheading);
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
GridView allImages = (GridView) rootView.findViewById(R.id.items_all_images);
allImages.setAdapter(new ImageAdapter(rootView.getContext()));
allImages.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
// empty
}
});
return rootView;
}
fragment_items.xml
<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.myapp.ItemsActivity$PlaceholderFragment">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<ImageView
android:id="#+id/items_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/placeholder"
android:scaleType="fitStart"
style="#style/ItemsImage" />
<GridView
android:id="#+id/items_all_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
android:background="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/items_border">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- About 10 text views -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit
Aiming for:
Edit 2
Solution: Figured it out! Needed android:adjustViewBounds="true" on the ImageView. Without that attribute it seemed to be taking unlimited space below its position.
I think that you have an issue with the LinearLayout who wraps the GridView your LinearLayout is a vertical linear layout so if you use weight the height of the GridView should be 0dp and in your code the height is wrap_content and the width is 0dp so please change the height to 0dp and the width to wrap_content or match_parent
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
/>
UPDATE
According to your mock i think this is what i would do:
<?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"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<!-- If the number of textviews is dynamic and not fixed then it's better to use ListView
with adapter
-->
<!--<ListView-->
<!--android:id="#android:id/list"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content" />-->
</LinearLayout>
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:layout_marginTop="5dp"
android:columnWidth="20dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" />
</LinearLayout>
Please notice if your textviews are not fixed (can be 3 or more ...) then you will need to use ListView with adapter. So each line item in the ListView will be a TextView

Android - GridView height to max height

I've got a GridView inside a scrollview and the GridView has 4 images loaded into it (via an ImageAdapter). My issue is I can get 3 of the images to show but the 4th doesn't. After further investigation, I've found that the height of the gridview is only the height of the row, so if I set the gridview height in xml to 700dp, then it shows up.
Here's a screenshot:
As you can see, I've set the background of the GridView to HotPink to illustrate where the GridView is.
Here's the XML for the main_menu:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<ScrollView
android:id="#+id/svMenu"
android:layout_width="400dp"
android:layout_height="match_parent"
>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->
</LinearLayout>
The LinearLayout "llLeft" is the layout where the menu items get loaded (inside the ScrollView). layout_left is only a shape which draws the dark outline around the greenish background.
Here's the main_menu_header.xml which contains the GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TextView
android:id="#+id/tvDashboardHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Dashboard Main Menu"
android:textSize="20dp"
style="#style/TextShadow"
android:paddingTop="5dp"
android:gravity="left"
android:background="#drawable/menu_item_bg"
/>
<GridView
android:id="#+id/gvMenuItems"
android:layout_width="400dp"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:background="#color/HotPink"
android:gravity="center" >
</GridView>
</LinearLayout>
And here's how I populate the GridView:
ScrollView sv = (ScrollView)findViewById(R.id.svMenu);
LayoutInflater liInflater = getLayoutInflater();
ViewGroup vg = (ViewGroup)liInflater.inflate(R.layout.main_menu_header, sv, false);
sv.addView(vg);
//Setup the Main Menu items on the left side.
GridView gvMenuItems = (GridView) findViewById(R.id.gvMenuItems);
gvMenuItems.setAdapter(new ImageAdapter(this));
ImageAdapter class:
ImageAdapter class:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
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(parent.getLayoutParams().width, 125)); //new GridView.LayoutParams(400, 125));
//imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setMaxHeight(50);
imageView.setMaxWidth(50);
//imageView.setPadding(30, 0, 0, 0);
//imageView.setPadding(40, 30, 20, 30);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.home,
R.drawable.open_folder,
R.drawable.paper_pen,
R.drawable.person
};
}
I thought the gridview property of android:layout_height="match_parent" would work but it's not. Any ideas as to how I can get the GridView to take up the whole left side, inside the scrollview?
My best guess is that scrollview is giving you problem.
Why do u need scrollview for?
Grid View will handle the scrolling. It is kind of redundant.So please remove it and add inflated view directly to llLeft directly. That shall solve the problem.
In fact, it would be more elegant just to use xml to solve your UI problem. Use <include> tag in your main_menu.xml. Here is how
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/main_menu_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->

Android gridview adjusting to screen size

The grid view of my application has 3 rows and 3 columns. I want this to fill the screen ,irrespective of the screen size of the device.
I tried getting window size and setting the layoutparams accordingly. But this is not giving a perfect alignment as it works with weightsum in linearlayout.
So can we use weightsum for gridview or is there any other android property that can be used.
Thanks a lot for time and response.
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/text1view"
android:background="#drawable/home_bg"
android:gravity="center"
android:horizontalSpacing="10dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
each grid item is
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="75dip"
android:layout_margin="0dip"
android:padding="0dip" >
</ImageView>
<TextView
android:id="#+id/grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/grid_item_image"
android:gravity="center_horizontal"
android:padding="0dip"
android:textColor="#000000"
android:textSize="10sp" >
</TextView>
code of the adapter :
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.griditems, null);
holder = new ViewHolder();
holder.text1 = (TextView) convertView
.findViewById(R.id.grid_item_text);
holder.image = (ImageView) convertView
.findViewById(R.id.grid_item_image);
// if it's not recycled, initialize some attributes
holder.image.setImageResource(gridItemIds[position]);
holder.text1.setText(gridTitles[position]);
int h = mContext.getResources().getDisplayMetrics().densityDpi;
// holder.image.setLayoutParams(new LayoutParams(h-50,h-50));
convertView.setLayoutParams(new GridView.LayoutParams(h - 45,
h - 39));
// holder.image.setScaleType(ImageView.ScaleType.CENTER_CROP);
// holder.image.setScaleType(ImageView.ScaleType.FIT_XY);
// holder.image.setPadding(20, 20, 20, 20);
// convertView.setLayoutParams(new GridView.LayoutParams(Utils
// .getLayoutParameter(), Utils.getLayoutParameter()+50));
holder.image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
new ModuleManager().startModuleACtivity(position, mContext);
}
});
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
return convertView;
}
static class ViewHolder {
TextView text1;
ImageView image;
}
pls see the line
convertView.setLayoutParams(new GridView.LayoutParams(h-45, h-39));
i arrived at this value with some trials on different size emulator.
But i dont think its a right way to define height and width.
As far as i understood your question, as you have not posted any code, what you are trying to do is, you want gridview to appear on full screen.
Firstly you must be using some layout to put your gridview in. Do the following:
Make height and width of the layout to fill parent:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
then, set height and width of your gridview to fill_parent as well.
Well, this is just a supposed solution that you might have been working this way. putting some code would be much better. Hope this works for you.
Update:
Well the problem may lie here:
convertView.setLayoutParams(new GridView.LayoutParams(h-45, h-39));
change to:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
convertView.setLayoutParams(new GridView.LayoutParams(params));
Hope this works for you.
#preetha: first of all look at this example i used this and my layout did not affect irrespective of devise height and width....
http://developer.android.com/resources/tutorials/views/hello-gridview.html
set the following in xml
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
hope this helps...
Here I only changed width and height as match parent and wrap content.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView5"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
android:text="Category"
android:textSize="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:src="#drawable/iconclothcolor" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView3"
android:layout_marginTop="2dp"
android:textSize="16dp"
android:textColor="#F37E98"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Shirt" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView4"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Gender - Male" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView8"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Quantity - 10" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView6"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Size - S" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="#+id/textView10"
android:textSize="20dp"
android:text="Offer" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView7"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20dp"
android:textColor="#F37E98"
android:text="Price - 1500 Rs" />
</LinearLayout>
</androidx.cardview.widget.CardView>
And in the Mainclass add this -->
GridLayoutManager gridLayoutManager=new GridLayoutManager(this,2);
recyclerView.setLayoutManager(gridLayoutManager);
To adjusting Gridview to screen size
In onCreate take rowHeight :
root = binding.root
view.onGlobalLayout {
rowHeight =
root.measuredHeight / currentPageNumberOfRow
fillView(appsList)
}
In adapter:
override fun getView(position: Int, ConvertView: View?, parent: ViewGroup?): View? {
var mConvertView = ConvertView
if (layoutInflater == null) {
layoutInflater =
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as
layoutInflater!!.inflate(R.layout.item_app_shortcut, null)
}
if (mConvertView == null) {
mConvertView =
layoutInflater!!.inflate(R.layout.item_child_launcher_app, null)
//Add this:
mConvertView.layoutParams = AbsListView.LayoutParams(GridView.AUTO_FIT, rowHeight)
}
Dont forget set row image:
android:layout_width="0dp"
android:layout_height="0dp"
To fit on screen

A grid layout of icon/text buttons

I am attempting to create a 3 x 3 grid of items. Each Item consists of an ImageView on top of a TextView. Unfortunately, I am having issues getting everything to play nicely.
Here is my attempt to get 2 such items side by side. The text views don't even show, and the icons are squished together (instead of evenly spaced)
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" android:gravity="center"
android:paddingLeft="40px" android:paddingRight="40px" >
<TableRow>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/usertoolsimage"
android:src="#drawable/ftnicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="User Accounts"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/queueimage"
android:src="#drawable/ftnicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Queue Management"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
</TableRow>
<TableRow>
<TextView
android:text="test 3"
android:padding="3dip" android:textColor="#ffffff" />
<TextView
android:text="test 4"
android:gravity="right"
android:padding="3dip" android:textColor="#ffffff" />
</TableRow>
</TableLayout>
My goal in the end is to have a grid of clickable items where the item is an image and text for a main menu. Can anyone guide me on what layouts I should use to achieve this?
Your best bet in my opinion would be to use the gridView that way it supports scrolling and spacing and you can be very dynamic in what each items layout and events are. Another option is to just create a lay out the images with a combination of Relative/Linear Layouts.
GridView layout:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:columnWidth="60dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
and then in your activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
mGame.status = GameStatus.PLAYING;
setContentView(R.layout.gridLayout);
GridView grid = (GridView) findViewById(R.id.myGrid);
grid.setAdapter(new customAdapter());
grid.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
//do some stuff here on click
}
});
}
public class customAdapter extends BaseAdapter {
public View getView(int position, View convertView, ViewGroup parent) {
//create a basic imageview here or inflate a complex layout with
//getLayoutInflator().inflate(R.layout...)
ImageView i = new ImageView(this);
i.setImageResource(mFams.get(position).imageId);
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
final int w = (int) (36 * getResources().getDisplayMetrics().density + 0.5f);
i.setLayoutParams(new GridView.LayoutParams(w * 2, w * 2));
return i;
}
public final int getCount() {
return 9;
}
public final Family getItem(int position) {
return mFams.get(position);
}
public final long getItemId(int position) {
return position;
}
}
Or the basic layout using linear layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:layout_height="fill_parent""
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView>...</ImageView>
<ImageView>...</ImageView>
<ImageView>...</ImageView>
</LinearLayout>
You should really use a GridView to do grids, and not TableRows. Have you seen Android's tutorial for GridView's? To be able to achieve what you want with an image overlayed with text, you would need to utilize the FrameLayout as shown in Android's FrameLayout example. The tricky part here though, is that you need to apply this layout to each item that is going to be in the Gridview.
So for example, lets say you create a layout file called image_text_view.xml which looks like this:
<FrameLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id="#+id/gridImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="false">
</ImageView>
<CheckedTextView
android:id="#+id/imageTick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000000"
android:layout_gravity="center_horizontal|bottom"
android:checkMark="#drawable/icon"
android:checked="false"
android:visibility="invisible"
>
</CheckedTextView>
</FrameLayout>
You need to apply this layout in each of your GridView item. To do this (editing Android's GridView example) You would need to redefine the getView in the ImageAdapter as follows:
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if(convertView==null){
v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
v.setLayoutParams(new GridView.LayoutParams(100,100));
ImageView imageView = (ImageView)v.findViewById(R.id.image);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
imageView.setImageResource(mThumbsIds[position]);
CheckedTextView checkedTextView = (TextView) v.findViewById(R.id.imageTick);
checkedTextView.setEnabled(true);
checkedTextView.setVisibility(View.VISIBLE);
}
else
{
v = convertView;
}
return v;
Using this, for example, you will have whatever you set (whether its text or icons) overlaying the images for each item in the grid. You may need to do minor tweaks to this example to meet your exact needs, but this is the strategy i would go with.

Categories

Resources