O design do Dashboard é um dos elementos-chave que envolve o usuário com a funcionalidade do aplicativo. Ele fornece informações sobre a funcionalidade geral do aplicativo em um só lugar. O design do painel é como colocar todos os recursos do aplicativo em uma única página. Projetar o painel requer um pouco de esforço para escolher o tipo certo de cor, criar ícones (para não ter problemas de direitos autorais), colocar as coisas na posição certa da tela, gerenciar a conta do usuário, etc. Neste artigo, discutimos como podemos implementar o belo painel para o aplicativo. Dê uma olhada na imagem a seguir para ter uma ideia sobre toda a discussão.

Design da interface do usuário do painel no Android

Etapas para implementar o painel moderno materialista no Android

Etapa 1: Criar um projeto de atividade vazio

Etapa 2: adicionar a dependência necessária

  • Adicione a seguinte dependência de material design ao arquivo gradle de nível de aplicativo. E clique no botão “Sincronizar agora” que aparece no canto superior direito.
  • Certifique-se de que o sistema esteja conectado à rede para que o Android Studio possa baixar todos os arquivos necessários.

implementação 'com.google.android.material: material: 1.2.1'



Nota: Antes de prosseguir, sugere-se que você faça seus próprios ícones para não ter nenhum dos problemas de direitos autorais. E adicione todas as imagens e ícones à pasta drawable.

Etapa 3: Trabalhando com o arquivo activity_main.xml

  • No layout principal do próprio aplicativo, o painel é projetado (apenas para fins de demonstração).
  • O layout a seguir contém os componentes do material design, como o Cardview .
  • As principais coisas que devem ser invocadas são o título da empresa ou logotipo, o perfil do usuário, o botão de logout, as principais características do aplicativo.
  • Projetar o layout do Dashboard depende do pensamento e da criatividade do indivíduo, de como o desenvolvedor pode simplificar o dashboard e apresentar todas as funcionalidades do aplicativo em um só lugar.
  • O principal aqui é o layout de restrição que torna a construção de UI complexa facilmente para o desenvolvedor.
  • Uma coisa importante aqui é que o feedback tátil em cada um dos elementos é muito importante. Porque melhora a experiência do usuário e também dá confiança ao usuário de que o elemento foi tocado.
  • Consulte Efeito ondulante no botão Android para saber como implementar os feedbacks de toque, que são o efeito ondulante quando um elemento é tocado.
  • A visão verde por trás do título de texto GEEKSFORGEEKS é criada usando o código a seguir. Que precisa ser colocado na pasta drawable como nome de arquivo “ custom_rectangle “.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/green_500" />
    <corners
        android:bottomLeftRadius="24dp"
        android:bottomRightRadius="24dp" />
</shape>
  • Chame o seguinte código dentro do arquivo activity_main.xml para implementar a UI. Que contém toda a interface do usuário do painel (é apenas para fins de referência. No entanto, pode-se projetar a IU de acordo com sua escolha).
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e4e4e4"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:background="@drawable/custom_rectangle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <ImageButton
        android:id="@+id/backB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="?attr/selectableItemBackground"
        android:padding="8dp"
        android:src="@drawable/ic_back"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:gravity="center_horizontal"
        android:letterSpacing="0.025"
        android:text="GEEKSFORGEEKS"
        android:textColor="@color/white"
        android:textSize="28sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/backB"
        app:layout_constraintTop_toTopOf="parent" />
  
    <ImageButton
        android:id="@+id/logOutB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="?attr/selectableItemBackground"
        android:padding="8dp"
        android:src="@drawable/ic_logout"
        app:layout_constraintCircleRadius="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:elevation="12dp"
        app:cardCornerRadius="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">
  
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
  
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="FIRSTNAME LASTNAME"
                android:textAllCaps="true"
                android:textColor="@color/green_500"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
  
            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="College Name"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                app:layout_constraintStart_toStartOf="@+id/textView2"
                app:layout_constraintTop_toBottomOf="@+id/textView2" />
  
            <com.google.android.material.button.MaterialButton
                android:id="@+id/todoB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="8dp"
                android:text="TODO LIST"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent" />
  
            <com.google.android.material.button.MaterialButton
                android:id="@+id/editProfileB"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:text="EDIT PROFILE"
                android:textColor="@color/green_500"
                app:layout_constraintBottom_toBottomOf="@+id/todoB"
                app:layout_constraintStart_toEndOf="@+id/todoB" />
  
            <ImageButton
                android:id="@+id/profileB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:background="?attr/selectableItemBackground"
                android:padding="8dp"
                android:src="@drawable/profile"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
  
        </androidx.constraintlayout.widget.ConstraintLayout>
  
    </androidx.cardview.widget.CardView>
  
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:weightSum="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView">
  
        <androidx.cardview.widget.CardView
            android:id="@+id/contributeCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/write"
                    app:layout_constraintBottom_toTopOf="@+id/textView1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="CONTRIBUTE"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view1" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
        <androidx.cardview.widget.CardView
            android:id="@+id/practiceCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view20"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/practice"
                    app:layout_constraintBottom_toTopOf="@+id/textView20"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView20"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="PRACTICE"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view20" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
    </LinearLayout>
  
    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:weightSum="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">
  
        <androidx.cardview.widget.CardView
            android:id="@+id/learnCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view21"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/learn"
                    app:layout_constraintBottom_toTopOf="@+id/textView21"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView21"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="LEARN"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view21" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
        <androidx.cardview.widget.CardView
            android:id="@+id/interestsCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view22"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/interests"
                    app:layout_constraintBottom_toTopOf="@+id/textView22"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView22"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="INTERESTS"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view22" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
    </LinearLayout>
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:weightSum="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2">
  
        <androidx.cardview.widget.CardView
            android:id="@+id/helpCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginEnd="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view23"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/help"
                    app:layout_constraintBottom_toTopOf="@+id/textView23"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView23"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="HELP"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view23" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
        <androidx.cardview.widget.CardView
            android:id="@+id/settingsCard"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:layout_margin="8dp"
            android:layout_marginStart="16dp"
            android:clickable="true"
            android:elevation="12dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="8dp">
  
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <ImageView
                    android:id="@+id/image_view"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"
                    app:layout_constraintBottom_toTopOf="@+id/textView4"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
  
                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="SETTINGS"
                    android:textAllCaps="true"
                    android:textColor="@color/green_500"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image_view" />
  
            </androidx.constraintlayout.widget.ConstraintLayout>
  
        </androidx.cardview.widget.CardView>
  
    </LinearLayout>
  
</androidx.constraintlayout.widget.ConstraintLayout>

IU de saída:

Design da interface do usuário do painel no Android

Etapa 4: Trabalhar com o arquivo MainActivity.kt

  • Aqui, para fins de demonstração, todos os elementos são tratados usando o método OnClickListener, que exibe uma mensagem do sistema ao clicar neles.
  • No entanto, na implementação real do mundo real para cada uma das visualizações de cartão, as atividades separadas são necessárias para serem criadas e implementar as funcionalidades.
  • Consulte o código a seguir e sua saída para melhor compreensão.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageButton
import android.widget.Toast
import androidx.cardview.widget.CardView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // register all the ImageButtons with their appropriate IDs
        val backB: ImageButton = findViewById(R.id.backB)
        val logOutB: ImageButton = findViewById(R.id.logOutB)
        val profileB: ImageButton = findViewById(R.id.profileB)
  
        // register all the Buttons with their appropriate IDs
        val todoB: Button = findViewById(R.id.todoB)
        val editProfileB: Button = findViewById(R.id.editProfileB)
  
        // register all the card views with their appropriate IDs
        val contributeCard: CardView = findViewById(R.id.contributeCard)
        val practiceCard: CardView = findViewById(R.id.practiceCard)
        val learnCard: CardView = findViewById(R.id.learnCard)
        val interestsCard: CardView = findViewById(R.id.interestsCard)
        val helpCard: CardView = findViewById(R.id.helpCard)
        val settingsCard: CardView = findViewById(R.id.settingsCard)
  
  
        // handle each of the image buttons with the OnClickListener
        backB.setOnClickListener {
            Toast.makeText(this, "Back Button", Toast.LENGTH_SHORT).show()
        }
        logOutB.setOnClickListener {
            Toast.makeText(this, "Logout Button", Toast.LENGTH_SHORT).show()
        }
        profileB.setOnClickListener {
            Toast.makeText(this, "Profile Image", Toast.LENGTH_SHORT).show()
        }
  
  
        // handle each of the buttons with the OnClickListener
        todoB.setOnClickListener {
            Toast.makeText(this, "TODO LIST", Toast.LENGTH_SHORT).show()
        }
        editProfileB.setOnClickListener {
            Toast.makeText(this, "Editing Profile", Toast.LENGTH_SHORT).show()
        }
  
  
        // handle each of the cards with the OnClickListener
        contributeCard.setOnClickListener {
            Toast.makeText(this, "Contribute Articles", Toast.LENGTH_SHORT).show()
        }
        practiceCard.setOnClickListener {
            Toast.makeText(this, "Practice Programming", Toast.LENGTH_SHORT).show()
        }
        learnCard.setOnClickListener {
            Toast.makeText(this, "Learn Programming", Toast.LENGTH_SHORT).show()
        }
        interestsCard.setOnClickListener {
            Toast.makeText(this, "Filter your Interests", Toast.LENGTH_SHORT).show()
        }
        helpCard.setOnClickListener {
            Toast.makeText(this, "Anything Help you want?", Toast.LENGTH_SHORT).show()
        }
        settingsCard.setOnClickListener {
            Toast.makeText(this, "Change the settings", Toast.LENGTH_SHORT).show()
        }
    }
}

Saída:

Link do GitHub: https://github.com/AdityaShidlyali/Dashboard_design_GFG

Quer um ambiente mais competitivo e acelerado para aprender os fundamentos do Android?
Clique aqui para acessar um guia com curadoria exclusiva de nossos especialistas com o objetivo de torná-lo pronto para a indústria em nenhum momento!