quinta-feira, 19 de abril de 2012

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!

10 comentários:

Backup disse...

Como eu faria para deixar o checkbox salvo nas preferencias e retornar com ele marcado?

abraços

Backup disse...

Boa noite

como faço para salvar nas preferencias o checkbox e voltar com ele marcado?

abraços

Marcio de Souza disse...

Caro amigo,

Nesse exemplo tem exatamente oque você precisa: http://escoladeandroid.blogspot.com.br/2012/04/android-utilizando-shared-preferences.html

Obrigado pela visita.

Backup disse...

Acho que não nos entendemos direito

o que eu precisaria é salvar o proprio checkbox nas preferencias

exemplo:
coloquei o login e a senha e marquei o checkbox, na proxima vez q eu voltar o login e a senha estao retornando marcados, mas o checkbox nao volta marcado... é isso q eu queria, voltar com o checkbox marcado.

Marcio de Souza disse...

Backup,

Mas pelo que eu entendi isso você pode utilizar através de shared preferences, ou em banco de dados, mas para essa finalidade o melhor seria em shared preferences, e quando o usuário informar o usuário e senha ai sim o programa iria efetuar a validação no banco de dados.

Para gravar nas preferência você pode utilizar sim o link que te passei acima.

Obrigado pelas visitas e espero ter ajudado.

Backup disse...

Vou tentar fazer isso mesmo então, se eu conseguir posto aq os resultados...

teu blog tem sido muito util, valeu ai por disponibilizar tudo isso para os visitantes :D

valeu

sngpc disse...

Amigo parabéns pelo post, eu tentei reproduzir aqui mas esta dando um erro:

Couldn't resolve resource @drawable/login48

Abraços.

Sergio Kawhara

Bruno Wernke disse...
Este comentário foi removido pelo autor.
Bruno Wernke disse...

Sergio Kawhara o que acontece é que você não tem uma imagem chamada login48 dentro da pasta drawable.

Bruno Wernke

sngpc disse...

Valeu Bruno Wernke obrigado por responder, eu já tinha visto que era esse o problema e já resolvi, de qualquer forma muito obrigado, abraços...