Tutorial Membuat Aplikasi Pengenalan Huruf Hijaiyah dengan Android Studio

Aplikasi Pengenalan Huruf Hijaiyah

Halo sobat 48😁 kali ini saya akan membagikan sebuah artikel yang membahas Tutorial Membuat Aplikasi Pengenalan Huruf Hijaiyah dengan Android Studio. Tutorial ini saya buat untuk menambah koleksi source di Github saya. Karena sudah cukup lama saya tidak membuatkan tutorial menggunakan Android Studio.

Disini saya akan membuatkan Tutorial Membuat Aplikasi Pengenalan Huruf Hijaiyah tersebut sambil kalian pahami juga source code yang saya buat. Jika kalian ingin SOURCE CODE aplikasi Pengenalan Huruf Hijaiyah ini, silahkan download di Github saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai😄

Jika kalian ingin mencoba membuat aplikasi ini dengan tutorial versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya.

2. Tambahkan beberapa library ke build.gradle menjadi seperti ini :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:gridlayout-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

2. Ubah AndroidManifest.xml menjadi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.azhar.hurufhijaiyyah">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

3. Buat MainActivity.java  :

package com.azhar.hurufhijaiyyah;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.azhar.hurufhijaiyyah.adapter.HijaiyyahAdapter;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        setTitle("Huruf Hijaiyyah");

        viewPager = (ViewPager) findViewById(R.id.container);
        viewPager.setAdapter(new HijaiyyahAdapter(getSupportFragmentManager()));
        viewPager.setOffscreenPageLimit(4);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }
}

4. Buat activity_main.xml  :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="?colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:scrollbars="horizontal"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabTextColor="@color/semiwhite"
            app:tabSelectedTextColor="@color/white"
            app:tabIndicatorColor="@color/white"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

/code>

5. Buat FragmentDhomah.java  :

package com.azhar.hurufhijaiyyah.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.azhar.hurufhijaiyyah.R;

public class FragmentDhomah extends Fragment {
    public FragmentDhomah(){

    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_dhomah, container, false);

        return view;
    }
}

6. Buat fragment_dhomah.xml  :

<LinearLayout 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"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5">

        <ImageView
            android:id="@+id/huruf"
            android:layout_width="700dp"
            android:layout_height="200dp"
            android:src="@drawable/dhommah" />

    </RelativeLayout>

    <android.support.v7.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="8"
        android:background="@drawable/grid_item_corner"
        android:padding="10dp"
        android:paddingTop="5dp"
        app:alignmentMode="alignMargins"
        app:columnCount="5"
        app:columnOrderPreserved="false"
        app:rowCount="6">
        <!--1-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="جُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ju"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--2-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ثُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tsu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--3-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="تُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--4-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="بُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="bu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--5-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="اُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="u"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--6-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="رُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ru"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--7-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ذُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dzu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--8-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="دُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="du"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--9-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="خُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="khu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--10-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="حُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="hu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--11-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ضُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dhu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--12-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="صُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="sha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--13-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="شُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="syu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--14-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="سُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="su"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--15-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="زُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--16-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="فُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="fu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--17-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="غُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ghu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--18-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="عُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="'u"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--19-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ظُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zhu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--20-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="طُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="thu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--21-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="نُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="nu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--22-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="مُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="mu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--23-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="lu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--24-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="كُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ku"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--25-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="قُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="qu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--26-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="يُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="yu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--27-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ءُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="u"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--28-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لُا"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="lu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--29-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="هُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="hu"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--30-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="وُ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="wu"
                    android:textAlignment="center"
                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />

            </LinearLayout>

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

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

</LinearLayout>

7. Buat FragmentFathah.java  :

package com.azhar.hurufhijaiyyah.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.azhar.hurufhijaiyyah.R;

public class FragmentFathah extends Fragment {
    public FragmentFathah(){

    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_fathah, container, false);

        return view;
    }
}

8. Buat fragment_fathah.xml  :

<LinearLayout 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"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5">

        <ImageView
            android:id="@+id/huruf"
            android:layout_width="700dp"
            android:layout_height="200dp"
            android:src="@drawable/fathah" />

    </RelativeLayout>

    <android.support.v7.widget.GridLayout
        android:id="@+id/gridHijaiyahFathah"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="8"
        android:background="@drawable/grid_item_corner"
        android:padding="10dp"
        android:paddingTop="5dp"
        app:alignmentMode="alignMargins"
        app:columnCount="5"
        app:columnOrderPreserved="false"
        app:rowCount="6">
        <!--1-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="جَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ja"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--2-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ثَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tsa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--3-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="تَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ta"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--4-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="بَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ba"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--5-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="اَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="a"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--6-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="رَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ra"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--7-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ذَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dza"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--8-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="دَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="da"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--9-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="خَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="kha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--10-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="حَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--11-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ضَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--12-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="صَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="sha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--13-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="شَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="sya"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--14-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="سَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="sa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--15-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="زَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="za"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--16-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="فَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="fa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--17-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="غَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="gha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--18-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="عَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="'a"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--19-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ظَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--20-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="طَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--21-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="نَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="na"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--22-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="مَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ma"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--23-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="la"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--24-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="كَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ka"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--25-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="قَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="qa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--26-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="يَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ya"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--27-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ءَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="a"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--28-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لَا"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="la"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--29-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="هَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--30-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="وَ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="wa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>


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

</LinearLayout>

9. Buat FragmentHijaiyyah.java  :

package com.azhar.hurufhijaiyyah.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.azhar.hurufhijaiyyah.R;

public class FragmentHijaiyyah extends Fragment {

    public FragmentHijaiyyah(){

    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_hijaiyyah, container, false);

        return view;
    }
}

10. Buat fragment_hijaiyyah.xml  :

<LinearLayout 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"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5">

        <ImageView
            android:id="@+id/huruf"
            android:layout_width="700dp"
            android:layout_height="200dp"
            android:src="@drawable/hurufix" />

    </RelativeLayout>

    <android.support.v7.widget.GridLayout
        android:id="@+id/hijaiyahGrid"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="8"
        android:background="@drawable/grid_item_corner"
        android:padding="10dp"
        android:paddingTop="5dp"
        app:alignmentMode="alignMargins"
        app:columnCount="5"
        app:columnOrderPreserved="false"
        app:rowCount="6">
        <!--1-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ج"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="jim"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--2-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ث"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tsa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--3-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ت"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ta"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--4-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ب"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ba"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--5-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ا"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="alif"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--6-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ر"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ro"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--7-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ذ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dzal"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--8-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="د"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dal"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--9-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="خ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="kha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--10-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ح"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--11-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ض"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dhad"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--12-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ص"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="shad"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--13-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ش"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="syin"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--14-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="س"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="sin"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--15-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ز"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zal"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--16-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ف"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="fa"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--17-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="غ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ghain"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--18-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ع"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="'ain"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--19-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ظ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--20-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ط"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--21-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ن"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="nun"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--22-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="م"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="mim"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--23-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ل"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="lam"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--24-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ك"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="kaf"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--25-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ق"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="qaf"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--26-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ي"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ya"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--27-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ء"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="hamzah"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="10sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--28-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لا"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="lam alif"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="10sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--29-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ه"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ha"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
        <!--30-->
        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="و"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="wau"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

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

</LinearLayout>

11. Buat FragmentKasrah.java  :

package com.azhar.hurufhijaiyyah.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.azhar.hurufhijaiyyah.R;

public class FragmentKasrah extends Fragment {
    public FragmentKasrah(){

    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_kasrah, container, false);

        return view;
    }
}

12. Buat fragment_kasrah.xml  :

<LinearLayout 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"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5">

        <ImageView
            android:id="@+id/huruf"
            android:layout_width="700dp"
            android:layout_height="200dp"
            android:src="@drawable/kasroh" />

    </RelativeLayout>

    <android.support.v7.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="8"
        android:background="@drawable/grid_item_corner"
        android:padding="10dp"
        android:paddingTop="5dp"
        app:alignmentMode="alignMargins"
        app:columnCount="5"
        app:columnOrderPreserved="false"
        app:rowCount="6">

        <!--1-->

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="جِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ji"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ثِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="tsi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="تِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ti"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="بِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="bi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="اِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="i"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="رِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ri"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ذِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dzi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="دِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="di"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="خِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="khi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="حِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="hi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ضِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="dhi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="صِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft7"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft7"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="shi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="شِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="syi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="سِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="si"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="زِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="فِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="fi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="غِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ghi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="عِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="i'"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ظِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="zhi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="طِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="thi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>


        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="نِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ni"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="مِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft3"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft3"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="mi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="li"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="كِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="ki"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="قِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="qi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>


        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="يِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft2"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft2"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="yi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="ءِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft1"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft1"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="i"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="لِا"
                    android:textAlignment="center"
                    android:textColor="@color/soft4"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft4"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="lii"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="هِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft6"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft6"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="hi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:background="@android:color/transparent"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:text="وِ"
                    android:textAlignment="center"
                    android:textColor="@color/soft5"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/soft5"
                    android:fontFamily="serif"
                    android:radius="50dp"
                    android:text="wi"
                    android:textAlignment="center"

                    android:textColor="@android:color/white"
                    android:textSize="15sp"
                    android:textStyle="bold|italic" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

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

</LinearLayout>

13. Yang terakhir buat HijaiyyahAdapter.java  untuk memanggil semua Fragment yang sudah kita buat tadi ke MainActivity.java :

package com.azhar.hurufhijaiyyah.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import com.azhar.hurufhijaiyyah.fragment.FragmentDhomah;
import com.azhar.hurufhijaiyyah.fragment.FragmentFathah;
import com.azhar.hurufhijaiyyah.fragment.FragmentHijaiyyah;
import com.azhar.hurufhijaiyyah.fragment.FragmentKasrah;

public class HijaiyyahAdapter extends FragmentStatePagerAdapter {
    public HijaiyyahAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

        Fragment frag = null;
        switch (position) {
            case 0:
                frag = new FragmentHijaiyyah();
                break;
            case 1:
                frag = new FragmentDhomah();
                break;
            case 2:
                frag = new FragmentKasrah();
                break;
            case 3:
                frag = new FragmentFathah();
                break;
        }
        return frag;
    }

    @Override
    public int getCount() {
        return 4;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        String title = " ";
        switch (position) {
            case 0:
                title = "Huruf Hijaiyyah";
                break;
            case 1:
                title = "Huruf Hijaiyyah Dhomah";
                break;
            case 2:
                title = "Huruf Hijaiyyah Kasrah";
                break;
            case 3:
                title = "Huruf Hijaiyyah Fathah";
                break;
        }

        return title;
    }
}

14. Selesai dan kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Pengenalan Huruf Hijaiyah dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_