Andorid Studio Material Design

0
325
views
materialDes
materialDes

Merhaba arkadaşlar yeni yazım Android Studio Material Design hakkında. Material Design hakkında ufak bir bilgi verip bir uygulama yapacağım. Keyifli okumalar.

Nedir bu Material Design. Material Design, Android’in alıştığımız görüntüsünden büyük farklılıklara sahip. Yeni tasarımın çözmek istediği sorunlardan biri, uygulamalar arasında tutarlı bir düzen sunmak. Bu düzenden kasıt, bir uygulamadan diğerine geçiş yaptığınız zaman adeta farklı bir yere geçiş yapmış gibi oluyordunuz ve bu diğer uygulama öncekinden çok farklı olduğu için bir alışma sürecine girmiş oluyordunuz. Material Design, Google’ın sözleriyle “bir durumdan diğerine sorunsuz olarak geçmek üzere bir iskelet sunuyor”. İşte bunun sayesinde arayüz içerisinde daha hızlı dolaşabiliyor hem de bir öğeye dokunduğunuzda karşınıza ne çıkabilecek tahmin edebiliyorsunuz. Bunun sayesinde uygulamaların kullanımları daha kolay hale gelmiş durumda. Ayrıca yeni çıkan uygulamalarda hem göze hitap hem kolay kullanımı sayesinde Material Design önemli bir yere sahip.

İsterseniz bu Material Design örneğimize geçelim. Ayrıca yapmış olduğum örneğe GitHub hesabımdan ulaşabilirsiniz.

Şimdi yapacağımız şeyi göstermek istiyorum.

Evet böyle bir uygulama yapacağız. Siz içini istediğiniz gibi değiştirebilirsiniz. WebView kullanarak gazete uygulaması yapabilirsiniz. Sizin hayal gücünüze kalmış bir şey.

Evet gelelim kodlarımıza.

Öncelikle projemizin Gradle bölmünde dependencies içine

compile 'com.android.support:design:25.2.0'

ekliyoruz.

Dilerseniz ilk önce layoutu ayarlayalım.

Activity_main

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottoms"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:itemBackground="?attr/colorPrimary"
        app:itemIconTint="@drawable/bottombar_item"
        app:itemTextColor="@drawable/bottombar_text"
        app:menu="@menu/bottombar_menu"/>

</FrameLayout>

Burada FrameLayout olan yer Fragmentlarımızı açtığımız alan. Yani butona dokunma olayı sonucunda o butonla ilgili olan layout burada çıkacak karşımıza.

Aşağıdaki menüde hangi butonlar olacak?

res>menü yolunu izleyip yeni bir menü oluşturalım.


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/btn_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Ana Sayfa"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/btn_blog"
        android:icon="@drawable/blog"
        android:title="Blog"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/btn_aboutus"
        android:icon="@drawable/aboutus"
        android:title="Hakkımızda"
        app:showAsAction="ifRoom"/>
</menu>

 

Buradaki icon larımızı Buradaki linkten sizde dilediğinizi indirebilirsiniz.

Butonlarımızda hazır olduğuna göre şimdi ana kodumuza dönebiliriz.

MainActivity classımıza gelelim.

Öncelikle

private static final String TAG_FRAGMENT_HOME = &amp;amp;quot;tag_frag_home&amp;amp;quot;;
private static final String TAG_FRAGMENT_ABOUTUS = &amp;amp;quot;tag_frag_aboutus&amp;amp;quot;;

private BottomNavigationView bottomNavigationView;

private List&amp;amp;lt;homePage&amp;amp;gt; fragmentsHome = new ArrayList&amp;amp;lt;&amp;amp;gt;(1);
private List&amp;amp;lt;aboutusPage&amp;amp;gt; fragmentsAbout = new ArrayList&amp;amp;lt;&amp;amp;gt;(1);

Bunları yapıyoruz. BottomNavigationView bizim alt menümüz için geçerli olan classımız. homePage ve aboutusPage olmak üzere iki adet fragment oluşturalım. Ve bunları arraylist için tanımlayalım. Neden yaptığımızı az sonra anlayacaksınız.

onCreate içinde şu işlemleri yapıyoruz.

bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottoms);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.btn_home:
                        switchFragment(0, TAG_FRAGMENT_HOME);
                        return true;
                    case R.id.btn_blog:
                        Snackbar.make(findViewById(android.R.id.content), &amp;amp;quot;Snackbar Deneme&amp;amp;quot;, Snackbar.LENGTH_LONG)
                                .show();
                        return true;
                    case R.id.btn_aboutus:
                        switchFragment3(0, TAG_FRAGMENT_ABOUTUS);
                        return true;
                    }
                return false;
            }
        });

buildFragmentsList();

switchFragment(0, TAG_FRAGMENT_HOME);

bottomNavigationView de butonlarımızı için activity_main de bulunan widgetı çağırıyoruz. Ve bu widget içerisinde butonlara dokunma durumunun dinlenmesini yapıyor switch case kullanarak hangi butona tıklanırsa o eylemi gerçekleştiriyoruz.

Ayrıca burada özellikle blog butonuna basınca SnackBar kullandım. SnackBar Material Design ile gelmiş olup Toast gibi çalışır fakat ekstra olarak SnackBar içinede buton eklemek mümkün. Bundan da ilerde bahsedebiliriz.

En altta bulunan

switchFragment(0, TAG_FRAGMENT_HOME);

kodu ile uygulama ilk açıldığında karşımıza çıkacak olan fragmentı belirliyoruz.

private void buildFragmentsList() {
    homePage homeScreen = buildHome();
    aboutusPage aboutScreen = buildAboutus();

    fragmentsHome.add(homeScreen);
    fragmentsAbout.add(aboutScreen);
}

bu method içerisine uygulamamız içerisinde butonlara dokunma sonrası kullanacak olduğumuz classlarımızı ekliyoruz.

private void switchFragment(int pos, String tag) {
    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment, fragmentsHome.get(pos), tag)
            .commit();
}

private void switchFragment3(int pos, String tag) {
    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment, fragmentsAbout.get(pos), tag)
            .commit();
}

switchFragment methodlarını fragmentlar arası geçiş için kullanıyoruz.

Sizlere Material Design hakkında ufak bir bilgi vermeye çalıştım. Herhangi bir sorunuz olursa sormaktan çekinmeyiniz. Hayırlı günler dilerim.

CEVAP VER

Please enter your comment!
Please enter your name here