The importance of user interface (UI) in Android app development cannot be overstated. All visual elements that the user experiences determine the overall satisfaction of the app, so an appropriate UI arrangement is essential. In this context, Google’s Material Design library helps provide a robust and consistent user experience.
1. What is Material Design?
Material Design is a design system proposed by Google in 2014, based on the manipulation and holistic feel of the physical world. It includes elements that provide a sense of physicality and facilitate interaction with the user.
Material Design has the following key principles:
- Functionality: The user interface should be intuitive and easy for users to operate.
- Flexibility: It must operate consistently across various devices and immediately adapt to changes in screen size.
- Emotion: Users should have a positive experience when interacting with the device.
2. Setting Up Material Library
To develop an app using Material Design elements, you first need to add the Material library in the project’s build.gradle file. Add the following code:
dependencies {
implementation 'com.google.android.material:material:1.4.0'
}Now you are ready to use Material elements. You can create a new project through Android Studio and start by modifying the default layout file.
3. Using Material Design Components
3.1 Button
Buttons are one of the most commonly used UI elements. Material Design buttons come in default, emphasized, or outline styles. Typically, you declare a button using MaterialButton.
<com.google.android.material.button.MaterialButton
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
app:cornerRadius="24dp"
app:backgroundTint="@color/colorPrimary"/>3.2 Card
Cards are used to highlight content blocks. In Material Design, you can easily configure cards using CardView.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="4dp"
app:cardCornerRadius="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello Card!"
android:padding="16dp"/>
</androidx.cardview.widget.CardView>3.3 Dialog
Dialogs are very useful for providing information or receiving input from users. In Material Design, you can create dialogs using MaterialAlertDialogBuilder.
new MaterialAlertDialogBuilder(this)
.setTitle("Title")
.setMessage("Message content")
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// Yes button clicked
}
})
.setNegativeButton("Cancel", null)
.show();4. Layout Composition
Now let’s connect the elements used above. Here is an example of the main layout file for a simple Material Design app:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"/>
</androidx.appcompat.widget.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Material Design App"
android:textSize="24sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>5. Development and Execution
Now that we have structured all the UI elements, let’s implement events such as button clicks while logging.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MaterialButton myButton = findViewById(R.id.my_button);
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Button Clicked!", Toast.LENGTH_SHORT).show();
}
});
}
}
5.1 Running the App
To run the app, click the “Run” button in Android Studio. Verify that the layout and button you set up appear correctly. A message saying “Button Clicked!” should be displayed when the button is clicked.
6. Conclusion
In this tutorial, we explored how to develop an Android app using Java and how to structure the screen with the Material Design library. Material Design helps enhance user experience and allows easy use of various components. Actively incorporate Material Design into your app development!