elevation is not showing in GridView for material desgin

Question

I had a GridView in which I want to show grid items with some elevation applied on them. I tried solution from this thread here but elevation is not shown while at runtime. The elevation is shown in preview builder.

My codes are

fragment_grid.xml

<RelativeLayout
    android:layout_width="150dp"
    android:layout_height="200dp"
    android:background="@drawable/grid_border"
    android:elevation="15dp"
    android:gravity="center"
    android:padding="4dp">

    <ImageView
        android:id="@+id/backgroundImg"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/image_border"
        android:elevation="1dp"
        android:src="@drawable/icon" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:padding="2dp">

        <LinearLayout
            android:layout_width="130dp"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:orientation="vertical"
            android:padding="1dp">

            <TextView
                android:id="@+id/nameTV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:text="Name"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/descriptionTV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:text="Description" />

        </LinearLayout>

        <ImageButton
            android:id="@+id/moreBtn"
            style="?android:attr/actionOverflowButtonStyle"
            android:layout_width="20dp"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="4dp"
            android:foregroundGravity="center" />

    </RelativeLayout>
</RelativeLayout>

fragment_gird_activity.xml | This code is in RelativeLayout with android:gravity as center

<GridView
    android:id="@+id/fragmentGridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="150dp"
    android:gravity="center"
    android:horizontalSpacing="5dp"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:verticalSpacing="10dp" />

GridAvtivity.java, it extends AppCompatActivity

private GridView fragmentGridView;
private DetailsBox adapter;
private final ArrayList<Details> details = new ArrayList<>();

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

    fragmentGridView = (GridView) findViewById(R.id.fragment_gird_activity);
    fillupData();
    adapter = new DetailsBox(getApplicationContext());
    fragmentGridView.setAdapter(adapter);
}

class DetailsBox extends ArrayAdapter<Details> {

    private Context ctx;

    public DetailsBox(@NonNull Context context) {
        super(context, R.layout.fragment_grid, details);
        this.ctx = context;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View newView = inflater.inflate(R.layout.fragment_grid, parent, false);
        Details detail = details.get(position);
        ((TextView) newView.findViewById(R.id.nameTV)).setText(detail.getName());
        ((TextView) newView.findViewById(R.id.descriptionTV)).setText(detail.getDescription());
        return newView;
    }
}


private void fillupData() {
    details.add(new Details("Name 1", "Description 1"));
    details.add(new Details("Name 2", "Description 2"));
    details.add(new Details("Name 3", "Description 3"));
    details.add(new Details("Name 4", "Description 4"));
    details.add(new Details("Name 5", "Description 5"));
    details.add(new Details("Name 6", "Description 6"));
    details.add(new Details("Name 7", "Description 7"));
    details.add(new Details("Name 8", "Description 8"));
    details.add(new Details("Name 9", "Description 9"));
    details.add(new Details("Name 10", "Description 10"));
    details.add(new Details("Name 11", "Description 11"));
    details.add(new Details("Name 12", "Description 12"));
    details.add(new Details("Name 13", "Description 13"));
    details.add(new Details("Name 14", "Description 14"));
    details.add(new Details("Name 15", "Description 15"));
    details.add(new Details("Name 16", "Description 16"));
    details.add(new Details("Name 17", "Description 17"));
    details.add(new Details("Name 18", "Description 18"));
    details.add(new Details("Name 19", "Description 19"));
    details.add(new Details("Name 20", "Description 20"));
}

image_border.xml

grid_border.xml

Following produces this result in preview window

and in runtime, this produces following result

Please help, I tried solutions form other threads but not able to add elevation at runtime.

just add some margin to the grid elements – Mihai Dec 25 '17 at 14:42 — Mihai, Dec 25 '17 at 14:42

score 2 · Accepted Answer · answered Dec 25 '17 at 14:41

Simple solution - wrap your row layout to cardView

<android.support.v7.widget.CardView
    android:id="@+id/vCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/_6sdp"
    android:clipChildren="false"
    app:cardBackgroundColor="@android:color/white"
    app:cardElevation="6dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="false">

    <!-- Your row layout codes -->

 </android.support.v7.widget.CardView>

Thanks @Wizard. this helped me. – Chirag Dec 25 '17 at 15:24 — Chirag, Dec 25 '17 at 15:24

elevation is not showing in GridView for material desgin

1 Answers1