Ver mensagens sem resposta | Ver tópicos ativos Hoje é 21 Set 2019, 14:07



Responder Tópico  [ 8 Mensagens ] 
 [TUTORIAL] "Alert" personalizado 
Autor Mensagem
Anatomy of an App
Anatomy of an App

Data de registro: 01 Jun 2012, 13:50
Mensagens: 196
Mensagem [TUTORIAL] "Alert" personalizado
Olá pessoal, queria deixar minha contribuição em forma de agradecimento pelas ajudas que recebi no fórum.
Eu pesquisei no google formas de fazer uma caixa de dialogo personalizada e não encontrei grandes coisas.
( se alguém encontrou, me desculpe ).
Então resolvi fazer uma classe para a construção de caixas de dialogo de dois tipos, "sim/não" ou apenas informativo com o botão "fechar".
O resultado alcançado seria o seguinte:

Seguem os dois tipos de dialogo:
Imagem
Imagem

Alguém estaria interessado nesse tutorial?
Pergunto porque seria um pouco extenso e se tem soluções prontinhas, não vou postar aqui a reinvenção da roda.
Por exemplo, com a minha classe basta apenas isso na aplicação:

//Função que será chamada ao pressionar o botão back do aparelho
    public void onBackPressed(){
        final Alert alert = new Alert(this);
        alert.setType(1); //  1=sim/não  -   2=fechar
        alert.setImageResource(R.drawable.desligar);
        alert.setText("Deseja sair da aplicação");
        alert.show();
        alert.setPositiveButton(new OnClickListener(){
            public void onClick(View v){
                alert.close(true);
                finish();
            }
        });
        alert.setNegativeButton(new OnClickListener(){
            public void onClick(View v){
                alert.close(false);
            }
        });
        return;
    }
 

_________________
Happy Day - Nunca mais se esqueça das datas especiais, envia sms automaticamente no dia da comemoração!
https://play.google.com/store/apps/details?id=br.com.happydayfree

Caso tenha encontrado sua solução, coloque como [RESOLVIDO] para facilitar a dúvida de outros.
http://www.portalandroid.org- Tudo sobre o Android.

JESUS VOLTARÁ! Não sabe quem é? Procure, ainda há tempo.


22 Jul 2012, 21:43
Perfil
Widgets
Widgets

Data de registro: 13 Abr 2011, 18:37
Mensagens: 383
Mensagem Re: [TUTORIAL] "Alert" personalizado
E ae cara, estaria interessado sim. Posta ae para nós, muito massa esse alerta customizado que vc criou.

_________________
Inux Sistemas: http://www.inux.com.br
Inux Sistemas FaceBook: http://www.facebook.com/pages/Inux-Sist ... 1175085481
E-mail: contato@inux.com.br
Skype: garekx
E-mail pessoal: victor_apc@yahoo.com.br

Calculadora IMC: https://play.google.com/store/apps/deta ... 3JhaW1jIl0.

Gerador e Validador de CPF e CNPJ: https://play.google.com/store/apps/deta ... f&hl=pt_BR

Desenvolvimento de aplicativos e Sistemas Android, Web e sistemas Desktops.


03 Ago 2012, 21:24
Perfil WWW
What is Android?
What is Android?

Data de registro: 04 Ago 2012, 00:42
Mensagens: 2
Mensagem Re: [TUTORIAL] "Alert" personalizado
Olá Filipe !

Achei muito interessante e gostaria de visualizar o tutorial por completo. Se você puder disponibilizar eu ficaria muito grato.

Abs.

ilbs


04 Ago 2012, 00:47
Perfil
What is a Activity?
What is a Activity?

Data de registro: 28 Fev 2012, 18:09
Mensagens: 18
Mensagem Re: [TUTORIAL] "Alert" personalizado
sabe que tá faltando la no ultimate library um library desse tipo mesmo, de alert.. tava precisando de uma mesmo...
posto todo pls.


03 Out 2012, 15:57
Perfil
Anatomy of an App
Anatomy of an App

Data de registro: 01 Jun 2012, 13:50
Mensagens: 196
Mensagem Re: [TUTORIAL] "Alert" personalizado
Opa, então vamos lá.
O layout original foi alterado, mas o princípio é o mesmo...
Imagem

Uploaded with ImageShack.us

Podemos dividir todo o trabalho em 4 partes:
- A classe "Alert";
- Alert.xml ( layout utilizado na construção da tela );
- A chamada da classe "Alert" na aplicação.

Primeiro iremos criar o layout, segue o código "Alert.xml" ( veja o resultado nas imagens acima ):

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

   
    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_horizontal">

       
        <RelativeLayout
            android:id="@+id/br"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

           
            <TextView
                android:id="@+id/tt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF"
                android:layout_alignParentLeft="true"/>

           
            <Button
                android:id="@+id/btnao"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/alertsair" />

           
            <Button
                android:id="@+id/btsim"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/alertok" />

        </RelativeLayout>
       
        <ImageView
                android:id="@+id/iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"/>

               
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textColor="#848484" />

    </RelativeLayout>
</RelativeLayout>
 


O xml acima é bem fácil de entender, temos o espaço para a imagem, ao lado o texto e no topo uma barra com o título e os dois botões, confirmar e cancelar (veja as imagens acima para ver como ficou).

Segue o código da classe "Alert" e os respectivos comentários.
É necessário incluir dentro da pasta "assets/fonts" a fonte "calibrib.ttf". A pasta "fonts" não vem de raiz, é necessário cria-la. A fonte está disponível na pasta "fonts" do windows, apenas copie.

package br.com.alert;

import br.com.alert.R;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.GradientDrawable;
import android.os.Handler;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class Alert extends Activity {
    public Context context;
    public Integer nType = 1;
    public String cText = "";
    public String cTitle = "";
    public int nRes;
    public Button BTN,BTS;
    public PopupWindow pwAlert;
    public style style = new style();
   
    public Alert(Context c){
        context = c;
       
    }
   
    //Define o tipo de alert a mostrar, 1: yes,no - 2:ok
    void setType(int nT){
        nType = nT;
    }
   
    //Define o titulo
    void setTitle(String cT){
        cTitle = cT;
    }
   
    //Define o texto
    void setText(String cT){
        cText = cT;
    }
   
    //Define qual a imagem a mostrar ao lado do texto
    void setImageResource(int nR){
        nRes = nR;
    }
   
    //Imprime o alert no ecrã
    void show(){
        Typeface FONTE = Typeface.createFromAsset(context.getAssets(), "fonts/calibrib.ttf");
       
        LinearLayout LL = new LinearLayout(context);
        LL.setGravity(Gravity.CENTER);
        LL.setOrientation(LinearLayout.VERTICAL);
       
        LayoutInflater inflate = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        RelativeLayout RL_IN = (RelativeLayout) inflate.inflate(R.layout.alert, null);
        RelativeLayout.LayoutParams RL_IN_PARAM = new RelativeLayout.LayoutParams(fDpToPx(280,context),RelativeLayout.LayoutParams.WRAP_CONTENT);
        RL_IN.setPadding(0,0,0,fDpToPx(11, context));
        GradientDrawable gd = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.rgb(240,240,240),Color.rgb(240,240,240)});
        gd.setCornerRadius(0f);
        gd.setStroke(fDpToPx(2,context), Color.rgb(225,225,225));
        RL_IN.setBackgroundDrawable(gd);
        LL.addView(RL_IN, RL_IN_PARAM);
       
        //Barra top
        RelativeLayout RL_BR = (RelativeLayout) RL_IN.findViewById(R.id.br);
        RelativeLayout.LayoutParams RL_BR_PARAM = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,fDpToPx(37,context));
        RL_BR_PARAM.setMargins(fDpToPx(2,context), fDpToPx(2,context), fDpToPx(2,context), fDpToPx(11, context));
        RL_BR.setBackgroundColor(Color.rgb(225,225,225));
        RL_BR.setPadding(fDpToPx(11,context),0,fDpToPx(5,context),0);
        RL_BR.setLayoutParams(RL_BR_PARAM);
       
        //Titulo
        TextView TT = (TextView) RL_IN.findViewById(R.id.tt);
        TT.setText(cTitle);
        TT.setPadding(0, fDpToPx(10, context), 0, 0);
        style.tvAddAlert(TT, context);
       
        //Imagem ao lado do texto
        RelativeLayout.LayoutParams IV_PARAM = new RelativeLayout.LayoutParams(fDpToPx(61,context),fDpToPx(80,context));
        IV_PARAM.setMargins(fDpToPx(11, context), 0, fDpToPx(11, context), 0);
        IV_PARAM.addRule(RelativeLayout.BELOW, RL_BR.getId());
        ImageView IV = (ImageView) RL_IN.findViewById(R.id.iv);
        IV.setImageResource(nRes);
        IV.setLayoutParams(IV_PARAM);
       
        //Texto
        RelativeLayout.LayoutParams TV_PARAM = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,fDpToPx(80,context));
        TV_PARAM.addRule(RelativeLayout.BELOW,RL_BR.getId());
        TV_PARAM.addRule(RelativeLayout.RIGHT_OF,IV.getId());
        TV_PARAM.setMargins(0,0,fDpToPx(11, context),0);
        TextView TV = (TextView) RL_IN.findViewById(R.id.tv);
        TV.setTypeface(FONTE);
        TV.setTextSize(15);
        TV.setText(cText);
        TV.setLayoutParams(TV_PARAM);
       
        //Botões "ok" e "voltar"
        RelativeLayout.LayoutParams BTN_PARAM = new RelativeLayout.LayoutParams(fDpToPx(45,context),fDpToPx(37,context));
        BTN_PARAM.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        BTN = (Button) RL_IN.findViewById(R.id.btnao);
        BTN.setLayoutParams(BTN_PARAM);
        if(nType!=1){BTN.setVisibility(View.GONE);}
               
        RelativeLayout.LayoutParams BTS_PARAM = new RelativeLayout.LayoutParams(fDpToPx(45,context),fDpToPx(37,context));
        BTS_PARAM.addRule(RelativeLayout.LEFT_OF,BTN.getId());
        BTS = (Button) RL_IN.findViewById(R.id.btsim);
        if(nType!=1){BTS_PARAM.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);}
        BTS.setLayoutParams(BTS_PARAM);
       
        pwAlert = new PopupWindow(context);
        pwAlert.setWidth(LayoutParams.FILL_PARENT);
        pwAlert.setHeight(LayoutParams.FILL_PARENT);
        pwAlert.setTouchable(true);
        pwAlert.setFocusable(false);
        pwAlert.setOutsideTouchable(true);
        //pwAlert.setBackgroundDrawable(null);
        pwAlert.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.backgroundalert));
        pwAlert.setContentView(LL);
        pwAlert.showAtLocation(LL, Gravity.CENTER, 0, 0);
    }
   
    //Aplica a função ao clicar no botão ok
    void setPositiveButton(OnClickListener onClickListener){
        BTS.setOnClickListener(onClickListener);
    }
   
    //Aplica a função ao clicar no botão cancelar
    void setNegativeButton(OnClickListener onClickListener){
        BTN.setOnClickListener(onClickListener);
    }
   
    //Função que fecha o popup
    void close(boolean bOk){
        GradientDrawable gd_bt = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.rgb(170,170,170),Color.rgb(170,170,170)});
        gd_bt.setCornerRadius(7f);
        gd_bt.setStroke(fDpToPx(2,context), Color.rgb(170,170,170));
        if(bOk){
            BTS.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.alertokpress));
        }else{
            BTN.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.alertsairpress));
        }
       
        Handler myHandler = new Handler();
        myHandler.postDelayed(new Runnable(){
            public void run(){pwAlert.dismiss();}
        }, 300);
    }
       
    //Converte DP em pixel
    public Integer fDpToPx(Integer nDp, Context context){
        //int nDip = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, nPx, getResources().getDisplayMetrics());
        //return nDip;
        //return nPx;
        final float scale = context.getResources().getDisplayMetrics().density;
        int pixels = (int) (nDp * scale + 0.5f);
        return pixels;
    };
}
 


Agora falta apenas chamar a classe "alert" no seu fonte e ver o resultado.
Abaixo um exemplo de como gerar um alert apenas com o botão confirmar:

final Alert alert = new Alert(MainActivity.this);
alert.setType(2); //informa que o tipo do alert
alert.setImageResource(R.drawable.confirmar); //imagem que fica ao lado do texto
alert.setTitle("TESTE ALERT"); //titulo
alert.setText("Olá mundo!"); //texto
alert.show(); //imprime o alert no ecrã
//aplica uma ação ao botão confimar
alert.setPositiveButton(new OnClickListener(){public void onClick(View v){
alert.close(true); //ao clicar no botão confirmar, o alert será fechado
}});
 


Agora, um exemplo de um alert com o botão confirmar e cancelar:

final Alert alert = new Alert(MainActivity.this);
alert.setType(1); //informa que o tipo do alert
alert.setImageResource(R.drawable.confirmar); //imagem que fica ao lado do texto
alert.setTitle("DESLIGAR"); //titulo
alert.setText("Deseja sair da aplicação?"); //texto
alert.show(); //imprime o alert no ecrã
//aplica uma ação ao botão confimar
alert.setPositiveButton(new OnClickListener(){public void onClick(View v){
alert.close(true); //ao clicar no botão confirmar, o alert será fechado
Handler myHandler = new Handler();
myHandler.postDelayed(new Runnable(){
public void run(){
finish();
}
}, 300);
}});
//Aplica ação ao botão cancelar
alert.setNegativeButton(new OnClickListener(){
public void onClick(View v){
alert.close(false);
Log.d("ALERT","CLICOU EM CANCELAR");
}
});
 


Bom, penso que não me esqueci de nada, qualquer dúvida, postaÊ!

_________________
Happy Day - Nunca mais se esqueça das datas especiais, envia sms automaticamente no dia da comemoração!
https://play.google.com/store/apps/details?id=br.com.happydayfree

Caso tenha encontrado sua solução, coloque como [RESOLVIDO] para facilitar a dúvida de outros.
http://www.portalandroid.org- Tudo sobre o Android.

JESUS VOLTARÁ! Não sabe quem é? Procure, ainda há tempo.


03 Out 2012, 22:47
Perfil
What is a Activity?
What is a Activity?

Data de registro: 04 Fev 2011, 02:41
Mensagens: 10
Mensagem Re: [TUTORIAL] "Alert" personalizado
*filipe_moraes

Algo bem complexo mas usável, obrigado por compartilar está novidade, guardarei no meu dicionário de conhecimentos :).


12 Nov 2012, 22:18
Perfil
Anatomy of an App
Anatomy of an App

Data de registro: 01 Jun 2012, 13:50
Mensagens: 196
Mensagem Re: [TUTORIAL] "Alert" personalizado
Olá DevAdriano.
O código ainda pode ser melhorado, simplificado...
Se ajudar 1 pessoa já fico satisfeito... :)

Abs.

_________________
Happy Day - Nunca mais se esqueça das datas especiais, envia sms automaticamente no dia da comemoração!
https://play.google.com/store/apps/details?id=br.com.happydayfree

Caso tenha encontrado sua solução, coloque como [RESOLVIDO] para facilitar a dúvida de outros.
http://www.portalandroid.org- Tudo sobre o Android.

JESUS VOLTARÁ! Não sabe quem é? Procure, ainda há tempo.


13 Nov 2012, 21:35
Perfil
Anatomy of an App
Anatomy of an App

Data de registro: 09 Jun 2011, 21:20
Mensagens: 138
Mensagem Re: [TUTORIAL] "Alert" personalizado
Primeiramente parabéns pelo tutorial. Mas está dando erro na linha

public style style = new style();


O que é esse style?


06 Dez 2012, 20:46
Perfil
Mostrar mensagens anteriores:  Organizar por  
Responder Tópico   [ 8 Mensagens ] 

Quem está online

Usuários vendo este fórum: AdrianoMM, Alexsandro Tirloni, alylson, andi, andrelom, andreluzz, Andrey, ariostorecco, arkanjo, arquivo51, Bass, Blackstorm, BloggerCaOS, bozzano, brunomalka, buccalon, Carla Luz, Catapan, celson, claudio, cleberkct, comolatti, Corneta, David, debal, digiwise, drjunior, edwarvelarde, Eneias, erissi, estratec, Fernando Cardia, flashking, Flavio Alves, flaviojps, fredjpa, free_w3000, Geovanne Duarte, Guilherme, gustavobarbosa, HanNiBaLSeTDf, hugomarinho, ismavolk, jacksaum, jacksonvpj, jairom, jcorreajr, JeffCF, joaquimfoto, JRSIQUEIRA, juliana_costa, klausenner, lanlan, lillian.brandao, Lincoln, Liviosousa, lkunta, luciocamilo, lufreitas, Luna, Mace Windu, Maiquell, marcelorferrari, marcos_trb, maximilianjx, memnoch, Moisés Souto, monteirojp, mrangel, msmdark, Nice, Padawan, Patricia, pchofard, peixe, poponeis, rafael.winter, Ranieri, renanpl, ricardzanella, Rodrigo, rodrigo_corinthians, Romulo, ruizsa, scattonevi, suissa, tassiovirginio, thiagoalgo, ThiMatsu, tiagoxv, tirloni, tnarnold, tonholis, tonylock, tricx16, unnamedd, vilmartr, viniciusllima, Wesleyceraso, yuri82 e 2 visitantes


Você não pode criar novos tópicos neste fórum
Você não pode responder tópicos neste fórum
Você não pode editar suas mensagens neste fórum
Você não pode excluir suas mensagens neste fórum
Você não pode enviar anexos neste fórum

Procurar por:

© 2007 - 2016 Portal Android - Comunidade de Desenvolvedores Android

Estamos no Linkedin    Siga-nos no twitter


Powered by phpBB - Hospedado por Bemobi