Pattern - Dashboard
Autor: Marcio de Souza | Publicado: 2012-04-15T07:46:00-07:00

Olá Pessoal,

Vou mostrar como montar um Pattern DashBoard que é a tela inicial de seu sistema, nela pode conter conteúdo dinâmico ou estático, nela também são encontrados quais as principais opções de seu sistema, facilitando a navegação do usuário.

Abaixo segue um print com a estrutura do projeto:




A seguir serão apresentados todos os fontes utilizados no sistema.

Arquivo colors.xml
&lt;?xml version="1.0" encoding="utf-8"?&gt;

&lt;resources&gt;
    &lt;color name="title_background"&gt;#ffFF0000&lt;/color&gt;
    &lt;color name="title_text"&gt;#ffffffff&lt;/color&gt;
    &lt;color name="foreground"&gt;#ffffffff&lt;/color&gt;
    &lt;color name="background"&gt;#ff000000&lt;/color&gt;
&lt;/resources&gt;


Arquivo strings.xml
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;

    &lt;string name="hello"&gt;Hello World, DashBoardActivity!&lt;/string&gt;
    &lt;string name="app_name"&gt;DashBoard&lt;/string&gt;
    &lt;string name="home"&gt;Nome do seu programa&lt;/string&gt;
    &lt;string name="consulta"&gt;Consulta&lt;/string&gt;
    &lt;string name="sobre"&gt;Sobre&lt;/string&gt;
    &lt;string name="config"&gt;Config.&lt;/string&gt;
    &lt;string name="venda"&gt;Vendas&lt;/string&gt;
    &lt;string name="rodape"&gt;Mensagem de rodapé&lt;/string&gt;
    
&lt;/resources&gt;


Arquivo styles.xml
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
   
    &lt;style name="HomeText"&gt;
        &lt;item name="android:layout_gravity"&gt;center_vertical&lt;/item&gt;
        &lt;item name="android:layout_width"&gt;fill_parent&lt;/item&gt;
        &lt;item name="android:layout_height"&gt;wrap_content&lt;/item&gt;
        &lt;item name="android:layout_weight"&gt;0&lt;/item&gt;
        &lt;item name="android:gravity"&gt;center_horizontal&lt;/item&gt;
        &lt;item name="android:textSize"&gt; 18sp&lt;/item&gt;
        &lt;item name="android:textStyle"&gt;bold&lt;/item&gt;
        &lt;item name="android:textColor"&gt;@color/foreground&lt;/item&gt;
    &lt;/style&gt;

    &lt;style name="TitleBar"&gt;
        &lt;item name="android:windowNoTitle"&gt;true&lt;/item&gt;
        &lt;item name="android:id"&gt;@+id/title_container&lt;/item&gt;
        &lt;item name="android:layout_width"&gt;fill_parent&lt;/item&gt;
        &lt;item name="android:layout_height"&gt;45dip&lt;/item&gt;
        &lt;item name="android:orientation"&gt;horizontal&lt;/item&gt;
        &lt;item name="android:background"&gt;@color/title_background&lt;/item&gt;
    &lt;/style&gt;

    &lt;style name="TitleBarLogo"&gt;
        &lt;item name="android:id"&gt;@+id/title_logo&lt;/item&gt;
        &lt;item name="android:layout_width"&gt;wrap_content&lt;/item&gt;
        &lt;item name="android:layout_height"&gt;fill_parent&lt;/item&gt;
    &lt;/style&gt;

    &lt;style name="TitleBarText"&gt;
        &lt;item name="android:id"&gt;@+id/title_text&lt;/item&gt;
        &lt;item name="android:layout_width"&gt;0dp&lt;/item&gt;
        &lt;item name="android:layout_height"&gt;fill_parent&lt;/item&gt;
        &lt;item name="android:layout_weight"&gt;1&lt;/item&gt;
        &lt;item name="android:gravity"&gt;center_vertical&lt;/item&gt;
        &lt;item name="android:textSize"&gt;18sp&lt;/item&gt;
        &lt;item name="android:paddingLeft"&gt;12dip&lt;/item&gt;
        &lt;item name="android:paddingRight"&gt;12dip&lt;/item&gt;
        &lt;item name="android:textStyle"&gt;bold&lt;/item&gt;
        &lt;item name="android:textColor"&gt;@color/title_text&lt;/item&gt;
        &lt;item name="android:singleLine"&gt;true&lt;/item&gt;
        &lt;item name="android:ellipsize"&gt;end&lt;/item&gt;
    &lt;/style&gt;

&lt;/resources&gt;


Arquivo main.xml
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" &gt;

    &lt;LinearLayout 
        style="@style/TitleBar"
        android:id="@+id/linearLayout1"&gt;        
                      
       &lt;ImageView 
               style="@style/TitleBarLogo"
               android:id="@+id/img1"                 
            android:src="@drawable/dashboard" 
            android:onClick="onClickHome" 
            android:contentDescription="@null"
            android:layout_marginTop = "5dip"
            android:layout_marginRight="5dip"
            android:layout_marginLeft="5dip" 
            android:layout_marginBottom = "4dip"
            android:paddingBottom = "2dip"
            android:background="@null"
            android:layout_gravity="center" 
            android:paddingLeft="5dip" 
            android:paddingRight="7dip" /&gt;

        &lt;ImageView 
            android:id="@+id/sep"
            android:contentDescription="@null"
            android:layout_width="1dp"
            android:layout_height="fill_parent"    
            android:background="@drawable/separator"
            android:layout_marginRight="7dip"/&gt;

        &lt;TextView 
            style="@style/TitleBarText" 
            android:id="@+id/tv1"
            android:paddingLeft = "8dip"
            android:text="@string/home"/&gt;
           
    &lt;/LinearLayout&gt;

    &lt;RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/llRodape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/linearLayout1" &gt;

        &lt;LinearLayout
            android:id="@+id/LinearLayout1" 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center_vertical"
            android:orientation="vertical" &gt;            
           
            &lt;LinearLayout
                android:id="@+id/LinearLayout2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal" &gt;
        
                   &lt;ImageView
                       android:id="@+id/ivVenda"
                       android:layout_width="0dp"
                       android:layout_weight="1"
                       android:contentDescription="@null"
                       android:layout_height="wrap_content"
                       android:onClick="onClickVenda"
                       android:src="@drawable/venda" /&gt;
        
                   &lt;ImageView
                       android:id="@+id/ivConsulta"
                       android:layout_width="0dp"
                       android:layout_weight="1"
                       android:contentDescription="@null"
                       android:layout_height="wrap_content"
                       android:onClick="onClickConsulta"
                       android:src="@drawable/consulta" /&gt;
            &lt;/LinearLayout&gt;

            &lt;LinearLayout
                android:id="@+id/LinearLayout3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="25dp"
                android:orientation="horizontal" &gt;

                &lt;TextView
                    android:id="@+id/tvVenda"
                    style="@style/HomeText"
                    android:layout_width="0dp"
                    android:layout_marginTop="0dip"
                    android:layout_weight="1"
                    android:text="@string/venda" /&gt;

                &lt;TextView
                    android:id="@+id/tvConsulta"
                    style="@style/HomeText"
                    android:layout_width="0dp"
                    android:layout_marginTop="0dip"
                    android:layout_weight="1"
                    android:text="@string/consulta" /&gt;
            &lt;/LinearLayout&gt;
            
            
            &lt;LinearLayout
                android:id="@+id/LinearLayout4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:orientation="horizontal" &gt;
        
                   &lt;ImageView
                       android:id="@+id/ivConfig" 
                       android:layout_width="0dp"
                       android:layout_weight="1"
                       android:contentDescription="@null"
                       android:layout_height="wrap_content"
                       android:onClick="onClickConfig"
                       android:src="@drawable/config" /&gt;
        
                   &lt;ImageView
                       android:id="@+id/ivSobre" 
                       android:layout_width="0dp"
                       android:layout_weight="1"
                       android:contentDescription="@null"
                       android:layout_height="wrap_content"
                       android:onClick="onClickSobre"
                       android:src="@drawable/sobre" /&gt;
            &lt;/LinearLayout&gt;        
            
            &lt;LinearLayout
                android:id="@+id/LinearLayout5"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="25dp"
                android:orientation="horizontal" &gt;

                &lt;TextView
                    android:id="@+id/tvConfig"
                    style="@style/HomeText"
                    android:layout_width="0dp"
                    android:layout_marginTop="0dip"
                    android:layout_weight="1"
                    android:text="@string/config" /&gt;

                &lt;TextView
                    android:id="@+id/tvSobre"
                    style="@style/HomeText"
                    android:layout_width="0dp"
                    android:layout_marginTop="0dip"
                    android:layout_weight="1"
                    android:text="@string/sobre" /&gt;
            &lt;/LinearLayout&gt;            
        &lt;/LinearLayout&gt;

    &lt;/RelativeLayout&gt;
        
    &lt;LinearLayout
        android:id="@+id/llRodape"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:orientation="vertical" &gt;

        &lt;TextView
            style="@style/TitleBarText"
            android:id="@+id/tvRodape"
            android:layout_width="fill_parent"
            android:text="@string/rodape"
            android:background="@color/title_background"/&gt;
    &lt;/LinearLayout&gt;        

&lt;/RelativeLayout&gt;


Arquivo DashBoardActivity.java
package br.com.EscolaDeAndroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class DashBoardActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    
    public void onClickVenda(View v){
     trace("Venda");
    }
    
    public void onClickConsulta(View v){
     trace("Consulta");
    }
   
    public void onClickConfig(View v){
     trace("Configurações");
    }
    
    public void onClickSobre(View v){
     trace("Sobre");
    }
    
    public void onClickHome(View v){
     trace("Home");
    }    
    
    public void toast (String msg)
    {
        Toast.makeText (getApplicationContext(), msg, Toast.LENGTH_SHORT).show ();
    } 
     
    private void trace (String msg) 
    {
        toast (msg);
    }    
}


No exemplo apresentado o sistema ainda não efetua nenhuma tarefa, apensa exibe uma mensagem quando o usuário clicar em alguma das imagens, inclusive na imagem do DashBoard, mas o principal desse projeto é ensinar como criar criar esse tipo de layout.

Como resultado temos a seguinte imagem:



Abaixo seguem as imagens utilizadas nos botões: 


&nbsp;

 



Em breve estarei postando outros exemplos de Patterns.

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





Desenv com qualidade!