Android’de xml ile uygulamalarınız için çok etkileşimli tasarımlar yapabilmektesiniz. Makalenin devamında sizler için paylaştığım Android giriş ekranı tasarımına göz atabilirsiniz.

İçerik göster

ANDROID Giriş Ekranı Tasarımı

Örnek sonucunda ortaya çıkan tasarım şu şekilde

Şimdi yukarıdaki tasarımı elde etmek için yazmamız gereken kodlar şu şekilde öncelikle kullanacağımız renkleri colors.xml adında values klasörü altında resources olarak ekleyelim.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="bg_gradient_start">#b21331</color>
    <color name="bg_gradient_end">#820d2a</color>
    <color name="bg_button_login">#380813</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="white">#ffffff</color>

</resources>

Tasarımımız için drawable klasörü altına bg_button_rounded.xml, bg_gradient.xml ve bg_form_rounded.xml adında xml dosyalarını oluşturalım ve içeriğini şu şekilde dolduralım.

bg_button_rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
 
    <!-- view arkaplan rengi-->
    <solid
        android:color="@color/bg_button_login" >
    </solid>
 
    <!-- iç boşluk oluşturma -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"    >
    </padding>
 
    <!-- Burası köşe kıvrımının ayarlandığı yer -->
    <corners
        android:radius="6dp"   >
    </corners>
 
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid

android:color="@color/bg_button_login" >

</solid>

<padding

android:left="5dp"

android:top="5dp"

android:right="5dp"

android:bottom="5dp" >

</padding>

<corners

android:radius="6dp" >

</corners>

</shape>

bg_gradient.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
 
    <gradient
        android:gradientRadius="750"
        android:endColor="@color/bg_gradient_end"
        android:startColor="@color/bg_gradient_start"
        android:type="radial" />
</shape>

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:gradientRadius="750"

android:endColor="@color/bg_gradient_end"

android:startColor="@color/bg_gradient_start"

android:type="radial" />

</shape>

bg_form_rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
 
    <!-- view arkaplan rengi-->
    <solid
        android:color="@color/white" >
    </solid>
 
    <!-- iç boşluk oluşturma -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" >
    </padding>
 
    <!-- Burası köşe kıvrımının ayarlandığı yer -->
    <corners
        android:radius="6dp" >
    </corners>
 
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid

android:color="@color/white" >

</solid>

<padding

android:left="5dp"

android:top="5dp"

android:right="5dp"

android:bottom="5dp" >

</padding>

<corners

android:radius="6dp" >

</corners>

</shape>

layout klasörü altında default olarak gelen activity_main.xml dosyasının içeriği ise şu şekilde olacak.

activity_main.xml

<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/bg_gradient"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:focusable="true"
    android:focusableInTouchMode="true"
    tools:context=".MainActivity" >
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:gravity="center"
        android:orientation="vertical">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="40dp"
            android:text="@string/welcome"
            android:textColor="@color/white"
            android:textSize="43dp"
            android:textStyle="bold" />
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_form_rounded"
            android:orientation="vertical" >
 
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:background="@null"
                android:hint="@string/email"
                android:padding="5dp"
                android:singleLine="true"/>
 
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:padding="5dp" />
        </LinearLayout>
 
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:background="@drawable/bg_button_rounded"
            android:text="@string/login"
            android:textColor="@color/white"/>
    </LinearLayout>
 
    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/signup"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginBottom="25dp"
        android:textColor="@color/white"/>
 
</RelativeLayout>

<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/bg_gradient"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:focusable="true"

android:focusableInTouchMode="true"

tools:context=".MainActivity" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:gravity="center"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="40dp"

android:text="@string/welcome"

android:textColor="@color/white"

android:textSize="43dp"

android:textStyle="bold" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/bg_form_rounded"

android:orientation="vertical" >

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:background="@null"

android:hint="@string/email"

android:padding="5dp"

android:singleLine="true"/>

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@null"

android:hint="@string/password"

android:inputType="textPassword"

android:padding="5dp" />

</LinearLayout>

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="25dp"

android:background="@drawable/bg_button_rounded"

android:text="@string/login"

android:textColor="@color/white"/>

</LinearLayout>

<TextView android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/signup"

android:layout_alignParentBottom="true"

android:gravity="center_horizontal"

android:layout_marginBottom="25dp"

android:textColor="@color/white"/>

</RelativeLayout>