Develop Reference

How to show the view from bottom while recyclerview scrolling

I am having 15 to 30 items in my recyclerview. At the End of the recyclerview I want to show the Image/Layout at bottom. This image will slowly come to top while scroll the recylerview to top. When the list end the image/layout will fully shown. If we scroll down the recyclerview the image/layout should go down. If I stop the scroll at middle the image/layout will show partially. For example the Image/Layout height will be 100 dp. it will be placed in the bottom. It will not visible at first time. When we scroll the Recyclerview that view will be slowly appear. Please give me any idea to achieve this. Sorry for my bad English.
<?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.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
<RelativeLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Will show while Scroll"
android:textSize="30sp"
/>
</RelativeLayout>
</RelativeLayout>
Scrolling Recyclerview
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dy > 0) {
footerHeight = +10;
bottomView.setTranslationY(footerHeight);
Log.i("Test","...Scrolling up");
} else {
footerHeight = -10;
bottomView.setTranslationY(footerHeight);
Log.i("Test","...Scrolling down");
}
}
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE:
Log.i("Test","...The RecyclerView is not scrolling");
break;
case RecyclerView.SCROLL_STATE_DRAGGING:
Log.i("Test","...Scrolling now");
break;
case RecyclerView.SCROLL_STATE_SETTLING:
Log.i("Test","...Scroll Settling");
break;
}
}
});
Here I just increase/decrease the bottomX view while scrolling. But still I am missing something.
OP:
In this image bottom view is showing always. But initially it want view should be hidden state. While scroll up Bottom view slowly come up. If I scroll down Bottom view should slowly goes down.

Start a new project and try this:
MainActivity.java:
public class MainActivity extends AppCompatActivity {
private static final int DATA_LIST_SIZE = 50;
RecyclerView recyclerView;
TextView footer;
ArrayList<SampleData> dataArrayList;
LinearLayoutManager linearLayoutManager;
int totalHeight = -1;
int invisibleHeight = -1;
int scrolledHeight = -1;
int childHeight = -1;
int footerHeight = -1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recycler_view);
footer = findViewById(R.id.text_view_footer);
dataArrayList = genSampleDataList();
CustomRecyclerViewAdapter adapter = new CustomRecyclerViewAdapter(dataArrayList);
linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setAdapter(adapter);
footer.measure( View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
footerHeight = footer.getMeasuredHeight();
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(#NonNull RecyclerView recyclerView, int dx, int dy) {
View firstVisibleView = recyclerView.getChildAt(0);
if (invisibleHeight == -1) {
childHeight = linearLayoutManager.getDecoratedMeasuredHeight(firstVisibleView);
totalHeight = childHeight * DATA_LIST_SIZE;
invisibleHeight = totalHeight - recyclerView.getHeight() + footerHeight;
}
scrolledHeight = linearLayoutManager.findFirstVisibleItemPosition() * childHeight +
recyclerView.getTop() - firstVisibleView.getTop();
int newRecyclerViewHeight = totalHeight - invisibleHeight + footerHeight -
scrolledHeight * footerHeight / invisibleHeight;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, newRecyclerViewHeight);
recyclerView.setLayoutParams(params);
footer.setBackgroundColor(Color.rgb(255 * (invisibleHeight - scrolledHeight) / invisibleHeight,
255 * scrolledHeight / invisibleHeight, 0));
}
#Override
public void onScrollStateChanged(#NonNull RecyclerView recyclerView, int newState) {
}
});
}
private ArrayList<SampleData> genSampleDataList() {
ArrayList<SampleData> tmpList = new ArrayList<>();
for (int i = 0; i < DATA_LIST_SIZE; i++) {
tmpList.add(new SampleData("Item " + (i + 1), "Description " + (i + 1)));
}
return tmpList;
}
}
SampleData.java:
public class SampleData {
String name;
String description;
public SampleData(String name, String description) {
this.name = name;
this.description = description;
}
}
CustomRecyclerViewAdapter.java:
public class CustomRecyclerViewAdapter extends RecyclerView.Adapter<CustomRecyclerViewAdapter.ViewHolder> {
ArrayList<SampleData> dataList;
public CustomRecyclerViewAdapter(ArrayList<SampleData> dataList) {
this.dataList = dataList;
}
#NonNull
#Override
public ViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view, null);
return new ViewHolder(view);
}
#Override
public void onBindViewHolder(#NonNull ViewHolder holder, int position) {
SampleData sampleData = dataList.get(position);
holder.textViewName.setText(sampleData.name);
holder.textViewDescription.setText(sampleData.description);
}
#Override
public int getItemCount() {
return dataList.size();
}
class ViewHolder extends RecyclerView.ViewHolder {
TextView textViewName;
TextView textViewDescription;
public ViewHolder(#NonNull View itemView) {
super(itemView);
textViewName = itemView.findViewById(R.id.text_view_name);
textViewDescription = itemView.findViewById(R.id.text_view_description);
}
}
}
activity_main.xml:
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:scrollbars="vertical" />
<TextView
android:id="#+id/text_view_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recycler_view"
android:gravity="center"
android:text="Will show while Scroll"
android:textSize="30sp" />
</RelativeLayout>
item_view.xml:
<TextView
android:id="#+id/text_view_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_view_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
</LinearLayout>

One solution if I've read your question correctly is in your model class to include link or Uri of ImageView in a String.
Then in your RecyclerView adapter do some boolean checking to see if item added has a link to it and if it has load it with library called Picasso for example. Picasso is simple just one line of code. If you are using image from phone you might just add uri to image.
And when items are added on last item add link to image or set it yourself.

How to create a rectangle shape dynamically using float values?

I want to dynamically create rectangle shape by using float values from server. The shapes should be precise like if any value is 25.2 and another is 25.3 then the 25.3 one should look bigger like we see in charts. So is there any way to achieve this? Here's the image:
I was trying to change the view size by using this:
itemView.tv_value.layoutParams = LinearLayout.LayoutParams(width,height)
But this seems to be accepting integer values only and if float converted to int using double then it will round off to the nearest number and it won't work.
How to achieve this either by using canvas or views?

First of all width or height of any view can not be float value.
You can set int value based on pixel of screen and float value ratio.
Layout for adapter to generate graph...
<?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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:layout_marginLeft="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:orientation="vertical"
android:gravity="center_vertical|center_horizontal|left"
android:id="#+id/lo_dynamic_view_container">
</LinearLayout>
<TextView
android:id="#+id/tv_chart_value"
android:layout_width="0dp"
android:layout_weight="0.2"
android:minHeight="50dp"
android:textColor="#000"
android:gravity="center_horizontal|center_vertical"
android:layout_height="match_parent"/>
</LinearLayout>
Generate Ration
private float getRatio(int width, float value, float highestValue){
float result = 0;
result = ( (float)width/highestValue) * value;
Log.e("Result", "width: "+ width +" "+(int) Math.floor(result)+"");
return result;
}
Combine Activity and adapter calss
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
ArrayList<Data> listData = new ArrayList<>();
BarChartAdapter barChartAdapter;
int[] colors = {Color.GREEN, Color.CYAN, Color.MAGENTA, Color.RED };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.rv_bar_chart);
listData.add(new Data(8.0f,Color.GREEN));
listData.add(new Data(4.0f,Color.CYAN));
listData.add(new Data(2.0f,Color.MAGENTA));
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
barChartAdapter = new BarChartAdapter(listData);
recyclerView.setAdapter(barChartAdapter);
}
public class BarChartAdapter extends RecyclerView.Adapter<BarChartAdapter.MyViewHolder> {
ArrayList<Data> listData = new ArrayList<>();
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView textView;
LinearLayout layout;
public MyViewHolder(View v) {
super(v);
textView = v.findViewById(R.id.tv_chart_value);
layout = (LinearLayout) v.findViewById(R.id.lo_dynamic_view_container);
}
}
public BarChartAdapter(ArrayList<Data> listData) {
this.listData = listData;
}
#Override
public BarChartAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
View v = (View) LayoutInflater
.from(parent.getContext())
.inflate(R.layout.barchart_layout, parent, false);
MyViewHolder vh = new MyViewHolder(v);
return vh;
}
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.setIsRecyclable(false);
holder.textView.setText(listData.get(position).value+"");
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
width = width - (100/width)*80;
LinearLayout.LayoutParams lparams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
TextView tv = new TextView(MainActivity.this);
tv.setLayoutParams(lparams);
tv.setWidth((int) Math.floor( getRatio(width, listData.get(position).value,getHighestValue(listData))));
float redious [] = { 0, 0, 8.3f, 8.5f, 8.2f, 8.9f, 0, 0 };
ShapeDrawable shape = new ShapeDrawable (new RoundRectShape(redious,null,null));
shape.getPaint().setColor(listData.get(position).color);
//shape.getPaint().setColor(colors[new Random().nextInt((colors.length-1) - 0 + 1) + 0]);
//shape.getPaint().setColor(Color.GREEN);
tv.setBackground(shape);
holder.layout.addView(tv);
}
#Override
public int getItemCount() {
return listData.size();
}
}
private float getRatio(int width, float value, float highestValue){
float result = 0;
result = ( (float)width/highestValue) * value;
Log.e("Result", "width: "+ width +" "+(int) Math.floor(result)+"");
return result;
}
private float getHighestValue(ArrayList<Data> listData){
float result = 0.0f;
if(listData!=null){
if(listData.size()>0){
for (int i = 0; i < listData.size(); i++) {
result = listData.get(i).value>result?listData.get(i).value:result;
}
}
}
return result;
}
class Data{
float value;
int color;
public Data(float value, int color) {
this.value = value;
this.color = color;
}
}
}
Screen Shoot
Full Project link on GitHub

How to set width and height of cell item in GridView programmatically in Android

I am trying to set a dynamic width and height of my GridView's items, this is my code:
class GridAdapter extends BaseAdapter {
private Context context;
private GridAdapter(Context context, List<ParseObject> objects) {
super();
this.context = context;
}
// CONFIGURE CELL
#Override
public View getView(int position, View cell, ViewGroup parent) {
if (cell == null) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
cell = inflater.inflate(R.layout.cell_post_search, null);
}
//-----------------------------------------------
// MARK - INITIALIZE VIEWS
//-----------------------------------------------
ImageView postImg = cell.findViewById(R.id.cpsPostImg);
ImageView videoicon = cell.findViewById(R.id.cpsVideoIcon);
...
return cell;
}
#Override public int getCount() { return postsArray.size(); }
#Override public Object getItem(int position) { return postsArray.get(position); }
#Override public long getItemId(int position) { return position; }
}
// Set Adapter
postsGridView.setAdapter(new GridAdapter(ctx, postsArray));
// Set number of Columns accordingly to the device used
float scalefactor = getResources().getDisplayMetrics().density * screenW/3; // LET'S PRETEND MY screenW = 720, this value whoudl, be 240, which is the width i need for my cell
int number = getWindowManager().getDefaultDisplay().getWidth();
int columns = (int) ((float) number / scalefactor);
postsGridView.setNumColumns(columns);
Log.i(Configurations.TAG, "SCALE FACTOR: " + scalefactor);
And here's my custom cell_post_search.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/cpsCellLayout"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/cpsPostImg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#c1c1c1"
android:scaleType="centerCrop"/>
<ImageView
android:id="#+id/cpsVideoIcon"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_alignEnd="#+id/cpsPostImg"
android:layout_alignParentTop="true"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:visibility="invisible"
app:srcCompat="#drawable/play_butt"/>
<ImageView
android:id="#+id/cpsWhiteFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/white_frame"/>
</RelativeLayout>
</RelativeLayout>
I get 480.0 as scale factor in my Logcat, which is not the right size I need (in my case it should be 240). Anyway, I've also tried to do this:
int columns = (int) ((float) number / (scalefactor/2));
So the scalefactor = 240, but it doesn't matter, because I need my cell's item to be square size, so basically: WIDTH = screenWidth/3, HEIGHT = screenWidth/3.
It doesn't work properly, my GridView shows 3 columns but cells get stretched in width - height looks fine - as shown here:
Is there a way to edit my code and make cells size correctly, as square images, 3 columns, based on the device size?

Try This
class GridAdapter extends BaseAdapter {
private Context context;
private GridAdapter(Context context, List<ParseObject> objects) {
super();
this.context = context;
}
// CONFIGURE CELL
#Override
public View getView(int position, View cell, ViewGroup parent) {
if (cell == null) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
cell = inflater.inflate(R.layout.cell_post_search, null);
}
//-----------------------------------------------
// MARK - INITIALIZE VIEWS
//-----------------------------------------------
ImageView postImg = cell.findViewById(R.id.cpsPostImg);
ImageView videoicon = cell.findViewById(R.id.cpsVideoIcon);
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity) mContext).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
postImg.getLayoutParams().height = width / 3;
...
return cell;
}
#Override public int getCount() { return postsArray.size(); }
#Override public Object getItem(int position) { return postsArray.get(position); }
#Override public long getItemId(int position) { return position; }
}
Also, in your XML layout, add android:numColumns="3":
<GridView
android:id="#+id/upPostsGridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"/>

Twoway view spannable grid layout parameters not working

I'm using the twoway view for the first and i'm struggling to specify the layout attributes for the views. I have tow kinds of views, header and the episode.
This is the xml of both:
Show:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="#dimen/margin_16dp"
android:layout_width="248dp"
android:layout_height="160dp"
android:background="#color/black">
//More views...
</RelativeLayout>
Header:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="54dp"
android:background="#color/red_800">
//More views
I set the height to be 54dp in the header and 160dp for the show but what i'm getting is this, it's always the same (wrong) height, the red bar is the header.
http://postimg.org/image/xx1dk45n9/
Code:
public static class ViewHolder extends RecyclerView.ViewHolder{
public TextView title,date,rate,episode;
public ImageView image;
public ViewHolder(View view) {
super(view);
image = (ImageView)view.findViewById(R.id.image);
title = (TextView)view.findViewById(R.id.title);
date = (TextView)view.findViewById(R.id.date);
rate = (TextView)view.findViewById(R.id.rate);
episode = (TextView)view.findViewById(R.id.episode);
}
}
public static class ViewHolderHeader extends RecyclerView.ViewHolder{
public TextView date,children;
public ViewHolderHeader(View view) {
super(view);
date = (TextView)view.findViewById(R.id.date);
children = (TextView)view.findViewById(R.id.children);
}
}
public CalendarAdapter(Context context) {
mContext = context;
readDateFormat(context);
simpleDateFormat = new SimpleDateFormat(datePattern, Locale.US);
}
#Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
final View view;
if (viewType == CalendarGridItem.TYPE.SHOW.ordinal()){
view = LayoutInflater.from(mContext).inflate(R.layout.calendar_grid_tile, parent, false);
return new ViewHolder(view);
}
else {
view = LayoutInflater.from(mContext).inflate(R.layout.calendar_grid_header, parent, false);
return new ViewHolderHeader(view);
}
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
final View view = holder.itemView;
final CalendarGridItem item = mShows.get(position);
final SpannableGridLayoutManager.LayoutParams lp =
(SpannableGridLayoutManager.LayoutParams) view.getLayoutParams();
if (getItemViewType(position) == CalendarGridItem.TYPE.HEADER.ordinal()){ //Header
final ViewHolderHeader holder1 = (ViewHolderHeader)holder;
CalendarHeader header = (CalendarHeader)item;
Log.d(TAG,"Entrou header: "+header.getDate());
//Mete a colSpan a 2
if (lp.colSpan != 2)
lp.colSpan = 2;
lp.height = 100; //Even forcing the height doesn't work
view.setLayoutParams(lp);
}else{ //Show
final ViewHolder holder1 = (ViewHolder)holder;
UpcomingShow show = (UpcomingShow)item;
if (lp.colSpan != 1)
lp.colSpan = 1;
view.setLayoutParams(lp);
}
}
Fragment layout:
<org.lucasr.twowayview.widget.TwoWayView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/spanGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
style="#style/TwoWayView"
app:twowayview_layoutManager="SpannableGridLayoutManager"
app:twowayview_numColumns="2"/>
What i'm doing wrong ? I'm not used to the recycler view way of doing things, i must be missing something. Teste with Android 4.1.1 and 4.4

Currently have quite the same problem (mine is that elements are all "squares")
It seems like it not possible to give specific height/width for elements in the item layout.
When you look in the source code, in the SpannableGridLayoutManager.java file, you have the method : LayoutParams generateLayoutParams(ViewGroup.LayoutParams lp).
In there, those are the incrimated lines :
final LayoutParams spannableLp = new LayoutParams((MarginLayoutParams) lp);
spannableLp.width = LayoutParams.MATCH_PARENT;
spannableLp.height = LayoutParams.MATCH_PARENT;
But if you do remove that, you "break" all the logic for the spannable grid view...

I also thought that TwoWayView can display the items as squares. So I was digging in the source and found , like Wicha said, that MATCH_PARENT in two places was causing the undesired behaviour.
So I made the following adjustments in the SpannableGridLayoutManager file (commented some lines in checkLayoutParams method) :
#Override
public boolean checkLayoutParams(RecyclerView.LayoutParams lp) {
// if (lp.width != LayoutParams.MATCH_PARENT ||
// lp.height != LayoutParams.MATCH_PARENT) {
// return false;
// }
if (lp instanceof LayoutParams) {
(.....)
}
and here (use width and height from layout params in generateLayoutParams method) :
#Override
public LayoutParams generateLayoutParams(ViewGroup.LayoutParams lp) {
final LayoutParams spannableLp = new LayoutParams((MarginLayoutParams) lp);
spannableLp.width = lp.width; //LayoutParams.MATCH_PARENT;
spannableLp.height = lp.height; //LayoutParams.MATCH_PARENT;
if (lp instanceof LayoutParams) {
(....)
}
Also, in your Adapter class, goes something like this :
#Override
public void onBindViewHolder(ViewHolder viewHolder, final int i) {
viewHolder.image.setScaleType(ImageView.ScaleType.FIT_XY);
viewHolder.image.setPadding(5,5,5,5);
SpannableGridLayoutManager.LayoutParams layoutParams = ((SpannableGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams());
layoutParams.width = cell_width * item.size; //multiply size
layoutParams.height = cell_height * item.size;//multiply size
layoutParams.colSpan = item.size;
layoutParams.rowSpan = item.size;
viewHolder.image.setLayoutParams(layoutParams);
}
Some observations:
cell_width is calculated like screen width/3 in portrait orientation and screen width/4 in landscape.
cell_height is calculated like image_width / image_ratio.
item.size : I decided to have 1:1 or 2:2 or 3:3 aspect ratios for the items, so item_size is the multiplication value.

Android: first element of a GridView is misplaced in galaxy S3 and S4

I'm building an app that has a mini slotMachine game inside. The problem is that I use a GridView for each column of the slot and for some devices (not all) the first symbol of the slot has a space above that comes from nowhere...
The table of the slot is 3 rows X 5 columns.
The space doesn't come from the calculation of the symbol width and height because I've found that with two devices withe perfectly identical resolution and density (Galaxy tab 10.1 and Galaxy note 10.1) the spacing is different: 0 for one and 5 for the other.
Any help?
My MainActivity:
public class MainActivity extends Activity{
SlotView slot;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
slot=new SlotView(this);
slot.refreshSlotView("AAAAAAAAAAAAAAA");
}
}
SlotView:
public class SlotView {
private ArrayList<GridAdapter> adapter=new ArrayList<GridAdapter>();
public float H_RATIO=2/3; //height ratio of the grid based on the device
public float W_RATIO=5/6; //width ratio of the grid based on the device
Activity activity;
String path = "file:///android_asset/Slot/Slot-";
public SlotView(Context c){
activity = (Activity) c;
DisplayMetrics dm = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
final int hDisplay=dm.heightPixels;
int wImage=(1024*hDisplay)/768; //width of the central image
float heightGrid=(hDisplay*2)/3; //grid height
float widthGrid=((wImage*5)/6); //grid width
float heightSymbol=(heightGrid-(8))/3; // symbol height (3 symbols for column with a spacing of 4 px)
//relative layout for the container table
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams((int)widthGrid, (int)heightGrid);
params.addRule(RelativeLayout.CENTER_IN_PARENT);
// grid of the slot
LinearLayout grid_layout=(LinearLayout)activity.findViewById(R.id.layout_grid);
grid_layout.setLayoutParams(params);
grid_layout.setGravity(Gravity.TOP);
// gridview of the columns
LinearLayout.LayoutParams params_grid=new LinearLayout.LayoutParams((int)heightSymbol, (int)heightGrid);
for(int i=0; i<5; i++){ // five columns
GridView slot=new GridView(activity);
slot.setScrollContainer(false);
slot.setVerticalScrollBarEnabled(false);
slot.setHorizontalScrollBarEnabled(false);
if(i<4) {
params_grid.setMargins(0,0,4,0); // spacing between each column
}
slot.setLayoutParams(params_grid);
slot.setVerticalSpacing(4);
slot.setPadding(0, 0, 0, 0);
slot.setColumnWidth((int)heightSymbol);
slot.setNumColumns(GridView.AUTO_FIT);
slot.setGravity(Gravity.CENTER);
GridAdapter grid_adapter=new GridAdapter(activity, (int)heightSymbol, (int)heightSymbol);
adapter.add(grid_adapter);
slot.setAdapter(grid_adapter);
grid_layout.addView(slot);
}
}
public void refreshSlotView(String configTris){
for(int pos=0; pos<5; pos++){
String[] mThumbIds=new String[3];
int z=0;
for(int i=pos; z<3 && i<configTris.length(); i=i+5){
char letter=configTris.charAt(i);
mThumbIds[z]=path + letter + ".png";
z++;
}
adapter.get(pos).setArrayOfImage(mThumbIds);
adapter.get(pos).notifyDataSetChanged();
}
}
}
The adapter:
public class GridAdapter extends BaseAdapter {
private Context mContext;
private String[] mThumbIds={};
private int w;
private int h;
public GridAdapter(Context c, int w, int h) {
mContext = c;
this.w=w;
this.h=h;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
View view=convertView;
ImageView imageView;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.slot_element, null);
RelativeLayout rel=(RelativeLayout)view.findViewById(R.id.rel);
rel.setLayoutParams(new GridView.LayoutParams(w, h));
imageView=(ImageView)view.findViewById(R.id.image);
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(w, h);
params.addRule(RelativeLayout.CENTER_IN_PARENT);
imageView.setLayoutParams(params);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
}else{
imageView = (ImageView) view.findViewById(R.id.image);
}
Picasso.with(mContext).load(mThumbIds[position]).into(imageView); // puts the image in the imageview
return view;
}
public void setArrayOfImage(String[] images){
this.mThumbIds=images;
}
public void showSymbolAtIndex(char letter, int position){
mThumbIds[position]="file:///android_asset/" + "Slot/Slot-" + letter + ".png";
notifyDataSetChanged();
}
}
This is the MainActivity Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layout_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
And the slot_element Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</RelativeLayout>
Now that's the result:
And that's the proof of the existing spacing (if I drag one of the columns up):