Develop Reference

Scrollbar on Top Side in Horizontal RecyclerView

I am working on the Simple demo of Horizontal RecyclerView.
I want to display scrollbar along with the recyclerview. So I have added android:scrollbars="horizontal" and android:scrollbarSize="5dp" in XML.
I am able to get the Scrollbar but it is showing on the bottom. What I want to achieve is to show it on Top. I have found some questions like this but none of them are for horizontal recyclerView + top side scrollbar.
Here is the code which I have tried so far:
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="false"
android:orientation="horizontal"
android:scrollbars="horizontal"
android:scrollbarSize="5dp"
android:visibility="visible" />
Thanks!

I have searched couple of hours but not found anything as per your requirement. But there are some trikes or do with some hacky code we can get output as per your requirement.
Set your RecyclerView as below in your xml file.
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarSize="10dp"
android:scrollbarStyle="outsideInset"
android:scrollbarThumbVertical="#color/black"
android:scrollbars="horizontal"
android:verticalScrollbarPosition="right"/>
Put your data in revers order in your List or ArrayList because we need to rotate the recyclerviews so when we rotate it then our data will be display as an ASEC order.
//call this method for set recyclerview
private void setRecyclerView()
{
//Please make sure with your item that it will be inserted in revers order then an then it will be working
ArrayList<String> itemList = new ArrayList<>();
for (int i = 50; i > 0; i--){
itemList.add("item " + i);
}
ContainerAdapter adapterMessage = new ContainerAdapter(MainActivity.this, itemList);
if (adapterMessage != null)
{
rvItemList.setHasFixedSize(true);
rvItemList.setLayoutManager(new LinearLayoutManager(MainActivity.this,
LinearLayoutManager.HORIZONTAL, false);
rvItemList.setItemAnimator(new DefaultItemAnimator());
rvItemList.setAdapter(adapterMessage);
//here is the main line for your requirement
rvItemList.setRotation(180);
adapterMessage.notifyDataSetChanged();
}
Now last, In your adapter please rotate your all view in revers direction like below.
public class ViewHolder extends RecyclerView.ViewHolder
{
TextView txt_name;
public ViewHolder(View itemView) {
super(itemView);
txt_name = (TextView) itemView.findViewById(R.id.txt_name);
// here you need to revers rotate your view because your recyclerview is already rotate it so your view is also rotated and you need to revers rotate that view
txt_name.setRotation(-180);
}
}
If you do code as above then your item and its output look like this OutPut
Please make sure to doing this kind of code because android will not responsible for this kind of code, but as per your requirement you can do like this.

Espresso: How do I scroll to an item in a HorizontalScrollView by index?

This is what my HorizontalScrollView looks like:
<HorizontalScrollView
android:layout_below="#id/saved_circuits_title"
android:id="#+id/saved_circuits_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/saved_circuits_scroll"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
In my HomeActivity I have the following relevant code that populates the HorizontalScrollView with bitmaps
onCreate{
...
this.savedCircuitsScroll = (LinearLayout) findViewById(R.id.saved_circuits_scroll);
...
}
updateSavedCircuits(){
...// code to make an ImageView from a retrieved bitmap
newImageImage.setOnClickListener(this.thumbnailListener);
this.savedCircuitsScroll.addView(newImageImage);
...
}
How do I use Espresso to scroll to an ImageView at a specified index in my HorizontalScrollView and click it?
What I've tried
I do not have ID's in my layout xml so an approach such as this does not work:
onView( withId( R.id.button)).perform( scrollTo(), click());
I know you can click on an item by index in a RecyclerView and tried finding an analogous approach for HorizontalScrollViews:
onView(withId(R.id.saved_circuits_scroll))
.perform(HorizontalScrollViewActions.actionOnItemAtPosition(0, click()));
Except HorizontalScrollViewActions does not exist.
or following this blog I tried the following to at least click an item in the HorizontalScrollView at a specified index:
// Click item at position 3
onView(withHorizontalScrollView(R.id.scroll_view).atPosition(3)).perform(click());
// Convenience helper
public static HorizontalScrollViewMatcher withHorizontalScrollView(final int horizontalScrollViewId) {
return new HorizontalScrollViewMatcher(horizontalScrollId);
}
except HorizontalScrollViewMatcher does not exist.
What do we do for HorizontalScrollView? It isn't a descendant of ScrollView so the answer here suggests I need to implement my own custom ViewAction. All I want to do is scroll to an item in a HorizontalScrollView by index and click it. Is this really needed? If this is what I need to do, how do I go about implementing this custom ViewAction?

In my case I got it by using:
onView(allOf(withId(R.id.itemTextView), withEffectiveVisibility(Visibility.VISIBLE), withText(R.string.categories))).perform(scrollTo(), click())
R.id.itemTextView is a TextView (with text R.string.categories) added dynamically to the LinearLayout:
<HorizontalScrollView>
<LinearLayout>
... [child added dynamically]
</LinearLayout>
</HorizontalScrollView>

Try to add this matcher.
public static Matcher<View> withIdAndParentId(final int viewId, final int parentId) {
Assert.assertTrue(viewId != -1);
Assert.assertTrue(parentId != -1);
return new TypeSafeMatcher<View>() {
#Override
public void describeTo(Description description) {
}
#Override
public boolean matchesSafely(View view) {
return view.getId() == viewId && isThereParentWithIdInHierarchy(view);
}
private boolean isThereParentWithIdInHierarchy(View view) {
ViewParent viewParent = view.getParent();
if (viewParent == null || !(viewParent instanceof ViewGroup))
return false;
ViewGroup parent = (ViewGroup) viewParent;
return parent.getId() == parentId || isThereParentWithIdInHierarchy(parent);
}
};
}
This is the way to use it :
onView(withIdAndParentId(R.id.YOUR_PARTICULAR_VIEW_ID, R.id.horizontalScrollViewId)).perform(scrollTo(), click());
Hope, it helps.

OK so in my particular case I found out that my scroll views had no ID associated with them (or none that I could reach reasonably, hence I couldn't use Mody's answer). However, they did have a tag associated with them so I could use Espresso's withTagValue ViewMatcher instead. Each view was associated with a circuitProject object (of course for you it may be different). And I have access to the following:
ArrayList<CircuitProject> circuitProjects = new ArrayList<>();
The index of a circuitProject object happens to be the position of the associated view in the HorizontalScrollView. The tag is the folder the circuitProject object is saved to. From here it is straightforward to get the behaviour I need with Espresso scrolling to a particular index in the HorizontalScrollView:
onView(withTagValue(withStringMatching(circuitProject.getFolderID()))).perform(scrollTo(), click());

Using both a CardScrollView and a ScrollView

I have a CardScrollView with multiple cards. Swiping left and right moves between the cards.
Some of the cards have a lot of content on them. I used a ScrollView so the user can scroll through the card to see the content.
Glass doesn't know whether it should scroll to a different card or scroll on the card it is on when the user swipes their finger for obvious reasons. It chooses to scroll to a different card.
To differentiate, I want to use the GestureDetector to make a one finger scroll scroll cards, and a two finger scroll scroll on the selected card. Seems easy enough, so I made the createGestureDetector() method and put if statements for each case.
Now I have a problem...I do not know how to tell the CardScrollView to advance or go back a card, and I dont know how to make the ScrollBody scroll based on the gesture.
I looked through all of the available methods and nothing stuck out to me as particularly helpful. Does anyone have any idea how to do this?
Bonus question: I saw a lot of "dispatch" commands, like dispatchGenericMotionEvent. What do dispatch methods do?
EDIT:
Here is my code after Jean Vacca's suggestion:
private GestureDetector createGestureDetector(Context context) {
GestureDetector gestureDetector = new GestureDetector(context);
gestureDetector.setFingerListener(new GestureDetector.FingerListener() {
#Override
public void onFingerCountChanged(int previousCount, int currentCount) {
if(currentCount == 2){
mCardScrollView.deactivate();
}else{
mCardScrollView.activate();
}
}
});
return gestureDetector;
}
and the xml for my views is:
<?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" >
<ScrollView
android:id="#+id/scrollBody"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="false">
<LinearLayout
android:id="#+id/scrollLinearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</ScrollView>
</RelativeLayout>
Which is filled with TextViews in this code segment located in the CardScrollAdapter:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
int nextID = 3;
if (convertView == null) {
convertView = View.inflate(context, R.layout.my_card, null);
holder = new ViewHolder();
MyClass mine = mMyList.get(position);
LinearLayout ll = (LinearLayout)convertView.findViewById(R.id.scrollLinearLayout);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
holder.name = new TextView(this.context);
holder.name.setId(nextID);
nextID++;
holder.name.setTextSize(50);
holder.name.setText(mine.getName());
holder.name.setLayoutParams(lp);
holder.name.setGravity(Gravity.CENTER);
ll.addView(holder.name);
holder.infoTextViews = new ArrayList<TextView>(mine.getInfo().size());
for(int i = 0; i < mine.getInfo().size(); i++)
{
holder.infoTextViews.add(new TextView(this.context));
TextView tv = holder.infoTextViews.get(i);
tv.setId(nextID);
nextID++;
tv.setTextSize(24);
tv.setText(mine.getInfo().get(i));
tv.setLayoutParams(lp);
tv.setGravity(Gravity.CENTER);
ll.addView(tv);
}
convertView.setTag(holder);
}
else {
holder = (ViewHolder) convertView.getTag();
}
return convertView;
}
I hope these edits help!

I had a similar problem on my project. To resolve it, I had to handle the "onFingerCountChanged" in the GestureDetector and desactivate the CardScrollView when i have 2 fingers count. So when I use one finger the cardscrollview scroll normaly and when I use two finger on can scroll in my card using the gestureDetector.
You code should look something like this :
gestureDetector.setFingerListener(new GestureDetector.FingerListener() {
#Override
public void onFingerCountChanged(int previousCount, int currentCount) {
if(currentCount == 2){
yourCardScrollView.deactivate();
}else{
yourCardScrollView.activate();
}
}
....
}

EDIT: I notice that my first answer is not work. I have another one.
You can use following code in your Activity.
#Override
public boolean dispatchGenericMotionEvent(MotionEvent ev) {
if (ev.getPointerCount() > 1) {
return true;
}
return super.dispatchGenericMotionEvent(ev);
}
When dispatchGenericMotionEvent actives, detect if pointer is greater than one (muit-touch), return true and consume it.
I tested, but still have bug.
https://code.google.com/p/google-glass-api/issues/detail?id=632
Reply me if it works.

How to put GridView inside ScrollView

I have to design layout such that whole layout should scroll and inside layout I have to display related content in Grid form so I decided to use GridView.But problem is that I’m unable to use GridView inside ScrollView I have read documentation(Documentation also saying that we should not use GridView inside ScrollView) also.But I have to do this,so can any please give me some idea about this.Thanks

There are definitely benefits to a GridView beside the inherent scrolling. For example, a consistent, dynamic layout of cells that will expand and contract based on the data you pass into it. So, when people say it's not good to desire such a functionality, I think that's wrong because you could want the dynamic grid of images (views) inside of a scrolling view, but want that entire scrolling view to contain other things than just the grid cells.
Now, here is how you can do this. Check the answer here. It is an expandable height GridView, which you will want to import / create in your project. What that basically means is that as more items are added to the GridView, it will just expand its height, as opposed to keeping its height set and using scrolling. This is exactly what you want.
Once you have the ExpandableHeightGridView in your project, go to your XML layout where you want the GridView to be. You can then do something like this (paraphrasing):
<ScrollView ...>
<RelativeLayout ...>
<com.example.ExpandableHeightGridView ... />
<other view items />
</RelativeLayout>
</ScrollView>
Then, in your activity where you set the GridView's adapter, you want to make sure you set it to expand. So:
ExpandableHeightGridView gridView = (ExpandableHeightGridView) findViewById(R.id.myId);
gridView.setAdapter(yourAdapter);
gridView.setExpanded(true);
The reason you want this expandable GridView is because, the fact that a standard GridView doesn't expand is what causes it to scroll. It sticks to a certain height, and then as more items fill it past its view bounds, it becomes scrollable. Now, with this, your GridView will always expand its height to fit the content within it, thus never allowing it to enter its scrolling mode. This enables you to use it inside of the ScrollView and use other view elements above or below it within the ScrollView, and have them all scroll.
This should give you the result you're looking for. Let me know if you have any questions.

I know I'm late but I have another solution which I must share and which works flawlessly. Here, the method calculates the GridView height based on the number of items it contains and sets the height to the GridView at run time.
public void setGridViewHeightBasedOnChildren(GridView gridView, int columns) {
ListAdapter listAdapter = gridView.getAdapter();
if (listAdapter == null) {
// pre-condition
return;
}
int totalHeight = 0;
int items = listAdapter.getCount();
int rows = 0;
View listItem = listAdapter.getView(0, null, gridView);
listItem.measure(0, 0);
totalHeight = listItem.getMeasuredHeight();
float x = 1;
if( items > columns ){
x = items/columns;
rows = (int) (x + 1);
totalHeight *= rows;
}
ViewGroup.LayoutParams params = gridView.getLayoutParams();
params.height = totalHeight;
gridView.setLayoutParams(params);
}
After you have called setAdapter on your gridview, just call
setGridViewHeightBasedOnChildren( <yourGridView> , <no of grid view columns> )
and it'll work.
You can the define the gridview in your xml as you normally do
and let the code take care of it. :)

I found a way to give the GridView a fixed size inside ScrollView, and enable scrolling it. That allows you to see the entire ScrollView without having to scroll all elements of the GridView, and it makes more sense to me that using an ExpandableHeightGridView.
To do so, you would have to implement a new class extending GridView and override onTouchEvent() to call requestDisallowInterceptTouchEvent(true).
Thus, the parent view will leave the Grid intercept touch events.
GridViewScrollable.java:
package com.example;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.GridView;
public class GridViewScrollable extends GridView {
public GridViewAdjuntos(Context context) {
super(context);
}
public GridViewAdjuntos(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewAdjuntos(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean onTouchEvent(MotionEvent ev){
// Called when a child does not want this parent and its ancestors to intercept touch events.
requestDisallowInterceptTouchEvent(true);
return super.onTouchEvent(ev);
}
}
Add it in your layout with the characteristics and margins you want, inside a ScrollView:
<ScrollView 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:isScrollContainer="true" >
<com.example.GridViewScrollable
android:id="#+id/myGVS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" />
</ScrollView>
And just get it in your activity:
GridViewScrollable myGridView = (GridViewScrollable) findViewById(R.id.myGVS);
I hope it helps =)
In Kotlin:
class GridViewScrollable #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : GridView(context, attrs, defStyleAttr) {
override fun onTouchEvent(ev: MotionEvent?): Boolean {
// Called when a child does not want this parent and its ancestors to intercept touch events.
requestDisallowInterceptTouchEvent(true)
return super.onTouchEvent(ev)
}
}
There is an annoying warning: "Custom view GridViewScrollable overrides onTouchEvent but not performClick". Please, resolve yourself if you want.

I was also trying to make a GridView scrollable inside a NestedScrollView.
This answer on another question helped me: https://stackoverflow.com/a/38612612
Enable your GridView Property as
android:nestedScrollingEnabled="true"
Original poster: Droid_Dev

To use gridview inside scrollview, set scrollview android:fillViewport="true"
I know its late to answer here but may be useful to some new developers.

If you have used dennisdrew's answer and you have content above your grid and it gets hidden when you open your view simply add the last line below
ExpandableHeightGridView gridView = (ExpandableHeightGridView) findViewById(R.id.myId);
gridView.setAdapter(yourAdapter);
gridView.setExpanded(true);
gridView.setFocusable(false);

i would not force the issue. GridView does not work well in a scrollView. instead convert your gridview into a recyclerview and use a gridLayoutManager to resolve the issue.

It's better to use ExpandableHeightlistView or ExpandableHeightGridView inside scrollview.
Logic
Calculate entire height by providing a very large height hint. But do not use the highest 2 bits of this integer; those are reserved for the MeasureSpec mode.
int expandSpec = MeasureSpec.makeMeasureSpec(
Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
ViewGroup.LayoutParams params = getLayoutParams();
params.height = getMeasuredHeight();
for further information explore the example below with demo
http://www.londatiga.net/it/programming/android/make-android-listview-gridview-expandable-inside-scrollview/

Trust this solution worked for me!
android:nestedScrollingEnabled="true"
The code above inside grid view enables to scroll gridview
and set width and height
android:layout_width="match_parent"
android:layout_height="200sp"
This will work even inside scrollview
Thanks for the previous answers I figured out this for the previous answers.
Thanks to them

gridView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
// Setting on Touch Listener for handling the touch inside ScrollView

If you want to have GridView inside ScrollView / RecyclerView, there are 2 cases:
If you want to have GridView with all rows visible, see https://stackoverflow.com/a/63724794/2914140.
If you want to have one row visible in GridView, but be able to scroll it (to reveal other rows), see https://stackoverflow.com/a/26852498/2914140.

Removing the extra padding in a GridView in android

I want to remove the extra padding that appears in a grid view. I have images of the size 128*128 which will be occupying cells in the grid. But somehow there is an extra space that gets added to the contents of the grid.
After some research, I was able to determine that I have to override the listSelector property of the grid view. Now here's my question - I know I have to specify something like an xml drawable here, but what to specify in that?? I tried using a shape drawable with padding and stroke set to 0dp to no avail.
The question is asked and answered here, but they haven't given what the drawable must contain.
Can some one help me with this. Thanks!
EDIT: Ok - here's a copy of the UI that I have. And the XML layout for the same is as follows:
<GridView android:id="#+id/GV_A2ZMenu" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:numColumns="4"
android:layout_gravity="top" android:stretchMode="columnWidth"
android:gravity="center" android:listSelector="#null" />
And I am using a BaseAdapter class to populate the gridView. Here's its code:
public class AtoZMenu extends BaseAdapter {
private static Context AppC;
private Integer[] MenuImg = { R.drawable.alphabet_a, R.drawable.alphabet_b,
R.drawable.alphabet_c, R.drawable.alphabet_d,
R.drawable.alphabet_e, R.drawable.alphabet_f,
R.drawable.alphabet_g, R.drawable.alphabet_h,
R.drawable.alphabet_i, R.drawable.alphabet_j,
R.drawable.alphabet_k, R.drawable.alphabet_l,
R.drawable.alphabet_m, R.drawable.alphabet_n,
R.drawable.alphabet_o, R.drawable.alphabet_p,
R.drawable.alphabet_q, R.drawable.alphabet_r,
R.drawable.alphabet_s, R.drawable.alphabet_t,
R.drawable.alphabet_u, R.drawable.alphabet_v,
R.drawable.alphabet_w, R.drawable.alphabet_x,
R.drawable.alphabet_y, R.drawable.alphabet_z };
public AtoZMenu(Context C) {
AppC = C;
}
public int getCount() {
return MenuImg.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView IV;
float density = AppC.getResources().getDisplayMetrics().density;
if (convertView == null) {
IV = new ImageView(AppC);
IV.setMaxHeight((int) (1));
} else {
IV = (ImageView) convertView;
}
IV.setImageResource(MenuImg[position]);
return IV;
}
}
Can you spot the mistake?
Note: In the end I ended up implementing a similar screen in a table layout which renders much better grids.

Yep, I've had the same problem. You want to set the listSelector to #null:
<!-- Setting the listSelector to null removes the 5px border -->
<GridView
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#null" />
Also, try the following:
myGridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
I see you can do this in the XML, but I didn't when I had this same problem; not sure why.
I also hard-coded the key height:
float density = getContext().getResources().getDisplayMetrics().density;
mKeyHeight = (int) (56 * density);
....
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageButton b = (ImageButton) convertView;
if (b == null) {
b = new ImageButton(getContext());
b.setMinimumHeight(mKeyHeight);
b.setBackgroundResource(R.drawable.btn_keyboard_key);
b.setOnClickListener(this);
}
}
Sorry about not giving a precise answer, so let me know if you still need help after that.

The correct answer is to set android:listSelector to #android:color/transparent, as user mvds said here.

I used a variation of Shawn's solution.. it looks nice on the Emulator.
1) Decide on the # of columns, I chose 4
2) Set the Column Width
float xdpi = this.getResources().getDisplayMetrics().xdpi;
int mKeyHeight = (int) ( xdpi/4 );
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setColumnWidth( mKeyHeight );// same Height & Width
3) Setup the image in your adapter's getView method
imageView = new ImageView( mContext );
// (xdpi-4) is for internal padding
imageView.setLayoutParams(new GridView.LayoutParams( (int) (xdpi-4)/2, (int) (xdpi-4)/2));
imageView.setScaleType( ImageView.ScaleType.CENTER_CROP );
imageView.setPadding(1, 1, 1, 1);
4) Layout
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="4"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:gravity="center"
android:listSelector="#null"
/>
<!--
android:columnWidth="90dp" Specified in code
android:stretchMode="columnWidth" no noticable change
-->
That's it.

Even I had the same problem.
Try this:
image.setLayoutParams(new GridView.LayoutParams(imageWidth , imageHeight));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);.
Add padding accordingly for the images.It worked for me.

I had a similar problem, though in my case there was a quite large padding area at the bottom of my GridView (it was filled with the background color).
I haven't seen the solution to my issue here, so I'll post it here in case it's helpful.
Besides setting:
android:listSelector="#null"
in my GridView, I also had to set:
android:fadingEdgeLength="0px"
Or, in Java:
GridView.setFadingEdgeLength(0);

Try to give padding in pixels like this
android:paddingLeft="5px"