Yazilimdersi.info | Android de örnek login ve registration sayfası dizaynı

Android uygulamaların birçoğunda kullanıcılarla sürekli irtibat içerisinde kalmak ve onlara ait dataları güvenilir şekilde saklamak için bazı bilgilere ihtiyaç duyulmaktadır. Bu bilgilerin alınmasında registration formu, kontrolünde ise login formu önemli bir yere sahiptir. Makalemizde bu iki önemli sayfa ile alakalı basit bir design oluşturup sizlerle paylaşacağız.

KODU İNDİR

Kodlamalar sonucunda oluşacak login ve registration sayfa tasarımları şu şekilde olacaktır:

1. Login Ekranının Dizayn Edilmesi:
Aşağıdaki kodlamada uygulamamızda hazılanacak login sayfası ile alakalı design gerçekleştirilecektir. Layout yapıları içerisinde RelativeLayout en kullanışlı olduğundan her iki sayfanın tasarımında da kullandım. Uygulamada res/layout/activity_login.xml dosyası oluşturup aşağıda bulunan kodlamayı dosyanın içerisine yapıştıralı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="#FFFFFF" 
    android:padding="20dp" > 

    <ImageView 
        android:id="@+id/yazilimdersiImageView" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true" 
        android:layout_centerHorizontal="true" 
        android:src="@drawable/logo" /> 

    <EditText 
        android:id="@+id/usernameEditText" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_centerHorizontal="true" 
        android:layout_centerVertical="true" 
        android:background="@drawable/customedittext" 
        android:ems="10" 
        android:hint="@string/username" 
        android:inputType="textPersonName" 
        android:textColor="#969696" 
        android:textColorHint="#C7C7CD" 
        android:textCursorDrawable="@null" > 
        
        <requestFocus /> 
     </EditText> 

     <EditText 
        android:id="@+id/passwordEditText" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/usernameEditText" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="20dp" 
        android:background="@drawable/customedittext" 
        android:ems="10" android:hint="@string/password" 
        android:inputType="textPassword" 
        android:textColor="#969696" 
        android:textColorHint="#C7C7CD" 
        android:textCursorDrawable="@null" /> 

     <Button 
        android:id="@+id/loginButton" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/passwordEditText" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="10dp" 
        android:background="#265376" 
        android:padding="10dp"  
        android:textSize="16sp" 
        android:textColor="#FFFFFF" 
        android:text="@string/loginText" /> 
   
     <TextView 
        android:id="@+id/registerTextView" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_alignLeft="@+id/passwordEditText" 
        android:layout_below="@+id/loginButton" 
        android:layout_marginTop="10dp" 
        android:clickable="true" 
        android:gravity="center" 
        android:singleLine="true" 
        android:text="@string/register" 
        android:textColor="#969696" 
        android:textSize="14sp" /> 

</RelativeLayout>

Kodlamada dikkat ederseniz Edit Textlerin görünümünde yenilik oluşturmak adına @drawable/customedittext dosyası kullanıldı. Bu dosyada yapılan kodlama sayesinde Android'in son sürümlerinde ortaya çıkan tasarım etkisi eski sürümlerde de gözlemlencek hale getirildi. Bu tasarım etkisinin oluşturulması için res/drawable/customedittext.xml dosyası oluşturup aşağıda bulunan kodlamayı dosya içerisine eklemeniz gerekmektedir.

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
   <item> 
       <shape android:shape="rectangle" > 
            <solid android:color="#ABABAB" />          
            <padding android:bottom="1dp" /> 
       </shape> 
   </item> 
   <item android:bottom="5dp"> 
       <shape android:shape="rectangle" > 
             <solid android:color="#fff" /> 
             <padding android:left="1dp" android:right="1dp" /> 
       </shape> 
   </item> 
   <item> 
       <shape android:shape="rectangle" > 
             <solid android:color="#fff" /> 
             <padding android:left="8dp" android:top="4dp" android:bottom="4dp"/> 
       </shape> 
   </item> 
</layer-list>

2. Registration Ekranının Dizayn Edilmesi:
Aşağıdaki kodlamada uygulamamızda hazılanacak registration sayfası ile alakalı design gerçekleştirilecektir. Uygulamada res/layout/activity_tegister.xml dosyası oluşturup aşağıda bulunan kodlamayı dosyanın içerisine yapıştıralı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="#FFFFFF" 
   android:padding="20dp" > 

   <ImageView 
      android:id="@+id/yazilimdersiImageView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentTop="true" 
      android:layout_centerHorizontal="true" 
      android:src="@drawable/logo" /> 

   <EditText 
      android:id="@+id/usernameEditText" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:background="@drawable/customedittext" 
      android:ems="10" 
      android:hint="@string/username" 
      android:inputType="textPersonName" 
      android:textColor="#969696" 
      android:textColorHint="#C7C7CD" 
      android:textCursorDrawable="@null" > 
 
      <requestFocus /> 
  </EditText> 

  <EditText 
      android:id="@+id/emailEditText" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/usernameEditText" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:layout_marginTop="20dp" 
      android:background="@drawable/customedittext" 
      android:ems="10" 
      android:hint="@string/email" 
      android:inputType="textEmailAddress" 
      android:textColor="#969696" 
      android:textColorHint="#C7C7CD" 
      android:textCursorDrawable="@null" > 
  </EditText> 

  <EditText 
      android:id="@+id/passwordEditText" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/emailEditText" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="20dp" 
      android:background="@drawable/customedittext" 
      android:ems="10" 
      android:hint="@string/password" 
      android:inputType="textPassword" 
      android:textColor="#969696"
      android:textColorHint="#C7C7CD" 
      android:textCursorDrawable="@null" /> 

  <Button 
      android:id="@+id/registerButton" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/passwordEditText" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="10dp" 
      android:background="#265376" 
      android:padding="10dp" 
      android:text="@string/registerText" 
      android:textColor="#FFFFFF" 
      android:textSize="16sp" /> 

  <TextView 
      android:id="@+id/loginTextView" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/passwordEditText" 
      android:layout_below="@+id/registerButton" 
      android:layout_marginTop="10dp" 
      android:clickable="true" 
      android:gravity="center" 
      android:singleLine="true" 
      android:text="@string/login" 
      android:textColor="#969696" 
      android:textSize="14sp" /> 

</RelativeLayout>

Registration ekranın ekran görüntüsü aşağıdaki gibi olacaktır.

3. Login Ekranından Registration Ekranına Geçiş:
Her iki maddenin tamamlanması ile birlikte ekranlara ait tasarımlar tamamlanmış oldu. Sırada bu ekranlar arası geçişlerin yapılmasını nasıl sağlayabileceğimiz ile alakalı kodlamada. Uygulama ilk açıldığında kullanıcıya login ekranı gösterilecektir. "Üye değil misiniz? Kaydolun" textine tıklanıldığında kullanıcının registration sayfasına yönlendirilmesini sağlayalım. Öncelikle LoginActivity.java dosyasını oluşturup aşağıda bulunan kodları dosya içerisine ekleyiniz:

public class LoginActivity extends Activity { 
    public TextView registerTextView; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_login);  
         registerTextView = (TextView) findViewById(R.id.registerTextView); 
         registerTextView.setOnClickListener(new OnClickListener() { 
   
             @Override 
             public void onClick(View v) { 
                 Intent i = new Intent(getApplicationContext(), RegisterActivity.class); 
                 startActivity(i); 
             } 
          }); 
   } 
}

Yukarıdaki kodlamada gördüğünüz üzere registrationTextView a tıklanıldığında startActivity() metodu sayesinde RegisterActivity.class çağrılmaktadır. Böylelikle Login ekranından Registration ekranına geçiş sağlanmaktadır.

4. Registration Ekranından Login Ekranına Geçiş:
Uygulamada registration ekranında bulunan kullanıcının tekrar login ekranına yönlendirilmesini sağlamamız gerekebilir. "Üye misiniz? Giriş yapın" textine tıklanıldığında kullanıcının login sayfasına yönlendirilmesini sağlayalım. Öncelikle RegisterActivity.java dosyasını oluşturup aşağıda bulunan kodları dosya içerisine ekleyiniz:

public class RegisterActivity extends Activity { 
    public TextView loginTextView; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_register); 
        loginTextView = (TextView) findViewById(R.id.loginTextView); 
        loginTextView.setOnClickListener(new OnClickListener() { 
            
            @Override 
            public void onClick(View v) { 
                finish(); 
            } 
        }); 
     } 
}

Yukarıdaki kodlamada gördüğünüz üzere loginTextView a tıklanıldığında finish() metodu sayesinde mevcut activity kapatılmakta ve daha önceden çağrılan LoginActivity.java ekranı çağrılmaktadır. Böylelikle Registration ekranından Login ekranına geçişte sağlandı.

5. Activitylerin AndroidManifest.xml Dosyasına Eklenmesi:
Uygulama ile alakalı tüm işlemler şu an için gerçekleştirildi. Ekranların tasarımları ve tıklanıldığında aktif hale gelecek activityler hazırlandı. Bunların son olarak AndroidManifest.xml dosyası içerisine konulmasına sıra geldi. Genelde uygulamalarımda tema olarak başlıksız tam ekranı beğendiğimden dolayı uygulama teması olarak android:theme="@android:style/Theme.NoTitleBar.Fullscreen" setledim. AndroidManifest.xml dosyasının içeriği ise aşağıdaki gibi olmalıdır:

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
    package="com.yazilimdersi.info.example.registration" 
    android:versionCode="1" android:versionName="1.0" > 

<uses-sdk 
    android:minSdkVersion="14" 
    android:targetSdkVersion="14" /> 

<application 
    android:allowBackup="true" 
    android:icon="@drawable/ic_launcher" 
    android:label="@string/app_name" 
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen" > 
    <activity 
        android:name=".LoginActivity" 
        android:label="@string/app_name" > 
        <intent-filter> 
            <action android:name="android.intent.action.MAIN" /> 
            <category android:name="android.intent.category.LAUNCHER" /> 
        </intent-filter> 
    </activity> 
    <activity 
        android:name=".RegisterActivity" 
        android:label="@string/app_name" > 
    </activity> 
</application>

</manifest>

Tüm işlemlerin ardından proje üzerinde sağa tıklayıp Run As => 1 Android Applicationa tıklayarak projeyi çalıştırınız.

Mustafa Çelik