El diseño del Dashboard es uno de los elementos clave que involucra al usuario con la funcionalidad de la aplicación. Proporciona información sobre la funcionalidad general de la aplicación en un solo lugar. El diseño del tablero es como poner todas las funciones de la aplicación en una sola página. El diseño del tablero requiere un poco de esfuerzo para elegir el tipo correcto de color, crear íconos (para no tener problemas de derechos de autor), colocar las cosas en la posición correcta de la pantalla, administrar la cuenta de usuario, etc. En este artículo, ha sido Discutimos cómo podemos implementar el hermoso tablero para la aplicación. Eche un vistazo a la siguiente imagen para tener una idea de toda la discusión.
Pasos para implementar Materialistic Modern Dashboard en Android
Paso 1: crear un proyecto de actividad vacío
- Estamos usando Android Studio para construir la aplicación, consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? , para saber cómo crear un proyecto de Android Studio de actividad vacía.
Paso 2: Agregar la dependencia requerida
- Agregue la siguiente dependencia de diseño de material al archivo gradle de nivel de aplicación. Y haga clic en el botón «Sincronizar ahora» que aparece en la esquina superior derecha.
- Asegúrese de que el sistema esté conectado a la red para que Android Studio pueda descargar todos los archivos necesarios.
implementación ‘com.google.android.material:material:1.2.1’
Nota: Antes de continuar, se sugiere crear sus propios íconos para no tener problemas de derechos de autor. Y agregue todas las imágenes e íconos a la carpeta dibujable.
Paso 3: trabajar con el archivo activity_main.xml
- En el diseño principal de la aplicación en sí, el tablero está diseñado (solo con fines de demostración).
- El siguiente diseño contiene los componentes de material design como cardview .
- Los elementos principales que deben invocarse son el título o logotipo de la empresa, el perfil del usuario, el botón de cierre de sesión, las características principales de la aplicación.
- El diseño del diseño del tablero depende del pensamiento y la creatividad del individuo, de cómo el desarrollador puede simplificar el tablero y presentar toda la funcionalidad de la aplicación en un solo lugar.
- Lo principal aquí es el diseño de restricciones que hace que la construcción de una interfaz de usuario compleja sea fácil para el desarrollador.
- Una cosa importante aquí es que la retroalimentación táctil en cada uno de los elementos es muy importante. Porque mejora la Experiencia de Usuario y además da confianza al usuario de que el elemento ha sido tocado.
- Consulte Efecto dominó en el botón de Android para saber cómo implementar los comentarios táctiles, es decir, el efecto dominó cuando se toca un elemento.
- La vista verde detrás del encabezado de texto GEEKSFORGEEKS se crea con el siguiente código. Que debe colocarse en la carpeta dibujable como nombre de archivo » custom_rectangle «.
XML
<?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>
- Invoque el siguiente código dentro del archivo activity_main.xml para implementar la interfaz de usuario. Que contiene toda la interfaz de usuario del tablero (es solo para fines de referencia. Sin embargo, uno puede diseñar la interfaz de usuario de acuerdo con su elección).
XML
<?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>
Interfaz de usuario de salida:
Paso 4: trabajar con el archivo MainActivity.kt
- Aquí, con fines de demostración, todos los elementos se manejan mediante el método OnClickListener, que muestra un mensaje de brindis al hacer clic en ellos.
- Sin embargo, en la implementación del mundo real para cada una de las vistas de tarjeta, se necesitan actividades separadas para crear e implementar las funcionalidades.
- Consulte el siguiente código y su salida para una mejor comprensión.
Kotlin
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()
}
}
}
Producción:
Enlace GitHub: https://github.com/AdityaShidlyali/Dashboard_design_GFG
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA