Customization of GridView like in the image

user_7934919 0
Viewed 144

Please help me in customizing like in the imageenter image description here

Below is my grid_mainborders.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="true"
        android:drawable="@drawable/grid_two_borderselected"
        /> <!-- focused -->
    <item  android:state_focused="false"
        android:drawable="@drawable/grid_two_bordernormal"/>

    </selector>

Below is my grid_two_borderselected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_blue_light" />
    <padding android:left="7dp" android:top="7dp"
        android:right="7dp" android:bottom="7dp" />
    <corners android:radius="3dp" />
</shape>

Below is my grid_two_bordernormal.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />
    <padding android:left="7dp" android:top="7dp"
        android:right="7dp" android:bottom="7dp" />
    <corners android:radius="3dp" />
</shape>

Below is my GridView Item file

<?xml version="1.0" encoding="utf-8"?>


<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="2dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="2dp"
    android:background="@drawable/grid_mainborders">



<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cardViewGridLangsItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/grid_mainborders">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="10dp">

        <TextView
            android:id="@+id/tvMaintext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="English"
            android:textSize="26sp"
            android:padding="5dp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/tvSubText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="English"
            android:textSize="20sp"
            android:padding="5dp"/>

        <TextView
            android:id="@+id/tvAlphabet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="E"
            android:textSize="38sp"
            android:padding="5dp"/>


    </LinearLayout>


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

I am using gridview with base adapter, I have tried with few links but almost background is changing not with the corners. Please help me on this Thanks in advance

grid android xml
3 Answers

You need to create shape something like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="true"
        android:drawable="@drawable/boardersshape"
        /> <!-- focused -->
    <item  android:state_focused="false"
        android:drawable="@drawable/boarder"/>

</selector>

boardersshape codes:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="2dp"
        android:color="@color/homebackground" />
    <corners android:radius="5dp" />
</shape>

boarder codes:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="2dp"
        android:color="@color/silver" />
    <corners android:radius="5dp" />
</shape>
Admin1

First of all, I am not the coding police, but maybe have a look in newer versions/replacements of your components, if you have free time. They will save you a ton of time.
Like Recylcerview or GridLayoutManager

Anyway. You were almost there. Use following code for your griditem.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/apk/res-auto"
    android:id="@+id/cardViewGridLangsItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="3dp"
    card_view:cardElevation="5dp">

    <FrameLayout
        android:id="@+id/flBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/selectable_background">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            card_view:cardCornerRadius="3dp"
            card_view:cardElevation="0.4dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tvMaintext"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="English"
                    android:textSize="26sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tvSubText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="English"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/tvAlphabet"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="E"
                    android:textSize="38sp" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </FrameLayout>
</android.support.v7.widget.CardView>

And add a new selectable_background.xml in your res/drawable folder with following code:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" android:state_selected="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

You can now set your selection via your adapter. But, as I already said, try to use newer components.

result

user_7734800

This might help you:

<?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/apk/res-auto"
    android:id="@+id/cardViewGridLangsItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="3dp"
    card_view:cardElevation="5dp">

    <FrameLayout
        android:id="@+id/flBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/selectable_background">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            card_view:cardCornerRadius="3dp"
            card_view:cardElevation="0.4dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tvMaintext"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="English"
                    android:textSize="26sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tvSubText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="English"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/tvAlphabet"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="E"
                    android:textSize="38sp" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </FrameLayout>
</android.support.v7.widget.CardView>
user_140516930
Related