MacaronLover MacaronLover - 3 years ago 163
Android Question

GridView items clipped and different heights

After creating a GridView, I noticed that some GridView items have a bigger height than others. What needs to be done to ensure that all GridView items are the same height(regardless of screen orientation & different text lengths) + to ensure that GridView content doesn't get clipped?

enter image description here
enter image description here

sw600dp/activity_main.xml

<?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_height="match_parent"
android:layout_width="match_parent"
tools:context=".MainActivity">

<GridView
android:id="@+id/abslistview_main"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:horizontalSpacing="20dp"
android:verticalSpacing="20dp"
android:numColumns="auto_fit"
/>

</RelativeLayout>


sw600dp/item_abslistview.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
android:id="@+id/cardview_mainitem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:background="@drawable/ripple_background"
android:orientation="horizontal">
<ImageView
android:id="@+id/griditem_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />

<TextView
android:id="@+id/griditem_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="@android:color/white"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</android.support.v7.widget.CardView>


MainActivity.java

public class MainActivity extends Activity {

private ArrayList<MainItem> mainArrayList;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

AbsListView absListView = findViewById(R.id.abslistview_main);
settingData();

ArrayAdapter<MainItem> adapter = new AbsListViewAdapter(this, R.layout.item_abslistview, mainArrayList);
absListView.setAdapter(adapter);
}

private void settingData() {
mainArrayList = new ArrayList<>();

mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "Fruit and vegetables"));
mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "Potatoes, bread, rice, pasta and other starchy carbohydrates"));
mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "Oils and spreads"));
mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "Dairy and alternatives"));
mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "Beans, pulses, fish, eggs, mint and other proteins"));
mainArrayList.add(new MainItem(R.drawable.ic_info_outline_white, "More information"));
}
}

Answer Source

Use fixed height instead of wrap_content in the xml of your custom list item.

If you want to show all items of the grid view instead of scrolling behavior, use nested linear layouts with weights, or try some other layouts.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download