Criando um formulário de login

Olá Pessoal,

Hoje vou apresentar o layout de um formulário de login, já estilizado, com Shape e Styles nos componentes utilizados.

Utilizando o modelo proposto neste projeto podemos criar layouts mais sofisticados para nossos programas.

Abaixo segue um print da estrutura do projeto.

Abaixo seguem todos os arquivos utilizados no projeto acima.


Arquivo shapebutton.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <gradient 
        android:startColor="#96A5CE" 
        android:endColor="#1D3472"
        android:angle="270"/> 

    <stroke
        android:width="1dp"
        android:color="#1D3472" />
    
    <corners
        android:radius="7dp" />
    
    <padding
        android:left="15dp"
        android:top="5dp"
        android:right="15dp"
        android:bottom="5dp" />
    
 </shape>

Arquivo shaplinear.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
            
    <solid 
        android:color="#B9BFD1"/> 
 
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"/>
          
    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp"     
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/>
    
 </shape>

Arquivo shaplinear.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <gradient 
        android:startColor="#96A5CE" 
        android:endColor="#1D3472"
        android:angle="270"/> 
                 
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
 
    <corners 
        android:bottomRightRadius="1dp" 
        android:bottomLeftRadius="1dp"     
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/>
    
</shape>

Arquivo styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   
    <style name="TitleBarText">
        <item name="android:id">@+id/title_text</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:textSize">20dp</item>
        <item name="android:paddingLeft">12dip</item>
        <item name="android:paddingRight">12dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:singleLine">true</item>
        <item name="android:ellipsize">end</item>
    </style>

</resources>

Arquivo main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:gravity="center_vertical">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:background="@drawable/shapelinear"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:background="@drawable/shapetextview"
            android:orientation="horizontal" >
            
            <ImageView
             android:id="@+id/imageView1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/login48" />

         <TextView
             style="@style/TitleBarText"
             android:id="@+id/tvLogin"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:gravity="right|center_vertical" 
             android:text="Login" />

        </LinearLayout>
        
        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tvUsuario"
                android:textColor="#1D3472"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:gravity="right"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:text="Usuário : " />

            <EditText
                android:id="@+id/etUsuario"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_marginRight="10dp"
                android:layout_height="wrap_content">
                <requestFocus />
            </EditText>

        </LinearLayout>
        
        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tvSenha"
                android:textColor="#1D3472"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:gravity="right"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:text="Senha : " />

            <EditText
                android:id="@+id/etSenhA"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_marginRight="10dp"
                android:inputType="textPassword"
                android:layout_height="wrap_content" >
            </EditText>

        </LinearLayout>
        
        <LinearLayout
            android:id="@+id/linearLayout5"
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:gravity="right"
            android:weightSum="3">

            <CheckBox
                android:id="@+id/chkLembrar"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_marginRight="10dp"
                android:layout_height="wrap_content"
                android:text="Lembrar usuário" />
            
        </LinearLayout>
                    
        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp" >

            <Button
                style="@style/TitleBarText" 
                android:id="@+id/btEntrar"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/checkBox1"
                android:background="@drawable/shapebutton"
                android:text="Entrar" />

        </RelativeLayout>

    </LinearLayout>

</RelativeLayout>

Abaixo temos o resultado de nosso projeto.

Por enquanto é isso pessoal, espero que tenham gostado, assim que tiver novidades eu postarei com certeza.


Abaixo seguem outros links relacionados:
Pattern DashBoard - http://escoladeandroid.blogspot.com.br/2012/04/pattern-dashboard.html
Shape - http://escoladeandroid.blogspot.com.br/2012/04/android-shape.html



Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.

Desenv com qualidade!