Thursday, August 4, 2016

Android GridView last column getting cut

Leave a Comment

I have a GridView holding TextViews in my app and for some reason the last column is getting it's edge cut (see screenshot below). I'm guessing it has something to do with the little bit of gap in the left side of the GridView, but I don't know whats causing it.

What am I doing wrong here? screenshot

I've made the GridView background a bit darker than the fragment background.

My Code:

layout/fragment.xml:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"                                          xmlns:app="http://schemas.android.com/apk/res-auto"                                          xmlns:tools="http://schemas.android.com/tools"                                          android:layout_width="match_parent"                                          android:layout_height="match_parent"                                          android:background="#ADD178"                                          tools:context="com.example.myapp.Fragment"                                          android:id="@+id/constraintLayout"> <android.support.v7.widget.CardView     android:id="@+id/current_card"     android:layout_width="73dp"     android:layout_height="89dp"     app:cardBackgroundColor="#E917BC"     app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"     android:layout_marginStart="16dp"     app:layout_constraintTop_toTopOf="@+id/constraintLayout"     android:layout_marginTop="16dp">      <TextView         android:id="@+id/current_card_letter"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:textSize="40dp"         android:gravity="center"         android:textColor="#000000"         tools:layout_editor_absoluteX="0dp"         tools:layout_editor_absoluteY="0dp"/>     </android.support.v7.widget.CardView>  <GridView     android:id="@+id/all_cards_grid_view"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:numColumns="auto_fit"     android:columnWidth="60dp"     android:horizontalSpacing="5dp"     android:verticalSpacing="5dp"     android:stretchMode="spacingWidthUniform"     android:background="#30000000"     app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"     android:layout_marginStart="8dp"     app:layout_constraintTop_toBottomOf="@+id/current_card"     android:layout_marginTop="8dp"     app:layout_constraintRight_toRightOf="@+id/constraintLayout"     android:layout_marginEnd="8dp"     app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"     android:layout_marginBottom="8dp"/>  </android.support.constraint.ConstraintLayout> 

getView from the Adapter:

@Override public View getView(final int position, View convertView, ViewGroup parent) {     TextView textView;     if (convertView == null) {         textView = new TextView(mContext);         textView.setPadding(CARD_PADDING, CARD_PADDING, CARD_PADDING, CARD_PADDING);         textView.setLayoutParams(new GridView.LayoutParams(160, 160));         textView.setTextSize(40);         textView.setTextColor(Color.BLACK);         textView.setGravity(Gravity.CENTER);     } else {         textView = (TextView) convertView;     }      textView.setBackgroundResource(getItem(position).getThumbnailID());     textView.setText(getItem(position).getLetter());      return textView; } 

3 Answers

Answers 1

You're wanting columnWidth to be 60dp and by using auto_fit num_columns property the GridView measures column count by that. In your adapter you are then forcing the item size which then doesn't match with the GridView width and number of columns.

Here is one way to calculate the actual columnWidth which will fit. Not 100% sure if the math here is correct, but hopefully this might give you a lead to solve your issue.

If you want items to be rectangle you could be passing the calculated width to the adapter and use that for the view layout param width and height.

Activity:

@Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);      final GridView gv = (GridView) findViewById(R.id.all_cards_grid_view);     gv.post(new Runnable() {         @Override         public void run() {             gv.setColumnWidth((gv.getWidth() - (gv.getNumColumns() * gv.getHorizontalSpacing())                     - gv.getHorizontalSpacing() * 2) / gv.getNumColumns());             gv.setAdapter(new TestAdapter(MainActivity.this));         }     }); }  public class TestAdapter extends BaseAdapter {      private static final int CARD_PADDING = 10;      private Context mContext;      public TestAdapter(Context context) {         mContext = context;     }      @Override     public View getView(final int position, View convertView, ViewGroup parent) {         TextView textView;         if (convertView == null) {             textView = new TextView(mContext);             textView.setPadding(CARD_PADDING, CARD_PADDING, CARD_PADDING, CARD_PADDING);             //textView.setLayoutParams(new GridView.LayoutParams(200, 200));             textView.setTextSize(40);             textView.setTextColor(Color.BLACK);             textView.setBackgroundColor(Color.BLUE);             textView.setGravity(Gravity.CENTER);         } else {             textView = (TextView) convertView;         }          textView.setText("A");          return textView;     }      @Override     public long getItemId(int position) {         return 0;     }      @Override     public boolean hasStableIds() {         return false;     }      @Override     public Object getItem(int position) {         return null;     }      @Override     public int getCount() {         return 20;     } } 

Xml:

<GridView     android:id="@+id/all_cards_grid_view"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingTop="5dp"     android:paddingBottom="5dp"     android:background="#30000000"     android:columnWidth="60dp"     android:numColumns="auto_fit"     android:horizontalSpacing="0dp"     android:stretchMode="spacingWidthUniform"     android:verticalSpacing="5dp"/> 

Answers 2

I can't test this right now but wonder what will happen if you update the GridView with android:stretchMode="columnWidth" property?

Answers 3

Remove android:layout_marginStart and android:layout_marginEnd attributes, and they will stop being pushed outside of bounds.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment