التعرف على لغة التصميم الجديدة على الاندرويد material design 2

09 August

Android design JaKo

اذا كنت تستعمل اندرويد ستوديو 3.1 فغالبا لن تستطيع معاينة الذزاين على البرنامج بل على الهاتف او emulator . مرحبا قبل ايام قليلة ثم الاعلان عن الماتريل دزاين 2 من جوجل و الذي سيكون جاهزا الى جانب اندرويد Pie في المستقبل القريب هو في نسخة البيتا و نتظر النسخة المستقرة الان اخر التغييرات الكبيرة التي راينها على اندرويد كانت في اندرويد 21 لوليبوب و بعد سبع اصدارات ثم تغيير الكثير و ايضا اضافة الكثير و ذلك ما ساسولف عنه اليوم باذن الله .

1- الموقع الرسمي :
منذ ان خرجت الماتريل دزاين الى حيز الوجود ثم تحديث الموقع الرسمي و هذا يجعلني سعيدا فقبل ذلك كانوا يعطونك تعليمات فقط اما الان فقد ثم اضافة اكواد xml ، خبر رائع اليس كذلك فتلك التعليمات المملة لا استطيع تطبيقاها على اي حال . لا ننسى انه ثم التركيز على كل المنصات من Android Web IOS Flutter .

2- عناصر جديدة :
ثم اضافة عناصر جديدة و التعديل على العناصر القديمة لتناسب الوضع الحالي و الاكثر جدبا لانتباه هو bottom-app-bar و ايضا طريقة ظهور float-action-bar عليه :

عموما هذا الشكل ليس جذابا بالنسبة لي لكن ما يروقوني فيه هو الشكل الجديد و المختلف .
3-الربط مع المشروع :
اضف التالى الى ملف

build.gradle(app)

Groovy

    implementation 'com.android.support:design:28.0.0-beta01'
    implementation 'com.android.support:appcompat-v7:28.0.0-beta01'
    implementation 'com.android.support:support-v4:28.0.0-beta01'

4-استكشاف :
√الازار-material Button
عنصر جديد موروث من AppCompatButton لكن مع خصائص جديدة و اقل ما يقال عنها انها رائعة و كنت اظطر الى انشاء عناصر مخصصة لاشياء بسيطة تبا .
يمكنك اضافة هذا الزر الى الواجهة هكذا :

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="my MATERIAL BUTTON"/>

-اضافة ايقونة :
- XML
```
app:icon="@drawable/ic_add"
```
لون الايقونة
- XML
```
app:iconTint="#ac5353"
```
الحشوة او padding :
- XML
```
app:iconPadding="20dp"
```
تغيير الخلفية و لون التاتير عند الضغط
- XML
```
app:backgroundTint="#ac5353"
```

اضافة اطار :

app:strokeWidth="2dp"
app:strokeColor="#ac5"

الزويا :
- XML
```
app:cornerRadius="10dp"
```

√الشريط السفلي :
لطالما استعملنا actionbar في الاعلى لكن ماذا ان استعملناه في الاسفل سيكون بالطبع غريبا لكنه شيء مختلف كليا و فريد .

<android.support.design.widget.CoordinatorLayout
    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">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

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

ساقوم بنشر تدوينة منفصلة عن الشريط السفلي في قادم الايام لهذا لن نحتاج لاتحدث عنها اكثر .
بالنسبة ل events :

KOTLIN
JAVA

bar.replaceMenu(R.menu.main)
bar.setNavigationOnClickListener{
   
}

bar.setOnMenuItemClickListener {
 when(it.itemId){
    
 }
 true
}

BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar);
bar.replaceMenu(R.menu.main);

bar.setNavigationOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle the navigation click by showing a BottomDrawer etc.
    }
});

bar.setOnMenuItemClickListener(new OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        // Handle actions based on the menu item
        return true;
    }
});

√cardView

<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/mtrl_card_spacing"
    android:layout_marginTop="@dimen/mtrl_card_spacing"
    android:layout_marginRight="@dimen/mtrl_card_spacing"
    android:minHeight="200dp">

  <!-- children. -->

</com.google.android.material.card.MaterialCardView>

لا جديد الا فيما يخص الاطار app:strokeColor و app:strokeWidth .

√chips :
لا لا ، لا اتحدث عن رقائق البطاطا بل عن هذه الموجودة في الاسفل غالبا ما تستعمل لتحديد مناطق اشخاص معينين .

app:chipIcon -> يستعمل لاضافة ايقونة قبل Text .
app:checkable -> يستعمل لجعل العنصر قابل للتحديد .
app:closeIconEnabled -> يستعمل لجعل العنصر قابل للحذف .
app:closeIcon -> يستعمل لتغيير ايقونة الاغلاق الاصلية .

<android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="icon"
            android:checkable="true"
            app:chipIcon="@drawable/ic_add"/>

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="checkable"
            android:checkable="true"/>
        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="closable"
            app:closeIconEnabled="true"/>

    </android.support.design.chip.ChipGroup>

بالنسبة ل events :

KOTLIN
JAVA

chip.setOnCheckedChangeListener { button, checked ->
     //ينفد عند التحديد
  }
chip.setOnCloseIconClickListener {
      //ينفذ عند الاغلاق
  }

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton view, boolean isChecked) {
        // ينفد عند التحديد
    }
});

chip.setOnCloseIconClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // ينفذ عند الاغلاق
    }
});

و السلام على من اتبع الهدى

هل ترغب في مثل هذه التدوينات

جوجل توتير

فايسبوك

اسماعيل ايت بلا

ببساطة ارغب في تجربة جديدة من التعلم من خلال مشاركة ما تعلمه يجبرني ذلك على البحث لمدة طويلة مما يجعل الموقع جديرا بالثقة

تابعني

android bella: التعرف على لغة التصميم الجديدة على الاندرويد material design 2

ادعمنا عن طريق مشاركة التدوينة التي اعجبتك