quinta-feira, 10 de maio de 2012

Criando um Custom Dialog


Olá Pessoal,


Hoje vou mostrar como criar um Custom Dialog, este recurso pode ser utilizado quando você quer criar uma tela modal.

Abaixo segue um print do projeto utilizado.

Como de costume vou apresentar todos os fontes utilizados já com comentários para facilitar no aprendizado.

Arquivo main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Retorno do custom dialog:"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/etRetorno"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/btnChamarDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Chamar Dialog" 
        android:onClick="ChamarDialog_click"/>

</LinearLayout>

Arquivo customdialog.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:orientation="horizontal"
     >

    <TextView
        android:id="@+id/tvMens"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        
        android:text="Mensagem"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/etValor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/tvMens"
        android:layout_below="@+id/tvMens"
        android:layout_marginRight="10dp"
        android:inputType="text"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
  android:layout_alignParentRight="true"
        android:layout_below="@+id/etValor"
        android:orientation="horizontal"
        android:background="#C4C4C4" 
        android:paddingTop="4dp"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/btn_Confirmar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Confirmar" />

        <Button
            android:id="@+id/btn_Cancelar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Cancelar" />
    </LinearLayout>

</RelativeLayout>

Arquivo CustomDialogActivity.java
package br.com.EscolaDeAndroid.CustomDialog;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class CustomDialogActivity extends Activity {
 EditText etRetorno;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        etRetorno = (EditText) findViewById(R.id.etRetorno);
    }
    
    //Método executado quando usuário clicar no botão
    //Chamar Dialog
    public void ChamarDialog_click(View v){
     ExibeDialog();
    }
    
    private void ExibeDialog(){
        final Dialog dialog = new Dialog(this);

        dialog.setContentView(R.layout.customdialog);

        //define o título do Dialog
        dialog.setTitle("Busca de cliente:");

        //instancia os objetos que estão no layout customdialog.xml
        final Button confirmar = (Button) dialog.findViewById(R.id.btn_Confirmar);
        final Button cancelar = (Button) dialog.findViewById(R.id.btn_Cancelar);
        final EditText editText = (EditText) dialog.findViewById(R.id.etValor);
        final TextView tvMens = (TextView) dialog.findViewById(R.id.tvMens);
        
        tvMens.setText("Nome");

        confirmar.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                etRetorno.setText(editText.getText());
                
             //finaliza o dialog
             dialog.dismiss();
            }
        });

        cancelar.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
             //finaliza o dialog
                dialog.dismiss();
            }
        });
        
        //exibe na tela o dialog
     dialog.show();
         
    }
}

Abaixo seguem o resultado de nosso projeto.


Espero que seja útil para vocês este post e em breve estarei postando novidades.


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!

terça-feira, 8 de maio de 2012

Utilizando Shadow em TextView

Olá Pessoal,


Hoje vou mostrar como utilizar sombra (shadow) em nossos textviews, esse é um recusro muito interessante na questão visual principalmente por evitar utilizar uma imagem somente para criar um visual mais elaborado em nossos aplicativos.

Antes já vou explicar os principais atributos da sombra (shadow):

android:shadowColor - cor que será utilizada na sombra.

android:shadowDx - define a posição horizontal da sombra, informando um valor negativo a sombra será alinhada a esquerda, informando um valor positivo a sombra será alinha a direita.

android:shadowDy - define a posição vertical da sombra, informando um valor negativo a sombra será alinhada para baixo, informando um valor positivo a sombra será alinha para cima.

android:shadowRadius - define o grau do esfumaçado da sombra, quanto maior o número mais esfumaçado será a sombra.


Abaixo seguem alguns exemplos de sombra.

Arquivo main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#EBEBEB" >

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="3" />  

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="3" />              
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="3" />      
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="0" />         

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="-3" /> 
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="-3" />     

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="-3" />         
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="0" />     
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - centro"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="3" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="0" />     
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - simples"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="0.01" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="3" />     
    
</LinearLayout>


Abaixo segue o resultado de nosso teste:
Shadow

Por enquanto é isso pessoal, com mais essa técnica podemos melhorar ainda nossas interfaces com o usuário e com isso criar aplicativos de maior qualidade.


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!