"Enter"a basıp içeriğe geçin

Toolbar Oluşturma ve Kullanma – Android

Merhabalar. Bu derste Toolbarı oluşturmayı ve kullanmayı göstereceğim.

1) İlk adım olarak styles.xml dosyasına gelelim ve DarkActionBar yazan kısımı NoActionBar olarak değiştirelim.

2) layout klasörü içerisinde toolbar adında bir xml dosyası ekleyelim. RelativeLayout‘un boyutlarını width=”match_parent”, height=”wrap_content” olarak ayarlayalım. İçerisine toolbar ekleyelim. Toolbar’ın boyutlarını da aynı şekilde match_parent ve wrap_content olarak ayarlayalım. id değerini toolbar yapalım.

Boyut olarak ActionBar’ın boyutlarında olmasını istediğim için minHeight karşısına ?attr/actionBarSize ekliyorum. Theme değerini ise tasarımın açık renk mi yoksa kapalı mı olacağını belirtiyoruz. Tasarımda açık renkler kullanacağım için @style/ThemeOverlay.AppCompat.Light seçeceğim. Böylelikle yazı renkleri ile uğraşmayacağım. Kendisi bana kullandığım açık renge uygun bir yazı rengi seçecek.

Toolbar ile gelen derinlik (elevation) ekleme özelliği toolbar altına derinlik hissi yaratıyor. Bunun değerini 20dp olarak seçiyorum.

Background ile arkaplan rengi belirleniyor.

3) Toolbarı kullanacağım sınıfın xml dosyasına geliyorum. Toolbar’ı kullanmak istediğim yere include ediyorum.

4) Toolbarı kullanacağım sınıfa geliyorum ve toolbarı tanımlıyorum. Kütüphaneyi eklerken 2 tane seçenek çıkıyor. v7 olanı seçerseniz 5.0’dan eski sürümlerde çalışmasını sağlayabilirsiniz. Gerisini kod üzerinde anlatacağım.

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

        /* Toolbarı tanımlıyorum. Kütüphaneyi eklerken v7 yazanı seçersem 5.0 öncesi sürümlerde çalışmasını sağlamış oluyorum. */
        Toolbar toolbar = findViewById(R.id.toolbar);
        // Toolbar üzerinde yazacak yazıyı belirliyorum.
        toolbar.setTitle("Toolbar Başlık Yazısı");
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        android:background="#007bff"/>

</RelativeLayout>
Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.