Android Tasarım Konusunda İpuçları

Merhaba Arkadaşlar bu yazıda arayüz tasarlama konusunda zorlanıyorsanız veya xml dosyalarıyla uğraşmak istemiyorsanız  işinizi kolaylaştıracak bi siteden bahsetmek istiyorum.

http://www.droiddraw.org/ 

Bu siteyi kullanarak kolaylıkla istediğiniz tasarımları yapabilirsiniz . 

İyi Çalışmalar :)

Android Basit TODO List Yapımı

Bu uygulamamızda bir önceki dersimizde gördüğümüz options menü ve listview kullanarak  basit bir şekilde ekleme,silme ,güncelleme ve çıkış işlemlerinin yapmını görücez. Oluşturduğumuz projemizin tasarımıza göz atalım :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/arka"
    tools:context=".MainActivity" >

     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentRight="true"
         android:layout_alignParentTop="true"
         android:layout_marginTop="14dp"
         android:ems="10"
         android:hint="Buraya Yazınız..." >

        <requestFocus />
    </EditText>
     <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
         android:layout_below="@+id/editText1" >

    </ListView>

</RelativeLayout>

Şimdi de Java kodlarımıza bakalım:

package com.example.android2;

import java.util.ArrayList;
import java.util.Locale;



import android.os.Bundle;
import android.app.Activity;
import android.speech.tts.TextToSpeech;
import android.speech.tts.TextToSpeech.OnInitListener;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnInitListener {
    EditText editText;
    ListView listView;
    ArrayList<String> arrayList;
    ArrayAdapter<String> arrayAdapter;
    TextToSpeech texttoSpeech;
    Integer a=1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText=(EditText)findViewById(R.id.editText1);
        listView=(ListView)findViewById(R.id.listView1);
        texttoSpeech= new TextToSpeech (this,this);
        texttoSpeech.setLanguage(Locale.ENGLISH);
        
        arrayList = new ArrayList<String>();
        arrayAdapter= new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,arrayList);
        listView.setAdapter(arrayAdapter);
        listView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                // TODO Auto-generated method stub
                
                
                editText.setText( arrayList.get(arg2).toString());
                a=(int) arrayAdapter.getItemId(arg2);
                
                
            }
        });
    
}
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // TODO Auto-generated method stub
    switch (item.getItemId()) {
    
    case R.id.menuKaydet:
        if(!editText.getText().equals(null)){
        arrayList.add(editText.getText().toString());
        listView.setAdapter(arrayAdapter);
        editText.setText("");
        Toast.makeText(getApplicationContext(), "Kaydedildi.", Toast.LENGTH_LONG).show();
        }
        break;
    case R.id.menuGuncelle:
    
          arrayList.remove(a-1);
        
          arrayList.add(editText.getText().toString());
            listView.setAdapter(arrayAdapter);
            arrayAdapter.notifyDataSetChanged();
            editText.setText("");
        a=a+1;
        
        Toast.makeText(getApplicationContext(), "Güncellendi.", Toast.LENGTH_LONG).show();
        
        break;
    case R.id.menuSil:
         arrayList.remove(editText.getText().toString());
         listView.setAdapter(arrayAdapter);
         editText.setText("");
        Toast.makeText(getApplicationContext(), "Silindi", Toast.LENGTH_LONG).show();
        break;
    case R.id.menuCikis:
        finish();
        Toast.makeText(getApplicationContext(), "Çıkış yapıldı.", Toast.LENGTH_LONG).show();
        texttoSpeech.speak("closing", TextToSpeech.QUEUE_ADD,null);
        break;
    default:
        break;
        
    }
    return false;
    
    
    
}
@Override
public void onInit(int arg0) {
    // TODO Auto-generated method stub
    
}

}

 Texttospeech özelligini kullanarak  texttoSpeech.speak("closing", TextToSpeech.QUEUE_ADD,null); bu komutta görüldüğü gibi closing yazısının okunmasını sağlıyoruz. 

Uygulamamızın ekran görüntüsü :

Android Options Menü Yapımı

Merhaba Arkadaşlar , bu dersimizde options menu yapımını anlatacağım. Yeni bir proje oluşturalım. Oluşturduğumuz projemizde   public boolean onCreateOptionsMenu(Menu menu)  fonksiyonunu  kulanacağız . Options Menümüzü oluşturmak için res  klasörünün altındaki menu kalsörüne yeni bir xml dosyası açmalıyız.

Oluşturduğunuz yeni .xml dosyasına istediğiniz ismi verebilirsinz.Ben altmenu dedim. Böylelilkle res->menu-> altmenu oluştu. Şimdi oluşturduğumuz altmenu.xml dosyamızı açıp içini dolduralım. 

Add butonuna tıklayıp istediğimiz kadar options menü ekliyebiliriz. Ben görüldüğü gibi üç tane ekledim. Kırmızı ile kutu içine aldığım yerlerden id ve title istediğiniz gibi değiştirebilirsiniz. Add butonuna tıkladıktan sonra şu şekilde seçerek istediğiniz seçenegi ilave edebilirsiniz.

Tasarımda hiçbir şey  yapmıyoruz. Java kodlarımıza bi bakalım.

package com.example.optionsmenu;


import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.altmenu, menu);
        return true;
    }
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        switch (item.getItemId()) {
        
        case R.id.item1:
            Toast.makeText(getApplicationContext(), "İşlem1'e tıklandı.", Toast.LENGTH_LONG).show();
            break;
        case R.id.item2:
            Toast.makeText(getApplicationContext(), "İşlem2'e tıklandı.", Toast.LENGTH_LONG).show();
            break;
        case R.id.item3:
           
            Toast.makeText(getApplicationContext(), "İşlem3'e tıklandı.", Toast.LENGTH_LONG).show();
            break;
        }
        return false;
        
        
        
    }

}

Oluşturduğumuz Options menülere de tıkladığımızda Toast vermesi için şu kodu ekledim .

Toast.makeText(getApplicationContext(), "İşlem1'e tıklandı.", Toast.LENGTH_LONG).show();

Ekran görüntüsüne bakalım ;

    

Sıcaklık Birimi Dönüştürücü

Merhaba arkadaşlar ,bu uygulamamızda sıcaklık birim dönüştürücüsü yapıcaz.Yeni uyguluma açıp istediğiniz ismi verebilirsiniz. Tasarıma gelince ben Edittext,Radiobuton,Textview,Button kullandım,tasarımın şekli size kalmış istediğiniz gibi yapabilirsiniz. Burada yapmak istediğimiz celsius değerini diğer radiobutonda seçili olanlara dönüştürmektir. Uygulamamızın xml kodlarımız şu şeklidedir:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    android:id="@+id/widget32"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

<EditText
    android:id="@+id/edit1"
    android:layout_width="318dp"
    android:layout_height="wrap_content"
    android:layout_x="0dp"
    android:layout_y="4dp"
    android:textSize="18sp" />

<RadioGroup
    android:id="@+id/widget65"
    android:layout_width="136dp"
    android:layout_height="142dp"
    android:layout_x="2dp"
    android:layout_y="52dp" >

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Celsius" />

</RadioGroup>

<Button
    android:id="@+id/buton1"
    android:layout_width="62dp"
    android:layout_height="32dp"
    android:layout_x="126dp"
    android:layout_y="97dp"
    android:background="@drawable/arrow_leftright" />

<Button
    android:id="@+id/buton2"
    android:layout_width="139dp"
    android:layout_height="wrap_content"
    android:layout_x="8dp"
    android:layout_y="284dp"
    android:text="Hesapla" />

<Button
    android:id="@+id/buton3"
    android:layout_width="134dp"
    android:layout_height="wrap_content"
    android:layout_x="170dp"
    android:layout_y="283dp"
    android:text="Temizle" />

<RadioGroup
    android:id="@+id/widget66"
    android:layout_width="136dp"
    android:layout_height="174dp"
    android:layout_x="190dp"
    android:layout_y="43dp" >

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Celsius" />

    <RadioButton
        android:id="@+id/radio3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fahrenhayt" />

    <RadioButton
        android:id="@+id/radio4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kelvin" />

    <RadioButton
        android:id="@+id/radio5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reaumur" />
</RadioGroup>

<EditText
    android:id="@+id/edit2"
    android:layout_width="242dp"
    android:layout_height="wrap_content"
    android:layout_x="54dp"
    android:layout_y="241dp"
    android:ems="10"
    android:textSize="18sp" >

    <requestFocus />
</EditText>

<TextView
    android:id="@+id/widget85"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="2dp"
    android:layout_y="256dp"
    android:text="Sonuç:"
    android:textSize="15sp" />

</AbsoluteLayout>

Uygulamada Celsius'u ,Fahrenhayt,Kelvin ve Reaumur dönüştürme formüllerini bilmek gerekir .Formüller söyledir.
 F =  C × 1.8 + 32
 K = C  + 273.15
 Re =  C × 0.8

Şimdi Java kodlarımıza göz atalım .

package com.example.sicaklikdonusturcu;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

public class Donusturucu extends Activity {
    Button buton,temizle;
    EditText edittext1,edittext2;
    RadioButton radio1,radio2,radio3,radio4,radio5,radio6,radio7,radio8;
    Integer deger,F,C,K,Re;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_donusturucu);
        buton=(Button)findViewById(R.id.buton2);
        temizle=(Button)findViewById(R.id.buton3);
        edittext1=(EditText)findViewById(R.id.edit1);
        edittext2=(EditText)findViewById(R.id.edit2);
        radio1= (RadioButton)findViewById(R.id.radio1);
        radio2= (RadioButton)findViewById(R.id.radio2);
        radio3= (RadioButton)findViewById(R.id.radio3);
        radio4= (RadioButton)findViewById(R.id.radio4);
        radio5= (RadioButton)findViewById(R.id.radio5);
        
        buton.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                
                deger=Integer.parseInt(edittext1.getText().toString());
                //celsius-fahrenhayt dönüşümü
                if(radio1.isChecked()&&radio3.isChecked())
                {
                    F=(int) (deger*(1.8)+32);
                    
                    edittext2.setText(F.toString());
                //celsius-kelvin    
                }else if(radio1.isChecked()&&radio4.isChecked())
                {
                    
                    K=deger+273;
                    edittext2.setText(K.toString());
                    //celsius-reaumur
                }else if(radio1.isChecked()&&radio5.isChecked())
                {
                    Re=(int) (deger*(0.8));
                    edittext2.setText(Re.toString());
                    //celsius-celsius
                }else if(radio1.isChecked()&&radio2.isChecked())
                {
                    Toast.makeText(getApplicationContext(), "Aynı değerleri seçtiniz.", Toast.LENGTH_LONG);
                    edittext2.setText(deger.toString());
                }
            }
        });
        
     temizle.setOnClickListener(new View.OnClickListener() {
        
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            edittext1.setText("");
            edittext2.setText("");
            radio2.setChecked(false);
            radio3.setChecked(false);
            radio4.setChecked(false);
            radio5.setChecked(false);
        }
    });
    }
    
}

Uygulamamızın ekran görüntüsü ise şu şekildedir:


Kolay Gelsin .

Soru ve Görüşleriniz için yorum yapabilirsiniz.

Vücut Kitle Endeksi Hesaplama

Merhaba arkadaşlar , bu uygulamamızda basit bir şekilde  vücut kitle endeksini hesaplayan bir program yazacağız. Öncelikle yeni bir android projesi açıp tasarımı şu şekilde yapıyoruz:

Tasarım için 3 TextView ,3 EditTex,1 Button ayrıca 2 tane daha TextView kullandım ama bu TextViewlerin text özelliklerini sildim çünkü oralara hesapladığım değerleri yazdıracağım.Tasarımın xml kodları da şu şeklidedir:

 vücut kitle endeksi(BKİ)=kilo/(boy*boy) şeklinde hesaplanıyor. Yani biz projemizde EditText1 den gelen değer ve EditText2 den gelen değerlerle işlem yapıcağız.Java kodlarımıza bir göz atalım.

Öncelikle kullandığımız TextView,EditText,Buton larımızı projemize tanıttık. Daha sonra butona click olayını vererek içine butona tıklandığı zaman yapmak istediklerimizi yazdık.

kilotext=Float.parseFloat(kilo.getText().toString()) ;   bu satırın amacı EditText2 den gelen string ifadeyi float değişken tipine dönüştürmektir.

yuvarlama=(int) Math.ceil(bki);  bu satırda da hesapladığımız vücüt kitle endeksi(bki) ni matematiksel olarak en yakın tam sayıya yuvarlamasını sağladık.

En son olarakta if -else yapısını kullanarak bulduğumuz değerin aralığına göre kilomuzun nasıl olduğunu text2 ye yazdırmış olduk.

Uygulamamızın ekran görüntüsü:

Font Değiştirme

Merhaba arkadaşlar , bu uygulamamızda kullandığımız TextViewlerin fontlarını değiştireceğiz.Öncelikle ben herhangi iki adet font indirdim. görüntüleri şu şekildedir.
Projemizi oluşturalım ve tasarımızı yapacağımız sayfaya  3 adet TextView koyalım. TextView in text inede "Bu bir yazidir" yazalım .

Birinci TextView aynen kalsın İkinci ve Üçüncü TextViewleri boyutlarını büyütelim.Bu işlemide properties de Text Size dan istediğiz şeklilde değiştirebiliriz.

Ben boyutlarını 25dp yaptım. Bunun boyutlandırılması size kalmış. Şimdi indirdiğimiz fontlarımızı (ttf) projemizde assets dosyasının içine yeni bir dosya oluşturuyoruz.

assets->sağ tıkla New -> Folder  istediğiniz dosya adı yazarak yeni bir dosya oluşturalım ve içine indirdiğimiz fontları koyalım.Ben oluşturduğum dosyanın adına font dedim. Eğer projede fontları koyduğumuz dosyanın içinde gözükmezse Project->Clean yapabilirsiniz.

Şimdi Java kısmına geçelim.

Öncelikle TextView lere tv1,tv2,tv3 diye isim verdim daha sonra iki  adet font kullandığım için iki adet Typeface oluşturdum. 

typeface1=Typeface.createFromAsset(getAssets(), "font/A Cut Above The Rest.ttf");

typeface2=Typeface.createFromAsset(getAssets(), "font/A Charming Font Superexpanded.ttf");

bu satırlarda görüldügü gibi " " içindeki bölüme fontumuzu koyduğumuz yeri bildiriyoruz. assets içinde yeni oluşturduğumuz dosyanın adına font dediğimiz için dosyamızın adını daha sonra fontumuzun adını yazdık. 

tv2.setTypeface(typeface1);

tv3.setTypeface(typeface2);

bu satırlarla da typeface1 deki fontumuzun tv2 de gözükmesini aynı şekilde typeface2 deki fontumuzunda tv3 de görülmesini sağladık.  

Uygulamamızın ekran görüntüsü :

Spinnerları birbirine bağlamak

Merhaba arkadaşlar ,bu uygulamamızda spinnerlardan bahsediceğiz .Diğer dillerde combobbox olarakta bilinen çok secenekli açılır kapanır kutudur. Öncelikle hemen yeni bir proje oluşturalım ben adına UygulamalarSpinner dedim siz istediğiniz bir isimi verebilirsiniz. 

Şimdi tasarımızı yapacağımız  activity_main içerisine iki adet spinner yerleştirelim.

activity_main.xml ise böyle olmalı isterseniz id lerini değiştirip istediğiz bir şey yapabilirsiniz.

Şimdi MainActivity.java nın içine bakalım .

Burda öncelikle liste1,liste2,liste3,liste4,liste5 adlı 5 dizimizi  oluşturuyoruz. Daha sonra spinnerları tanıtıp ,Arrayadapterü sipinner la bağlıyoruz.

Şimdi yapcağımız şey spinner1 den Ankarayı seçince spinner2 de Ankaranın İlçelerinin gözükmesi ,aynı seçilde Antalya seçildiğinde Antalyanın İlcelerinin gözükmesidir.Ben eğer spinner1 den ( liste1=new String[] {"Ankara","Antalya","Eskişehir","İzmir"};   ) liste1 in  ilk elemanı seçtiğimde  (liste1[0]) spinner2 ye adapter2 yi bağladım. Aynı şekilde  eger spinner1 den (liste1[1]) yani Antalyayı seçersem spinner2  ye adapter3 ü bağladım ve şu satırlada 

Toast.makeText(getApplication(), "Ankara Seçildi", Toast.LENGTH_LONG).show();  ekrana  seçtiğim şehirin mesaj  olarak verdim.

Uygulamanın görüntüsü: