[Android] JSon trong Android – Part 3: Interface Design Old Lover
Hello everyone, in 2 Fortunately, we have tìm hiểu JSon and xuất JSon từ Database bằng Php, all is well. And in part 3 This, chúng ta sẽ đi thiết kế giao diện cho Old Lover – Ex-lover. 😉
Ứng dụng được thực hiện trên Android studio 1.3
compileSdkVersion 22
buildToolsVersion “22.0.1”
minSdkVersion 14
targetSdkVersion 22
Chúng ta cùng xem lại video về Old Lover để hình dung lại giao diện app.
Content
Cấu hình và các thứ cần thiết
First we will prepare something in build.gradle, string, drawable, color, style,… Of course in the process of doing is making himself more down to nowhere, but when written instructions, I shall give you all advance to avoid faulty or difficult manipulation.
Cấu hình build.gradle và AndroidManifest
File build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 22
buildToolsVersion "22.0.1"
defaultConfig {
applicationId "cachhoc.net.demojson"
minSdkVersion 14
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:22.0.+'
compile 'com.android.support:cardview-v7:22.0.+'
compile 'com.loopj.android:android-async-http:1.4.8'
compile 'com.wdullaer:materialdatetimepicker:1.4.2'
}
The notice you've taken some libraries like
- android.support:design service designed for Material, Toolbar, FloadActionButton,…
-
recyclerview and cardview serving as principal list
-
com.loopj.android:android-async-http library enables push or grab JSON manipulation between Android and Web. You can see more here: https://github.com/loopj/android-async-http
-
com.wdullaer:materialdatetimepicker datetime picker used as in video, see more at https://github.com/wdullaer/MaterialDateTimePicker
File AndroidManifest.xml
In the most important this is we grant access to the internet for applications.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cachhoc.net.demojson" >
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/old_lover"
android:theme="@style/AppTheme" >
<activity
android:name=".LoginActivity"
android:label="@string/old_lover"
android:windowSoftInputMode="adjustPan" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/old_lover" />
<activity
android:name=".RegisterActivity"
android:label="@string/title_activity_register" >
</activity>
<activity
android:name=".AddLoverActivity"
android:label="@string/title_activity_add_lover" >
</activity>
</application>
</manifest>
Color, String, Style
File res/values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--Indigo 500-->
<color name="primary">#3F51B5</color>
<!--Indigo 700-->
<color name="primary_dark">#303F9F</color>
<!--Pink 500-->
<color name="accent">#E91E63</color>
<color name="white">#FFFFFF</color>
<!-- for change color date picker-->
<color name="mdtp_accent_color">@color/primary</color>
<color name="mdtp_accent_color_dark">@color/primary_dark</color>
</resources>
File res/values/string.xml
His reason for the string that can be displayed to users in string.xml without the java code as it serves for creating multilingual app later.
<resources>
<string name="app_name">DemoJson</string>
<string name="refresh">Refresh</string>
<string name="name">Name Lover</string>
<string name="phone">Phone</string>
<string name="begin_date">Begin date</string>
<string name="end_date">End date</string>
<string name="nick_name">Nick name</string>
<string name="password">Password</string>
<string name="re_password">Re Password</string>
<string name="logout">Logout</string>
<string name="login">Login</string>
<string name="remember_me">Remember me</string>
<string name="login_success">Login success</string>
<string name="login_fail">Login fail</string>
<string name="register">Register</string>
<string name="reset">Reset</string>
<string name="register_success">Register success</string>
<string name="register_fail">Nick already exists</string>
<string name="add_success">Add success</string>
<string name="add_fail">Add fail</string>
<string name="wait">Please wait…</string>
<string name="add">Add</string>
<string name="no_lover">You not have old lover</string>
<string name="back_to_exit">Please click BACK again to exit</string>
<string name="enter_nick">Please enter your nick name</string>
<string name="enter_pass">Please enter your password</string>
<string name="enter_repass">Please re enter your password</string>
<string name="pass_not_match">Password not match</string>
<string name="old_lover">Old Lover</string>
<string name="title_activity_login">Login</string>
<string name="title_activity_register">Register</string>
<string name="title_activity_add_lover">Add Old Lover</string>
</resources>
File res/values/style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">@color/background_material_light</item>
</style>
<style name="MyAppDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
</resources>
The icon
The icon you can create using AndroidAssetStudio or you can download your icon set here.
Done necessities.
Thiết kế giao diện các activity
As you've seen, we will have 4 Main Activity: Login (Log in), Register (Registered), List Old Lover (List exes) and finally (Add) add.
For more activity you do in a single solution is right click the folder in java package layout or choose new -> Activity -> Black Activity. Meanwhile the xml file layout, java and the manifest are.
The file in res / layout
Toolbar thay cho Actionbar
Have you noticed in the above file style.xml, I have set the theme is Theme.AppCompat.Light.NoActionBar so the activity would not have actionbar. Instead I will use the Toolbar in package android.support.v7.widget to serve the interface design Material.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Activity Login
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="@+id/toolbar"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="@drawable/ic_launch" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/imageView"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_nick"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/nick_name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="@+id/cb_remember"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/remember_me" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<Button
android:id="@+id/btn_login"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/login" />
<Button
android:id="@+id/btn_register"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/register" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
You notice I use EditText in android.support.design.widget.TextInputLayout, this will help us create and hind hind EditText there will automatically run up on the 1 lable when it was forcus as in video.
Activity Register
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="@+id/toolbar"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="@drawable/ic_launch" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/imageView"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_nick"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/nick_name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_re_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/re_password"
android:inputType="textPassword"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_register"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/register" />
<Button
android:id="@+id/btn_reset"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/reset" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Activity Add Lover
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/toolbar"
android:orientation="vertical"
android:padding="10dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/name"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/phone"
android:textColor="@color/accent" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_begin_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/begin_date" />
<Button
android:id="@+id/btn_end_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/end_date" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/add" />
<Button
android:id="@+id/btn_reset"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
android:text="@string/reset" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Activity Main – List Old Lover
<RelativeLayout 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">
<include layout="@layout/toolbar" />
<LinearLayout
android:id="@+id/layout_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_notify"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_lover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/layout_progress"
android:scrollbars="vertical" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:src="@drawable/ic_add"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</RelativeLayout>
In this Activity we have 1 layout là layout_progress, it contains 1 ProgressBar to show “twisting” when loading data from the web, 1 TextView to error messages if an error. After the data load is complete, otherwise they will be hidden fault.
Also in this Activity we need the item for RecyclerView and 2 menu is logut and refresh
File res/layout/item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="@dimen/cardview_default_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/tv_begin_date"
android:text="@string/name"
android:textColor="@color/primary_text_default_material_light"
android:textSize="@dimen/abc_text_size_subhead_material" />
<TextView
android:id="@+id/tv_begin_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="3dp"
android:text="@string/begin_date"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/tv_end_date"
android:paddingTop="3dp"
android:text="@string/phone"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
<TextView
android:id="@+id/tv_end_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="3dp"
android:text="@string/end_date"
android:textColor="@color/secondary_text_default_material_light"
android:textSize="@dimen/abc_text_size_caption_material" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
File res/menu/menu_main.xml
<menu 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"
tools:context=".MainActivity">
<item
android:id="@+id/action_logout"
android:icon="@drawable/ic_logout"
android:orderInCategory="100"
android:title="@string/logout"
app:showAsAction="always" />
<item
android:id="@+id/action_refresh"
android:icon="@drawable/ic_refresh"
android:orderInCategory="100"
android:title="@string/refresh"
app:showAsAction="always" />
</menu>
So is the interface design is done. In the next section we will handle complete java application code.
Posts made in the tutorial JSon trong Android by nguyenvanquan7826
github it down some place like c folder or file down all the zip of the world n ?
Of, some place there to read more if you need only….
http://stackoverflow.com/questions/20377591/how-to-use-a-library-project-in-android-studio/20418060#20418060
to use this card, it is necessary that he impport library? Kids use (android studio)
You look at my first post configuration instructions I got you
To use this card (android.support.design.widget.TextInputLayout) should impport sir library? em dùng android studio
You look at my first post configuration instructions I got you