[Android] Database for Android - P2 Creating interfaces
In the previous [Android] Database trong Android – P1 Tạo database I have guided you to create Database. This article I will guide you app creators of style Material Design.
Noted:
The script in this series I will write in English. However, it is my English writing style "translated from Vietnamese" so you will easily follow.
HERE: Android studio 1.2.2
Android SDK 5.1.1
Min SDK: 4.0 (Android 4.0 above will be used apps)
But you absolutely can do on Eclipse and the lower android
Content
In his application will use RecyclerView, CardView. You should read more if not clear about it:
RecyclerView in Android
CardView in Android
Step 1: Application Configuration
Here are some configuration necessary for creating applications.
First of all we need to configure the application in file build.gradle to be used support design library, recyclerview, cardview in part dependencies
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
}
Next is file AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cachhoc.net.tut.demodatabase" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".NoteActivity"
android:label="@string/title_activity_note" >
</activity>
</application>
</manifest>
We have 2 Activity, one that contains a list of notes MainActivity, one is NoteActivity to draft notes.
Have you noticed in the app's theme is @style/AppTheme, you open the file res/values/style.xml and edit theme to theme Material.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/primary</item>
<item name="android:textColor">@color/text_primary</item>
<item name="colorAccent">@color/primary</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">@color/primary</item>
<item name="android:textColorPrimary">@color/text_primary</item>
<item name="android:background">@color/white</item>
</style>
</resources>
Have you noticed we have 1 style là AppCompatAlertDialogStyle time for deleting notes, the theme dialog appears asking whether delete or not.
We also need to have the files string.xml and colors.xml (in res/values/) to contain strings and color for applications. If no, then you click to select new … to create file.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#4CAF50</color>
<color name="text_primary">#000000</color>
<color name="primary_dark">#388E3C</color>
<color name="accent">#FF4081</color>
<color name="white">#FFFFFF</color>
<color name="color_item_press">#81C784</color>
</resources>
<resources>
<string name="app_name">My Note</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="add">Add</string>
<string name="delete">Delete</string>
<string name="save">Save</string>
<string name="yes">Yes</string>
<string name="no">No</string>
<!-- -->
<string name="title_note">Title note</string>
<string name="content">Content</string>
<string name="title_activity_note">Create Note</string>
</resources>
Also we still need them ic_add, ic_save, ic_delete, ic_launcher for apps, and very easily we can create and search in Android Asset Studio or see instructions for creating icons in Android Asset Studio if you are not clear.
That job application configuration that we're done.
Step 2: Interface Design
Design main acitivity
First is activity_main, including a RecyclerView contains a list of note, and 1 Float Action Button to make notes.
<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">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
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>
Have you noticed when creating FloatingActionButton required app:border width =”0dp” otherwise the machine will display some are square, not round.
Color of FloatingActionButton is colorAccent the theme file defined in style.xml. You can also change it by setting background.
Design item in the list
Next we need to create skins for 1 item in the list. It will include 2 the title and content line (title and content of the notes). Chúng sẽ được đặt trong CardView để có giao diện đẹp hơn 🙂
<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/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="3dp"
card_view:cardCornerRadius="1dp">
<LinearLayout 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:background="@drawable/backgroud_item_note"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:text="@string/title_note"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:text="@string/content"
android:textSize="13sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
android:lines=”1″ and android:Ellipse =”than” helps each item only 1 title line and 1 line content. If the title or content, it will cut long and extra spaces 3 dot behind.
We need to create file backgroud_item_note.xml in res/drawable/ background for item dogs. It allows for the background color of the item when clicking and when not click.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/color_item_press" android:state_pressed="true"/>
<item android:drawable="@color/white" android:state_pressed="false"/>
</selector>
Interface Design Drafting note
Finally, we need to design the interface when writing notes. The interface will include 2 EditText for the title and content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<EditText
android:id="@+id/edit_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:gravity="center_vertical"
android:hint="@string/title_note"
android:padding="5dp"
android:textSize="18sp"
android:textStyle="bold" />
<EditText
android:id="@+id/edit_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="start"
android:hint="@string/content"
android:padding="5dp"
android:textSize="18sp" />
</LinearLayout>
In addition we also have 2 delete and save menu is designed for file res/menu/menu_note.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_delete"
android:icon="@drawable/ic_delete"
android:orderInCategory="100"
android:title="@string/delete"
app:showAsAction="always" />
<item
android:id="@+id/menu_save"
android:icon="@drawable/ic_save"
android:orderInCategory="100"
android:title="@string/save"
app:showAsAction="always" />
</menu>
In part 2 This alone created to guide you and coding java interface perfection always seem to come here but also long term but also a bit tired hand so part of your java code will rendezvous in part 3 nhé.
Posts made in the tutorial Database trong Android by nguyenvanquan7826
His e ask is how to give floatingactionbutton in 1 fragment ? code trong Fragment
public class AddNoteFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View viewAddNote= inflater.inflate(R.layout.fragment_main_add_note, null);
return viewAddNote ;
}
}
Error :
android.view.InflateException: Binary XML file line #11: Error inflating class android.support.design.widget.FloatingActionButton at android.view.LayoutInflater.createView(LayoutInflater.java:633)
You give xml code of FAB fragment corresponding to that đk.
e to right that has not been .. he may be no bar for e Teamview him ….
You contact fb / nguyenvanquan7826 nhé
If you have not yet contacted fb.com/nguyenvanquan7826 đk nhé.