Cara menggunakan Desain Material di aplikasi Android Anda

30

Desain material merupakan aspek penting dari UI karena membuat aplikasi menjadi menarik. Kami adalah makhluk visual dan meskipun sebuah aplikasi mungkin memiliki fitur keren, desain yang buruk akan menyebabkan pengguna meninggalkan sebuah aplikasi.

Dalam tutorial ini, kita akan melihat beberapa prinsip desain material yang merupakan kunci desain yang mengagumkan dan pada gilirannya, membuat aplikasi Anda cantik . Kita sudah tahu bagaimana membuat elemen Android yang berbeda berkumpul untuk membuat aplikasi, namun desain material menambah keindahan dan keanggunan aplikasi Anda.

Untuk memulai dengan desain material, kita perlu menerapkan tema desain material. Dalam file gaya Anda, tambahkan kode berikut.

<! - res / values ​​/ styles.xml -> 
< resources > 
 <! - tema Anda mewarisi dari tema materi -> 
 < style  name = "AppTheme"  parent = "android: Theme.Material" > 
 <! -  penyesuaian tema  - >
   </ style > 
</ resources  android: elevation >

Menciptakan permukaan dengan Elevasi

Tata letak desain material harus sesuai dengan pedoman perancangan material. Mari kita lihat bagaimana kita bisa membuat layout untuk App kita. Membuat bayangan dalam desain material dimungkinkan dengan menggunakan elevasi. Untuk mengatur elevasi di permukaan, kita menggunakan atribut elevasi android: seperti yang ditunjukkan di bawah ini. Mari kita buat dua permukaan masing-masing dengan ketinggian yang berbeda.

< FrameLayout  android: layout_width = " match_parent " android: layout_height = " 200dp " android: layout_margin = " 16dp " android: background = "# fff " android: elevation = " 4dp "  
 > 
  
  
  
  
   </ FrameLayout >  
< FrameLayout  android: layout_width = " match_parent " android:layout_height
  
  = " 200dp " android: layout_margin = " 16dp " android: background = "# fff " android: elevasi = " 8dp "  
 > 
  
  
  </ frameLayout >

Di sini kita memiliki dua permukaan berbeda yang menghasilkan bayangan yang berbeda, satu di 4 dp dan yang lainnya pada 8 dp. Semakin tinggi ketinggian, semakin banyak bayangan yang diputar.

Menerapkan Tombol Tindakan Terapung (FAB)

FAB adalah tombol lingkaran berwarna yang mengapung di atas konten Anda yang lain di aplikasi Anda dan merupakan cara untuk mempromosikan tindakan utama. Ini memiliki elevasi terbesar dan dengan demikian mengapung di atas semua konten. FAB memiliki ukuran dan elevasi standar, keduanya memiliki diameter 40 atau 56 dp dan ketinggian 6 dp meskipun bisa naik hingga 12 dp saat ditekan.

Jadi bagaimana kita menerapkan tombol mengambang? Beruntung Android Studio hadir dengan aktivitas Basic yang memiliki elemen FAB built-in seperti yang ditunjukkan di bawah ini. Namun, penting untuk mengetahui bagaimana menerapkannya jika ada aplikasi yang memerlukan peningkatan versi.

Bergantung pada versi Android Studio Anda, tambahkan dependensi berikut ke Build.gradle:

dependensi {
 kompilasi fileTree (dir: 'libs' , sertakan : [ '* .jar' ])
 kompilasi 'com.android.support:appcompat-v7:25.3.1'  
 kompilasi 'com.android.support:design25.3.1'  
 }

Perpustakaan desain memudahkan penerapan desain material. Berikut adalah definisi tombol mengambang yang Anda butuhkan untuk file tata letak kami.

<? 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 " xmlns: tools = " http: // schemas.android.com / tools " android:
     
     
     
     layout_width = " match_parent " android: layout_height = " match_parent " android: fitsSystemWindows = " true " tools: context = " com.example.vaatiesther.fab.MainActivity " >
     
     
     

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

< include  layout = "@ layout / content_main " /> 

< android.support.design.widget.FloatingActionButton  android: id = "@ + id / fab " android: layout_width = " wrap_content " android: layout_height = " wrap_content " android: layout_gravity = " bawah | akhir " android: elevation = " 6dp " android: translationZ = " 16dp " app:fabSize =
     
     
     
     
     
     
     " Biasa " android: layout_margin = "@ dimen / fab_margin " app: srcCompat = "@ android: ditarik / ic_dialog_email " /> 
     
       
</ android.support.design.widget. KoordinatorLayout >

FAB kami memiliki ukuran normal dan ketinggian 6dp. TranslationZ berarti bahwa tombol akan naik ke 12dp saat ditekan. FAB kami akan mengangkat dan menunjukkan riak saat disentuh.

BACA JUGA:  Download SAMSUNG USB Driver v1.5.51.0

Acara Gulir

Scrolling adalah aspek utama desain material lainnya yang tidak dapat diabaikan. Banyak efek bergulir Desain Material Google bergantung pada desain CoordinatorLayout dan ada beberapa cara untuk menerapkannya.

Mari kita lihat bagaimana kita bisa menerapkan WhatsApp seperti efek scrolling yang menggunakan toolbar yang ambruk dan meluas. Pertama, pastikan Anda memiliki ketergantungan berikut di file kelas Anda:  kompilasi ‘com.android.support:design:26.0.0-alpha1’

Kemudian Anda file XML harus seperti sesuatu seperti ini:

< Android.support.v4.widget.DrawerLayout  xmlns: android = " http: // schemas.android.com / apk / res / android " xmlns: app = " http: // schemas.android.com / apk / merespons munculnya auto " android: id = " @ + id / drawer_design_support_layout " android: layout_width = " match_parent " android: layout_height
     
      
     
     
     = " match_parent " >

    < android.support.design.widget.CoordinatorLayout  android: id = "@ + id / rootLayout " android: layout_width = " match_parent " android: layout_height = " match_parent " app: expandedTitleMarginStart = " 60dp " >
         
         
         
         

        < android.support.design.widget.AppBarLayout  android: layout_width = " match_parent " android: layout_height = " 255dp " android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar " >
             
             
             

            < android.support.design.widget.CollapsingToolbarLayout  android: id = "@ + id / collapsing_toolbar " android: layout_width = " match_parent " android: layout_height = " match_parent " app: layout_scrollFlags = " scroll | exitUntilCollapsed " >
                 
                 
                 
                 

                < android.support.v7.widget.Toolbar  android: id = "@ + id / toolbar " android: layout_width = " match_parent " android: layout_height = " attr / actionBarSize " android: background = " attr / colorPrimary " android: minHeight = " attr / actionBarSize " app: layout_collapseMode = " pin
                     
                     
                     
                     
                     
                     " aplikasi: popupTema = " @ style / ThemeOverlay.AppCompat.Light " app: theme = " @ style / ThemeOverlay.AppCompat.Dark.ActionBar " />
                     
                     

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

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

        < android.support.v4.widget.NestedScrollView  android: layout_width = " match_parent " android: layout_height = " match_parent " android: fillViewport = " true " app: layout_behavior = "@ string / appbar_scrolling_view_behavior " >
             
             
             
             

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

                < TextView  android: layout_width = " wrap_content " android: layout_height = " wrap_content " android: layout_marginTop = " 26dp " android: text = " desain Androi Bahan " android: textcolor = "# 666 " /> 
                     
                     
                     
                       
                      
                < TextView  android: layout_width = " wrap_content " android:layout_height =
                     
                     " wrap_content " android: layout_marginTop = " 26dp " android: text = " desain material Androi " android: textColor = " # 666 " /> 
                     
                       
                      
                < TextView android: layout_width = " wrap_content " android: layout_height = " wrap_content " android: layout_marginTop = "# 26dp " android:teks
                     
                     
                     
                     = " desain  material  Androi " android: textColor = "# 666 " />
                     

            </ LinearLayout >  
        </ android.support.v4.widget.NestedScrollView >  
    </ android.support.design.widget.CoordinatorLayout >  
</ android.support.v4.widget.DrawerLayout >

Anda kemudian bisa mengikat elemen UI dari file Java Anda seperti ini:

  kelas        publik MainActivity vs. AppCompatActivity  {
    Toolbar toolbar;
    CollapsingToolbarLayout collapsingToolbarLayout;
    @ Override dilindungi kekosongan onCreate (Bundle savedInstanceState) {
          super .onCreate (savedInstanceState);
         
        setContentView (R.layout.activity_main);
        initInstancesDrawer ();
    }
     void  pribadi initInstancesDrawer ()     {
        toolbar = (Toolbar) findViewById (R.id.toolbar);
        setSupportActionBar (toolbar);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById (R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle ( "Otoritas Android" );
    }
}

Warna dan desain material palet warna

Warna dan bahan desain palet warnaColor bisa membedakan barang, misalnya bisa tahu apakah buahnya matang atau tidak. Hal ini juga dapat digunakan untuk mengarahkan perhatian kita pada sesuatu atau hanya menyiratkan hierarki dan struktur elemen dalam sebuah aplikasi. Desain material mendorong pengembang aplikasi untuk menggunakan penggunaan warna secara sengaja agar aplikasi mudah digunakan. Desain material memberi warna dan palet warna yang membuatnya cepat dan mudah disain UI Anda.

BACA JUGA:  Custom Rom Samsung Galaxy S4 Final Version untuk Evercoss A7T

Warna primer dan sekunder

Warna primer pada dasarnya adalah warna yang paling sering ditampilkan di layar dan komponen Anda. Dianjurkan untuk memilih warna utama yang mewakili merek atau kepribadian Anda. Warna ini dapat digunakan di bilah aplikasi untuk membuat aplikasi Anda dikenali. Anda juga bisa menggunakan nuansa yang berbeda untuk memberikan kontras antar elemen.

Warna sekunder digunakan untuk menyesuaikan bagian UI Anda yang berbeda. Ini adalah warna yang lebih jenuh yang dirancang untuk menarik perhatian pada elemen tertentu, yaitu tombol aksi mengambang atau warna keren.Kedua adalah yang terbaik digunakan untuk:

  • Bidang teks, kursor, dan pilihan teks
  • Tombol, tombol tindakan mengambang, dan teks tombol
  • Bilah kemajuan
  • Kontrol seleksi, tombol, dan slider
  • Tautan
  • Judul

Warna juga bisa digunakan untuk membuat hierarki, Misalnya, bar aplikasi berwarna cerah membuat aplikasi menonjol. Contoh di bawah ini menunjukkan bagaimana menggunakan palet warna dan warna untuk menciptakan kontras antar elemen.

Mari menerapkan aplikasi kami menggunakan palet warna yang disediakan oleh desain material. Hal pertama yang perlu kita tentukan warna yang ingin kita gunakan dalam file warna sebagai berikut:

<?  xml version = "1.0" encoding = "utf-8"  ?>
 < resources >< color name = " colorPrimary " ># 3F51B5</ color >< color name = " colorPrimaryDark " ># 303F9F</ color >< color name = " colorAccent " ># FF4081</ color ><  
        
        

Warna juga bisa digunakan untuk membuat hierarki, Misalnya, bar aplikasi berwarna cerah membuat aplikasi menonjol. Contoh di bawah ini menunjukkan bagaimana menggunakan palet warna dan warna untuk menciptakan kontras antar elemen.

BACA JUGA:  5 Launcher Android Terbaik dan Paling Ringan Terbaru !!!

Mari menerapkan aplikasi

< style  name = " AppTheme " parent = " Theme.AppCompat.Light.DarkActionBar " >    < ! - Sesuaikan tema Anda di sini . - > < item name = " colorPrimary "> @ color / colorPrimary </ item > < item name = " colorPrimaryDark " > @ color / colorPrimaryDark </ item >             
       
     
     
    < item  name = " colorAccent " > @ color / colorAccent </ item >
 </ style >

Dalam file xml, kita mengatur elemen untuk menggunakan warna latar belakang masing-masing. Berikut adalah cara kita mengatur warna latar untuk AppBarLayout

< android.support.design.widget.AppBarLayout  android: layout_height = " 150dp " android: layout_width = " match_parent " android: background = "? colorPrimary "> 
     
     
      
</ android.support.design.widget.AppBarLayout >

Daftar Pelaksana.

Widget RecyclerView digunakan untuk membuat daftar kompleks dengan desain material. Widget pendaur ulang adalah versi yang lebih maju dari ListView tradisional. Widget menggunakan adaptor dan manajer tata letak dan tampilannya seperti ini:

<? xml version = "1.0" encoding = "utf-8" ?> 
 < RelativeLayout  xmlns: android = " http: // schemas.android.com / apk / res / android " xmlns: tools = " skema http: // .android .com / tools " android: id = " @ + id / activity_main " android: layout_width = " match_parent  
      
     
     " Android: layout_height = " match_parent " android: paddingBottom = " @ dimen / activity_vertical_margin " android: paddingLeft = " @ dimen / activity_horizontal_margin " android: paddingRight = " @ dimen / activity_horizontal_margin " android: paddingTop = "@ dimen / activity_vertical_margin" alat: konteks = "
     
     
     
     
      
     com.example.vaatiesther.racycler.MainActivity " >

    < android.support.v7.widget.RecyclerView  android: id = "@ + id / recyclerview1 " android: scrollbars = " vertikal " android: layout_width = " fill_parent " android: layout_height = " fill_parent "  
        /> 
         
         
         
          
</ RelativeLayout >

Begitu kita menambahkan widget, kita pasang layout manager ke adaptor yang digunakan untuk menampilkan data:

 kelas     publik MyActivity meluas Aktivitas {
     private RecyclerView mRecyclerView;
    RecyclerView pribadi. Adaptor mAdapter;
    RecyclerView.LayoutManager mLayoutManager pribadi ;

    @ Override 
    dilindungi kekosongan onCreate (Bundle savedInstanceState)    {
         Super .onCreate (savedInstanceState);
        setContentView (R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById (R.id.recyclerView);
        // gunakan setelan ini untuk meningkatkan kinerja jika Anda tahu bahwa perubahan 
        // dalam konten tidak mengubah ukuran tata letak dari RecyclerView 
        mRecyclerView.setHasFixedSize ( true );
        // gunakan manajer tata letak linier 
        mLayoutManager =LinearLayoutManager baru ( ini );
        mRecyclerView.setLayoutManager (mLayoutManager);
        // tentukan adaptor (lihat juga contoh selanjutnya) 
        mAdapter = new MyAdapter (myDataset);
        mRecyclerView.setAdapter (mAdapter);
    }
    ...
}

Bungkus

Pedoman di atas hanya merupakan awal dari informasi yang tersedia bagi pengembang aplikasi. Untuk informasi lebih lanjut, kunjungi dokumentasi desain material

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here