Android Studio Programında LinearLayout İle Hesap Makinesi Tasarımını Yapma

Neredeyse tüm platformlarda hesap makinesi bir şekilde kullanılmaktadır. Bu uygulamamızda hesap makinesinin tasarımını activity_main.xml sayfasında LinearLayout nesnesini kullanarak gerçekleştireceğiz. Tasarım ekranımız aşağıdaki gibi olacaktır.

Tasarım ekranını inceleyelim. Burada butonlar yan yana ve alt alta sıralanmışlar. LinearLayout nesnesi, içinde bulundurduğu nesneleri satır bazında sıraladığı için en az satırı dikkate almamız gerekir. Buna göre tasarım ekranında butonlar 3 satırda listelenmektedir. Butonların genişliklerini ve yüksekliklerini belirlememiz gerekiyor. Sil butonuyla birlikte 1 ile 9 arasındaki rakamları ve +, -, x ve / işlemleri için kullanılan butonları aynı boyutta yapabiliriz. Genişlik için 80dp, yükseklilk için 80dp yapalım. Bu arada butonlar arasında boşluklar yer almakta. Bunun için 5dp yeterli olacaktır. Sonucun görüntülendiği ve içinde 0 yazan kutunun yüksekliği 80px olacaktır. Genişliği ise 80 + 5 + 80 + 5 + 80 = 250dp olacaktır. = butonunun genişliği 80px, yüksekliği ise 80 + 80 + 80 + 80 = 320dp olacaktır. Peki 0 sayısının olduğu butonun genişlik ve yükseklikliği ne olacaktır. Yüksekliği 80px, genişliği ise 80 + 5 + 80 + 5 + 80 = 250dp olacaktır. Nasıl, bayağı kafa yorduk değil mi? Mantığı anladık herhalde.

Hesaplama işlemi bittiğine göre projenin tasarımını yapmaya geçebiliriz.

Android Studio programını çalıştıralım.

New project diyerek yeni proje oluşturalım.

Ekrana gelen ortam seçeneklerinden Phone and Tablet seçelim. Bu ortamda listelenen şablonlardan Empty Activty seçelim. Next diyerek devam edelim.

Proje ismini CalculaterMobil olarak belirleyelim. Dil olarak java seçelim. Finish diyerek projeyi oluşturalım.

Öncelikle projeyi bu haliyle çalıştıralım. Ben çalıştırmak için klavyeden Shift + F10 tuşuna bastım. Bunu yaparak projenin hatasız bir şekilde oluşturulup oluşturulmadığını kontrol etmiş oluyorum. Ayrıca projede hernhangi bir kod yazmadan emülatörün doğru yüklenip yüklenmediğini kontrol ediyorum. Emülatör bir defaya mahsus yüklendikten sonra proje bitinceye kadar bir daha kapatmayacağız..

Öncelikle tasarım ekranının başlığını belirleyelim. Bunun için res klasörünü açıyorum. Buradan values klasörünün içine giriyorum. Ekranın başlığının saklandığı string.xml dosyasını açıyorum.

<resources>
    <string name="app_name">CalculatorMobil</string>
</resources>

Ekran başlığı varsayılan olarak proje adıyla aynı. Ben bu ismi Hesap Makinesi olarak değiştiriyorum. Projeyi kaydedip çalıştıralım. 

Şimdi res klasörü içinde layout klasörünün içine gelelim. Burada yer alan activty_main.xml dosyasını açalım. Bu dosya mobil uygulamalarda çalışacak olan ilk tasarım sayfasıdır. Bu dosya içinde ilk satır hariç diğer satırları silelim. Çünkü biz tasarım ekranını LinearLayout nesnesiyle oluşturacağız. Hesap makinesine ait nesneler yatayda ve düşeyde ekranın ortasında yer alacağı için gravity özelliğini center yapıyoruz.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

</LinearLayout>

Şimdi bu ekranın içine 1 adet LinearLayout ekleyelim. Bu işlemi gerçekleştirmek için ya Palette panelini kullanabilirsiniz ya da Code kısmına gelip elle bu nesneyi oluşturabilirsiniz. Ben Code sayfasından bu işlemi gerçekleştirdim.

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

     </LinearLayout>

İlk nesnemiz olan Sil butonunu LinearLayout nesnesinin içine ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak LinearLayout sayfasına sürükleyip bırakalım. Bu butonun özellikleri üzerinde değişiklik yapalım. Bunun için Button seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnSil olarak belirleyelim. Üzerinde yazan metni değiştirelim. Text özelliğine gelelim ve buraya Sil yazalım. Sil butonunun genişlik ve yüksekliklerini verelim. layout_width ve layout_height değerlerini 80dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Projeyi kaydedip çalıştıralım. Hesap makinesinin ilk butonunu yerleştirmiş olduk.

        <Button
            android:id="@+id/btnSil"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="Sil"
            android:textSize="20sp" />

İkinci nesneyi ekleyelim. Bunun için Palette panelinden TextView nesnesini bulalım. Daha sonra farenin sol tuşuna basarak btnSil nesnesinin yanına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini tevSonuc olarak belirleyelim. İlk değer olarak 0 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 0 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layout_width değerini 250dp, layout_height değerini 80dp yapalım. Yazının sağa doğru yaslanmasını ve ortalanmasını sağlamak için gravity özelliğine gelelim ve center ile end özelliklerini seçelim. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan değeri 20sp yapalım. Bu nesnenin soldaki nesneden itibaren 5dp uzak olmasını sağlamak için margin left değerini 5dp yapalım.

        <TextView
            android:id="@+id/tevSonuc"
            android:layout_width="250dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:gravity="center|end"
            android:textSize="20sp"
            tools:text="0" />

Şimdi buraya dikkat edelim. orientation özelliği horizontal olan bir LinearLayout ekleyelim. Bunun içine orientation özelliği horizontal olan iki adet LinearLayout ekleyelim.

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

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

            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>

    </LinearLayout>

orientation özelliği vertical olan LinearLayout nesnesinin içine 3 tane LinearLayout ekleyelim. orientation özellikleri horizontal olacaktır.

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

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                </LinearLayout>

            </LinearLayout>

Şimdi üçüncü nesneyi ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak LinearLayout sayfasına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnYedi olarak belirleyelim. İlk değer olarak 7 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 7 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layout_width ve layout_height değerini 8dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Projeyi kaydedip çalıştıralım.

                    <Button
                        android:id="@+id/btnYedi"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:text="7"
                        android:textSize="20sp" />

Dördüncü nesneyi ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak btnYeni nesnesinin yanına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnSekiz olarak belirleyelim. İlk değer olarak 8 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 8 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layount_width ve layout_height değerini 80dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Bu nesnenin önceki nesneden uzaklığını belirlemek için marginLeft değerini 5dp yapalım. Projeyi kaydedip çalıştıralım. 

                    <Button
                        android:id="@+id/btnSekiz"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="8"
                        android:textSize="20sp" />

Beşinci nesneyi ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak btnSekiz nesnesinin yanına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnDokuz olarak belirleyelim. İlk değer olarak 9 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 9 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layount_width ve layout_height değerini 80dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Bu nesnenin önceki nesneden uzaklığını belirlemek için marginLeft değerini 5dp yapalım. Projeyi kaydedip çalıştıralım. 

                    <Button
                        android:id="@+id/btnDokuz"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="9"
                        android:textSize="20sp" />

Altıncı nesneyi ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak LinearLayout nesnesinin  sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnEsittir olarak belirleyelim. İlk değer olarak = yazmasını sağlayalım. Text özelliğine gelelim ve buraya = yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layount_width değerini 80dp, layout_height değerini 320dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Bu nesnenin önceki nesneden uzaklığını belirlemek için marginLeft değerini 5dp yapalım. Projeyi kaydedip çalıştıralım.

            <Button
                android:id="@+id/btnEsittir"
                android:layout_width="80dp"
                android:layout_height="320dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:text="="
                android:textSize="20sp" />

orientation değeri horizontal olan bir LinearLayout ekleyelim. Yedinci nesneyi bunun içine ekleyeceğiz. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak LinearLayout sayfasına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnDort olarak belirleyelim. İlk değer olarak 4 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 4 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. Nesnenin genişlik ve yüksekliklerini verelim. layount_width ve layout_height değerini 80dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Projeyi kaydedip çalıştıralım. 

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/btnDort"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:text="4"
                        android:textSize="20sp" />

                 </LinearLayout>

Sekizinci nesneyi ekleyelim. Bunun için Palette panelinden Button nesnesini bulalım. Daha sonra farenin sol tuşuna basarak btnDort nesnesinin yanına sürükleyip bırakalım. Bu nesnenin özellikleri üzerinde değişiklik yapalım. Bunun için nesne seçiliyken Attributes paneline gelelim. Öncelikle ismini değiştirelim. id kısmına gelelim ve ismini btnBes olarak belirleyelim. İlk değer olarak 5 yazmasını sağlayalım. Text özelliğine gelelim ve buraya 5 yazalım. Nesnenin genişlik ve yüksekliklerini verelim. layount_width ve layout_height değerini 80dp yapalım. İçindeki yazının boyutunu değiştirmek için textSize özelliğine gelelim. Burada yer alan Size değerini 20sp yapalım. Bu nesnenin önceki nesneden uzaklığını belirlemek için marginLeft değerini 5dp yapalım. Projeyi kaydedip çalıştıralım. 

                    <Button
                        android:id="@+id/btnBes"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="5"
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/btnAlti"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="6"
                        android:textSize="20sp" /> 

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/btnBir"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:text="1"
                        android:textSize="20sp" />

                 </LinearLayout>

                    <Button
                        android:id="@+id/btnIki"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="2"
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/btnUc"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="3"
                        android:textSize="20sp" /> 

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/btnSifir"
                        android:layout_width="250dp"
                        android:layout_height="80dp"
                        android:text="0"
                        android:textSize="20sp" />

                 </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/btnEkle"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:text="+"
                        android:textSize="20sp" />

                 </LinearLayout>

                    <Button
                        android:id="@+id/btnCikar"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="-"
                        android:textSize="20sp" /> 

                    <Button
                        android:id="@+id/btnCarp"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="x"
                        android:textSize="20sp" />  

                    <Button
                        android:id="@+id/btnBol"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:layout_marginLeft="5dp"
                        android:text="/"
                        android:textSize="20sp" />