Design da interface do usuário do painel no Android
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.
Etapas para implementar o painel moderno materialista no Android
Etapa 1: Criar um projeto de atividade vazio
- Estamos usando o Android Studio para construir o aplicativo, consulte Android | Como criar / iniciar um novo projeto no Android Studio? , para saber como criar um projeto Android Studio de atividade vazia.
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:
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
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva