نقدم في هذا المثال طريقة إضافة واجهة البداية (Dashboard) لتصميمك بحيت وضعت ايقونات كبيرة وفي شكل منظم يسهل على المستخدم ولوج باقي معطيات الطبيق.

 
  • الخطوة 1: إضافة هذه الألوان إلى colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#FFC107</color>
    <color name="colorPrimaryDark">#FFA000</color>
    <color name="backgroundcolor">#fcfcfc</color>
    <color name="lightgray">#ededed</color>
    <color name="deeppurple">#7c4dff</color>
    <color name="yello">#ffb300</color>
    <color name="green">#00bfa5</color>
    <color name="colorAccent">#FF4081</color>
    <color name="darkblue">#23283a</color>
    <color name="testcolorblue">#152b38</color>
    <color name="pink">#fe104d</color>

    <color name="black_overlay">#66000000</color>
</resources>
 
  • الخطوة 2: إضافة مكتبة cardview إلى build.raddle
dependencies {
// don t forget to change 25.3.1 to your api lvl mine is 25.3.1
    compile 'com.android.support:cardview-v7:25.3.1'
}
 
  • الخطوة 3:  إنشاء خلفيات دائرية
cerclebackgroundpink.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
</shape>
cerclebackgroundgreen.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/green"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/deeppurple"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/yello"/>
</shape>
  • الخطوة 4:  إنشاء الشكل
buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#dfdfdf" />
    <padding android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp"/>
    <corners android:radius="25dp"/>
</shape>