[Khóa học lập trình Android] Bài 05 Thiết kế giao diện ứng dụng Android

Đây là khóa học lập trình Android miễn phí với nội dung các bài học mạch lạc và dễ hiểu với những bài hướng dẫn lập trình ứng dụng Android cơ bản nhất. Nội dung phần hướng dẫn này trình bày thiết kế giao diện ứng dụng Android của ứng dụng Tra Cứu Thị Trường.

Nội dung phần hướng dẫn này trình bày thiết kế giao diện ứng dụng Android của ứng dụng Tra Cứu Thị Trường.

Phần thiết kế giao diện ứng dụng Android này chúng ta sẽ thiết kế giao diện chính của ứng dụng, nhưng trước hết bạn hãy xem qua mẫu thiết kế giao diện ứng dụng Android tra cứu thị trường.

Sau đây sẽ là phần mô tả chi tiết phần hướng dẫn thiết kế giao diện ứng dụng Android tra cứu thị trường tương tự như hình ảnh ví dụ trên.

Bước 1: Bạn mở tập tin build.gradle (Module:app) và thêm đoạn mã sau vào và nhấn vào Sync Now ở góc phải bên trên màn hình:

implementation 'com.android.support:cardview-v7:26.1.0'

Trong phần ứng dụng tra cứu thị trường bạn thấy mình chia bố cục thành các khung, mỗi khung là một CardView.

Nội dung toàn bộ tập tin build.gradle (Module:app) như sau:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.teamvietdev.tracuuthitruong"
        minSdkVersion 18
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:cardview-v7:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

Để tạo một CardView bạn sẽ sử dụng đoạn mã tương tự như sau:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
               style="@style/style_main_cardview_item_image"
               android:src="@drawable/icon_weather_x128" />
 
</android.support.v7.widget.CardView>

Bước 2: Tiếp theo, chúng ta sẽ thiết kế giao diện màn hình chính của chương trình với giao diện bao gồm các ô vuông tương ứng với mỗi ô là một danh mục cần tra cứu như hình ảnh ví dụ ở đầu bài viết.

Trong tập tin activity_main.xml bạn chỉnh sửa lại như sau:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

Trong tập tin content_main.xml bạn chỉnh sửa lại như sau:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                style="@style/style_main"
                android:layout_marginTop="5dp">

                <android.support.v7.widget.CardView
                    android:id="@+id/cvDiamond"
                    style="@style/style_main_cardview">

                    <LinearLayout style="@style/style_main_cardview_item">

                        <ImageView
                            style="@style/style_main_cardview_item_image"
                            android:src="@drawable/icon_diamond_x128" />

                        <TextView
                            style="@style/style_main_cardview_item_kind"
                            android:text="Kim cương" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:id="@+id/cvGold"
                    style="@style/style_main_cardview">

                    <LinearLayout style="@style/style_main_cardview_item">

                        <ImageView
                            style="@style/style_main_cardview_item_image"
                            android:src="@drawable/icon_gold_x128" />

                        <TextView
                            style="@style/style_main_cardview_item_kind"
                            android:text="Giá vàng" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

            </LinearLayout>

            <LinearLayout style="@style/style_main">

                <android.support.v7.widget.CardView
                    android:id="@+id/cvCurrency"
                    style="@style/style_main_cardview">

                    <LinearLayout style="@style/style_main_cardview_item">

                        <ImageView
                            style="@style/style_main_cardview_item_image"
                            android:src="@drawable/icon_currency_x128" />

                        <TextView
                            style="@style/style_main_cardview_item_kind"
                            android:text="Ngoại tệ" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:id="@+id/cvPetroleum"
                    style="@style/style_main_cardview">

                    <LinearLayout style="@style/style_main_cardview_item">

                        <ImageView
                            style="@style/style_main_cardview_item_image"
                            android:src="@drawable/icon_petroleum_x128" />

                        <TextView
                            style="@style/style_main_cardview_item_kind"
                            android:text="XĂNG DẦU" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

ScrollView sử dụng cuộn trang giúp hiển thị vượt quá giới hạn màn hình cần hiển thị. ImageView sử dụng để hiển thị hình ảnh và TextView giúp hiển thị nội dung cần hiển thị.

Bước 3: Bây giờ bạn mở tập tin style.xml nằm trong thư mục value và thêm đoạn mã sau vào, đây là đoạn mã giúp trình bày kích thước, màu sắc, kiểu chữ… hiển thị.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="style_main">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">150dp</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">horizontal</item>
    </style>

    <style name="style_main_cardview">
        <item name="android:layout_width">160dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:layout_margin">5dp</item>
        <item name="cardBackgroundColor">#FAFAFA</item>
        <item name="cardElevation">3dp</item>
    </style>

    <style name="style_main_cardview_item">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">vertical</item>
    </style>

    <style name="style_main_cardview_item_image">
        <item name="android:layout_width">70dp</item>
        <item name="android:layout_height">70dp</item>
        <item name="android:layout_marginTop">20dp</item>
    </style>

    <style name="style_main_cardview_item_kind">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_marginTop">10dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:textColor">#000000</item>
        <item name="android:textSize">16dp</item>
        <item name="android:textStyle">bold</item>
    </style>

</resources>

Mẫu giao diện bố cục trang giao diện sau khi thiết kế như sau:

Bạn vào lớp MainActivity.java xử lý như sau để bắt sự kiện khi nhấn vào CardView:

CardView cvDiamond = (CardView) findViewById(R.id.cvDiamond);

cvDiamond.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Diamond", Toast.LENGTH_SHORT).show();
      }
});

Xem nội dung chi tiết hướng dẫn trên Youtube:

Lời kết: Như vậy khóa học lập trình Android miễn phí được chia sẻ bởi Team Việt Dev hy vọng giúp bạn có thêm nhiều kiến thức cơ bản để tự xây dựng cho riêng mình một ứng dụng Android.

(Tác giả: Team Việt Dev)

Cập nhật lần cuối lúc 12:29 ngày 27 Tháng Mười Một, 2023

Post Views: 2.660

Nội dung liên quan

Tác giả

Bình luận