.
Prototype For Data Entry and List View
MOTIVE
This is the third part of Record-Review-Follow Apps Project.
This part adds the prototype for Data Entry and Data List View.
At this stage, the user is able to navigate between pages and see the UI for RECORD and REVIEW page.
1) Kickstart
2) Edit MainActivity.java to automatically shows Review Page (Page Index=1) when the apps starts.
...
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new ViewPagerController(getSupportFragmentManager(),
MainActivity.this));
// Give the TabLayout the ViewPager
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
// tab index ={0,1,2}
// display tab index 1
viewPager.setCurrentItem(1,false);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
...
|
TEST RUN.
3) Add Menu Item to show Record Page.
3.1) Add the action button.
File Name: res/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_add"
android:icon="@android:drawable/ic_menu_add"
android:orderInCategory="100"
app:showAsAction="always"
android:title="Add Person"
tools:ignore="AppCompatResource" />
</menu>
|
3.2) Add the action codes.
File Name: MainActivity.java
…
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_add) {
// tab index ={0,1,2}
// display tab index 1
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setCurrentItem(0,false);
return true;
}
return super.onOptionsItemSelected(item);
}
...
|
TEST RUN.
4) Modify Floating Action Button to show Record Page.
4.1) Edit the layout file to replace mail icon with plus icon.
File Name: res/layout/app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent"android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton android:id="@+id/fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_input_add" />
</android.support.design.widget.CoordinatorLayout>
|
4.2) Add the action codes to show the Record Page.
File Name: MainActivity.java
…
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// tab index ={0,1,2}
// display tab index 1
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setCurrentItem(0,false);
}
});
...
|
4.3) Add the action codes to hide Floating Action Button when the Record Page is shown.
File Name: MainActivity.java
…
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
switch(position){
case 0:
fab.hide();
default:
fab.show();
}
}
});
...
|
TEST RUN.
(When the user tap on either Action Button or Floating Action Button, the View switches to RECORD Page and the Floating Action Button disappear)
5) Add UI for REPORT Page.
File Name: res/layout/fragment_page1.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<ImageView
android:id="@+id/imgv_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nextFocusDown="@+id/etxt_name"
android:src="@drawable/person"/>
<EditText
android:id="@+id/etxt_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imgv_person"
android:ems="10"
android:hint="name"
android:nextFocusDown="@+id/etxt_icno"
android:singleLine="true" />
<EditText
android:id="@+id/etxt_icno"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etxt_name"
android:hint="icno"
android:nextFocusDown="@+id/etxt_mobileno"
android:singleLine="true" />
<EditText
android:id="@+id/etxt_mobileno"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etxt_icno"
android:nextFocusDown="@+id/etxt_rptdesc"
android:hint="mobile no"
android:inputType="phone"
android:singleLine="true" />
<EditText
android:id="@+id/etxt_rptdesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etxt_mobileno"
android:hint="description"
android:inputType="text"
android:singleLine="true" />
<EditText
android:id="@+id/etxt_rptdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etxt_rptdesc"
android:hint="report date"
android:inputType="text"
android:singleLine="true" />
<LinearLayout
android:id="@+id/layout_submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etxt_rptdate"
android:layout_margin="5dp"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:id="@+id/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="@+id/button_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Reset" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
|
TEST RUN.
6) Add UI for the REVIEW Page
6.1) Prepare Dummy Data
File Name: res/values/strings.xml
<resources>
<string name="app_name">RecordReviewFollow</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string-array name="dummy_data" >
<item>One</item>
<item>Two</item>
<item>Three</item>
<item>Four</item>
<item>Five</item>
<item>Six</item>
<item>Seven</item>
<item>Eight</item>
<item>Nine</item>
<item>Ten</item>
</string-array>
</resources>
|
6.2) Edit fragment layout
File Name: res/layout/fragment_page2.xml
<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:background="#EDEDED" >
<ListView
android:id="@+id/list_emp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#00000000"
android:dividerHeight="10dp"
android:drawSelectorOnTop="true"
android:footerDividersEnabled="false"
android:padding="10dp"
android:scrollbarStyle="outsideOverlay"
android:entries="@array/dummy_data"/>
</RelativeLayout>
|
TEST RUN.
DOWNLOAD
.
