Saturday, September 12, 2015

Record-Review-Follow Apps Project Part 3


.

Prototype For Data Entry and List View
Record-Review-Follow Apps Project Part 3
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

.

No comments:

Post a Comment