Open in app

Sign in

Write

Sign in

Instagram Kayıt Ol (Register) Ekranı | Android Studio ile Instagram Klonlama #2

ibrahimcanerdogan
5 min readApr 27, 2021

--

Instagram klonumuza devam ediyoruz. Şimdide giriş ekranından kullanıcının uygulamamıza kayıt olacağı ekranı tasarlayıp, bu ekrandan kayıt olma işleminin tamamlanmasının ardından yeniden “giriş yap” ekranına yöneleceği butonu tamamlayacağız.

Diğer bölümümüzde bu ekrandan alınan verileri sunucumuza kaydedeceğiz ve giriş yap ekranından uygulamamıza giriş yapmasını sağlayacağız.

PROJENİN TÜM KAYNAK KODLARINA BURADAN ULAŞABİLİRSİNİZ.

1. Instagram Logo

Öncelikle merkeze aşağıdan 5dp boşluk olacak şekilde Instagram logomuzu koyuyoruz. “ImageView” içinde ekrana orantılı olarak logomuzun boyutlarını verip, background ile instagram logmuzu componentimize atıyoruz.

Instagram Logo

<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:gravity=”center” 
android:layout_marginBottom=”5dp”> <ImageView 
android:layout_width=”200dp” 
android:layout_height=”70dp” android:background=”@drawable/instagramlogo”> 
</ImageView> </LinearLayout>

2. Tanıtım Text View

Logomuzun altına gelecek olan küçük tanıtım yazımızı da aşağıdaki şekilde ekliyoruz. Orjinal halinde 2 satır olarak karşımıza çıkıyor bunun için “lines” değerimize 2 verdik. Text rengimizi de biraz daha koyu beyaz bir renk olan #999999 olarak belirledik. Yazımızı da orjinal halindeki gibi merkeze almayı unutmuyoruz.

<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginBottom=”20dp”> <TextView 
android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:text=”Sign up to see photos and videos from your 
friends.” 
android:textColor=”#999999" 
android:gravity=”center” 
android:lines=”2"> 
</TextView> </LinearLayout>

3. Sign Up with Facebook Button

Butonumuzu önceki aktivitemizde olduğu gibi “style” sınıfı oluşturarak veriyoruz. “Corners” ile kenarlara 6 derecelik açı ve “solid” ile de buton rengimizi veriyoruz. Şimdi bunu oluşturduğumuz Layout içinde kullanma vakti.

sign_up_button_style.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android"> <corners android:radius=”6dp”> 
</corners> <solid android:color=”#458eff”> 
</solid></shape>

Oluşturduğumuz Linear Layout içine küçük facebook ikonumuzu koyacağımız “Image View” componentimizi ve button üzerinde yazımızı içerecek “TextView” componentimizi yerleştiriyoruz. Linear Layoutumuz diğer butonlarımız gibi görünmesi için “background” değerine belirlediğimiz style dosyasını atadığımızda Linear Layoutumuz buton görünümüne kavuşacaktır.

Oluşturduğumuz bu component görsellik için olduğundan herhangi bir ID vermemiz gerekmez ancak Facebook ile bağlantı kurulmasını istiyorsanız Linear Layout’a ID verip bunu SignUpActivity.java içinde tanımlayıp, click eventi atayabilirsiniz. Sorunsuz şekilde kullanılacaktır.

<LinearLayout 
android:layout_width=”match_parent” 
android:layout_height=”35dp” 
android:gravity=”center” 
android:layout_gravity=”center” android:background=”@drawable/sign_up_button_style”> <ImageView 
android:layout_width=”25dp” 
android:layout_height=”25dp” android:background=”@drawable/facebookicon”> 
</ImageView> <TextView 
android:layout_width=”wrap_content” android:layout_height=”wrap_content” 
android:text=” Sign up with Facebook” android:textColor=”@color/white” 
android:fontFamily=”sans-serif-medium”> 
</TextView> </LinearLayout>

4. “OR” Text

Bu Text nesnemizi de kolayca verebiliriz. Bir TextView component ile uygulamamıza aşağıdaki gibi kolayca yerleştirebiliriz.

<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:layout_gravity=”center” 
android:gravity=”center” 
android:layout_marginBottom=”10dp” 
android:layout_marginTop=”10dp”> <TextView 
android:layout_width=”wrap_content” android:layout_height=”wrap_content” 
android:text=” — — — — — — — — — — — OR — — — — — — — — — — “ android:textColor=”#a6a6a6" 
android:maxLines=”1"> 
</TextView> </LinearLayout>

5. E-mail Edit Text

Burada özelleştirdiğimiz Edit Text componentlerimizi kullanıyoruz. Bunun için res>drawable içine “sign_up_edittext_style.xml” dosyası oluşturuyoruz.

“Corners” ile köşeleri 2dp açı veriyoruz. “Solid” ile Edit Text alanlarımızın arka planına “#f2f2f2” renk kodunu veriyoruz. Kenarlara çizgi çizmek için “Stroke” ile veriyoruz. Kenar çizgilerimiz rengini #e6e6e6, “dashWidth” ile 10px uzunluğunda çizgiler veriyoruz, “dashGap” ile çizgiler arası boşluk vermiyoruz ki kenar çizgimiz bütün olarak gözüksün ve “width” ile de çizgimizin kalınlığını 3 piksel olarak belirliyoruz. Son olarak diğer componentlerin kendi içinde padding ile aralık veriyoruz.

sign_up_edittext_style.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android"> <corners android:radius=”2dp”> 
</corners> <solid android:color=”#f2f2f2"> 
</solid> <stroke android:color=”#e6e6e6" android:dashWidth=”10px” android:dashGap=”0px” android:width=”3px”> 
</stroke> <padding android:left=”10dp” android:top=”10dp” android:bottom=”10dp” android:right=”10dp”> 
</padding></shape>

Aşağıdaki şekilde Username için kullanacağımız Edittext’i yaptık.

<! — E-MAIL EDITTEXT → 
<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginBottom=”10dp”> <EditText 
android:id=”@+id/txtSignUpEmail” 
android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:lines=”1" 
android:hint=”Email” 
android:fontFamily=”sans-serif-light” android:textColor=”@color/black” 
android:textColorHint=”#a6a6a6" 
android:textSize=”17sp” android:background=”@drawable/sign_up_edittext_style”>
</EditText></LinearLayout>

6. Full Name Edit Text

“sign_up_edittext_style.xml” kullanarak kullanıcının adını alacağımız Edit Text’i aşağıdaki şekilde oluşturuyoruz.

“lines” ile 1 satır metin yazılacağını yani enter ile alt satıra geçemeyeceğimizi belirliyoruz. “background” ile style dosyamız ile belirlediğimiz tasarımı kullanıyoruz.

<! — FULL NAME EDIT TEXT → 
<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginBottom=”10dp”> <EditText 
android:id=”@+id/txtSignUpFullName” android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:lines=”1" 
android:hint=”Full Name” 
android:fontFamily=”sans-serif-light” android:textColor=”@color/black” 
android:textColorHint=”#a6a6a6" 
android:textSize=”17sp” android:background=”@drawable/sign_up_edittext_style”> 
</EditText> </LinearLayout>

7. Username Edit Text

“sign_up_edittext_style.xml” kullanarak kullanıcının kullanıcı adını alacağımız Edit Text’i aşağıdaki şekilde oluşturuyoruz.

<! — USERNAME EDIT TEXT → 
<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginBottom=”10dp”> <EditText 
android:id=”@+id/txtSignUpUsername” android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:lines=”1" 
android:hint=”Username” 
android:fontFamily=”sans-serif-light” android:textColor=”@color/black” 
android:textColorHint=”#a6a6a6" 
android:textSize=”17sp” android:background=”@drawable/sign_up_edittext_style”> 
</EditText> </LinearLayout>

8. Password Edit Text

implementation ‘com.maksim88:PasswordEditText:v0.9’

Kütüphanesini önceki bölümümüzde build.gradle>dependencies içine eklemiştik. Bu sayede gizli veya açık şekilde şifremizi yazacağımız EditText’imizi elde etmiş olduk.

<!-- PASSWORD EDIT TEXT-->
<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginBottom=”20dp”> <com.maksim88.passwordedittext.PasswordEditText android:id=”@+id/txtSignUpPassword” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:inputType=”textPassword” 
android:hint=”Password” android:background=”@drawable/sign_up_edittext_style” android:fontFamily=”sans-serif-light” 
android:lines=”1" 
android:textColorHint=”#a6a6a6" 
android:textColor=”@color/black” 
android:textSize=”17sp”> 
</com.maksim88.passwordedittext.PasswordEditText> </LinearLayout>

9. Sign Up Button

Şimdi kullanıcının tıkladığında sunucumuza bilgilerinin kaydolacağı butonumuzu tasarlayacağız.

Butonumuza öncelikle “corners” ile kenarlardan 6 derecelik bir çap veriyoruz. Sonrasında Instagram renk paletinden bulduğumuz orjinal mavi renk kodumuzu da “color” ile ekliyoruz.

sign_up_button_style.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android"> <corners android:radius=”6dp”> 
</corners> <solid android:color=”#458eff”> 
</solid></shape>

Belirlediğimiz “style” dosyası ile aşağıdaki butonumza “background” ile vererek Orijinal butonumuzun aynısı diğer özelliklerle birlikte oluşturmuş oluyoruz. “textAllCaps” ile büyük harfleri kapatıyoruz, yazı tipimizi, boyutunu ve rengini aşağıdaki değerleri vermiş oluyoruz.

<! — SIGN UP BUTTON → 
<LinearLayout 
android:layout_width=”match_parent” 
android:layout_height=”40dp” 
android:layout_marginBottom=”15dp”> <Button 
android:id=”@+id/btnSignUp” 
android:layout_width=”match_parent” android:layout_height=”wrap_content” android:background=”@drawable/sign_up_button_style” android:text=”Sign up” 
android:fontFamily=”sans-serif-medium” 
android:textAllCaps=”false” 
android:textColor=”@color/white” 
android:textSize=”16sp”> 
</Button> </LinearLayout>

10. Privacy Policy Text

Orjinal görüntüyü sağlamak için koyduğumuz bu TextView nesnesine ID vererek bir “click” atayabilirsiniz. Bu yazıya tıklandığında Instagram gizlilik sözleşmesini kullanıcının karşısına getirebilirsiniz.

<! — APP TEXTVIEW → 
<LinearLayout 
android:layout_width=”match_parent” android:layout_height=”wrap_content”> <TextView 
android:layout_width=”match_parent” android:layout_height=”wrap_content” 
android:text=”By signing up, you agree to our Terms and Privacy Policy.” 
android:textColor=”#999999" 
android:gravity=”center”> 
</TextView> </LinearLayout>

11. Log In Button

Bu buton bizim hesap oluşturan, hesap oluşturmaktan vazgeçen veya hesabını hatırlayan kullanıcılarımız için giriş ekranına götüreceğimiz buton olma görevini üstleniyor.

Butonumuzun arka planının şeffaf olması için “background” görüldüğü gibi veriyoruz. Yine verdiğimiz “text” aynı şekilde kullanıcıya görülmesi için “textAllCaps” değerimizi devre dışı bırakıyoruz. “Gravity”ler ile yazımızı merkeze taşıyoruz. TextView gibi gözüken Butonumuz kullanıma hazır hale getirmiş olduk.

<! — SIGN IN → 
<LinearLayout 
android:layout_width=”match_parent” 
android:layout_height=”0dp” 
android:layout_weight=”0.07" 
android:gravity=”center” 
android:layout_gravity=”center”> <Button 
android:id=”@+id/btnSignUpSignIn” android:layout_width=”match_parent” android:layout_height=”match_parent” 
android:background=”?android:attr/selectableItemBackground” android:fontFamily=”sans-serif-light” 
android:text=”Have an account? Log in.” android:textColor=”@color/black” 
android:textAllCaps=”false”> 
</Button> </LinearLayout>

Gerekli tüm tasarım objelerimizi ekledik. Sonuç olarak aşağıda görülen tasarımı elde ettik.

Şimdi tüm componentleri “SignUpActivity.java” içinde uygulamamızda kullanmak üzere aşağıdaki şekilde tanımlıyoruz.

package com.icanerdogan.instragramclone; import androidx.appcompat.app.AppCompatActivity; 
import android.content.Intent;import android.os.Bundle;
import android.view.View;import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.EditText; public class SignUpActivity extends AppCompatActivity implements View.OnClickListener { EditText txtEmail, txtFullName, txtUsername, txtPassword; 
Button btnSignUp, btnSignUpToSignIn; @Override protected void onCreate(Bundle savedInstanceState) { requestWindowFeature(Window.FEATURE_NO_TITLE); getSupportActionBar().hide(); this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); super.onCreate(savedInstanceState); setContentView(R.layout.activity_sign_up); // Text Components 
txtEmail = findViewById(R.id.txtSignUpEmail); 
txtFullName = findViewById(R.id.txtSignUpFullName); 
txtUsername = findViewById(R.id.txtSignUpUsername); 
txtPassword = findViewById(R.id.txtSignUpPassword); // Button Components 
btnSignUp = findViewById(R.id.btnSignUp); 
btnSignUpToSignIn = findViewById(R.id.btnSignUpSignIn); // Button Click Events 
btnSignUp.setOnClickListener(this); btnSignUpToSignIn.setOnClickListener(this); } @Override public void onClick(View view) { 
switch (view.getId()){ 
case R.id.btnSignIn: 
SignUp(); 
break; 
case R.id.btnSignUpSignIn: 
SignUpToSignIn(); 
break; 
} 
} private void SignUp() { 
// SIGN UP WITH PARSE 
} private void SignUpToSignIn() { 
Intent signInIntent = new Intent(SignUpActivity.this, SignInActivity.class); 
startActivity(signInIntent); finish(); 
} 
}

Bu activity dosyasına ulaşmak için “SignInActivity.java” dosyamızı güncelledik.

Aktiviteler arasında geçiş yapmak için Intent kullanıyoruz. Geri tuşuna bastığımızda önceki aktivitenin sonlanması için finish() fonksiyonunu da eklemeyi unutmuyoruz.

private void SignInToSignUp() { 
Intent signUpIntent = new Intent(SignInActivity.this, SignUpActivity.class); startActivity(signUpIntent); 
finish(); 
}

Projenin tüm haline ve bütün kaynak kodlarına BURADAN ulaşabilirsiniz.

Her türlü yorum, fikir ve desteğiniz için yorum bırakabilir veya benimle Linkedin üzerinden iletişime geçebilirsiniz.

LINKEDIN

YOUTUBE

UDEMY

GITHUB

Instagram
Android
Parse
Programlama
Android Programlama

--

--

ibrahimcanerdogan
ibrahimcanerdogan

Written by ibrahimcanerdogan

70 Followers
6 Following

Hi, My name is Ibrahim, I am developing ebebek android app within Ebebek. I publish various articles in the field of programming and self-improvement.

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams