Today, I was supposed to add Empty States in Activities. I was going through various articles in internet and finally I found something amazing… Lottie Animations. Lots and lots of beautiful animations can be found here.
Here are the screenshots of today’s work.
For using Lottie, I went through official documentation by Airbnb. It’s fun working with this library. 😄
Today, I had was assigned the work to show the Filter FAB(Floating Action Bar) in Reservation History Activity where I had to show 3 options – Group by Date, Choose Date, Show All. I found an awesome library(Gowong Material-sheet-fab) for beautiful animation on click of FAB which opens a sheet containing three options.
Here ‘s the output:
To use this library, include the dependency in gradle file.
compile 'com.gordonwong:material-sheet-fab:1.2.1'
Here’s the layout file :
<com.reservation.restaurant.OtherClasses.Fab
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:backgroundTint="@color/colorPrimary"
app:srcCompat="@drawable/filter"
app:fabSize="normal" />
<!-- Overlay that dims the screen -->
<com.gordonwong.materialsheetfab.DimOverlayFrameLayout
android:id="@+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Circular reveal container for the sheet -->
<io.codetail.widget.RevealLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="end|bottom"
android:layout_margin="16dp"
android:orientation="vertical">
<!-- Sheet that contains your items -->
<android.support.v7.widget.CardView
android:id="@+id/fab_sheet"
style="@style/Widget.MaterialSheetFab.Sheet">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="@+id/grpByDate"
style="@style/LinearLayout.MaterialSheetFab.Sheet"
android:weightSum="1">
<ImageView
style="@style/Drawable.MaterialSheetFab.Sheet.Image"
android:layout_weight="0.1"
android:src="@drawable/calendar_sort_date"/>
<TextView
style="@style/TextAppearance.MaterialSheetFab.Sheet.Text"
android:text="Group by Date"
android:layout_weight="0.9"/>
</LinearLayout>
<LinearLayout
android:id="@+id/chooseDate"
style="@style/LinearLayout.MaterialSheetFab.Sheet"
android:weightSum="1">
<ImageView
style="@style/Drawable.MaterialSheetFab.Sheet.Image"
android:layout_weight="0.1"
android:src="@drawable/calendar_date"/>
<TextView
style="@style/TextAppearance.MaterialSheetFab.Sheet.Text"
android:text="Choose Date"
android:layout_weight="0.9"/>
</LinearLayout>
<LinearLayout
android:id="@+id/showAll"
style="@style/LinearLayout.MaterialSheetFab.Sheet"
android:weightSum="1">
<ImageView
style="@style/Drawable.MaterialSheetFab.Sheet.Image"
android:layout_weight="0.1"
android:src="@drawable/show_all"/>
<TextView
style="@style/TextAppearance.MaterialSheetFab.Sheet.Text"
android:text="Show All"
android:layout_weight="0.9"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</io.codetail.widget.RevealLinearLayout>
In Java, do the initialization as under.
grpByDate.setOnClickListener(this); chooseDate.setOnClickListener(this); showAll.setOnClickListener(this); View sheetView = findViewById(R.id.fab_sheet); View overlay = findViewById(R.id.overlay); int sheetColor = getResources().getColor(R.color.background_card); int fabColor = getResources().getColor(R.color.colorPrimary); materialSheetFab = new MaterialSheetFab<>(fab, sheetView, overlay, sheetColor, fabColor);
Today, I was assigned the task to implement the activity where admin can view the past reservations(both which are placed through Chatbot and Walk-Ins). I was supposed to show them in Tabbed activity which is nothing but View Pager which I implemented during Reservations Module. So, there was no difficulty in that.
Here’s the output:
The challenging part was that I had to show the Categories View Pager also, inside upper View Pager(Chatbot and Walk-Ins). I went through some sources in internet. I got some idea from them. I managed everything through fragments. Because of that I got more insight into Fragments, which had always been difficult for me to understand.
In the Reservation Activity, I created a view Pager with two tabs-
public class MyPagerAdapter extends FragmentStatePagerAdapter{
String[] titles = {"Chatbot", "WalkIns"};
SparseArray<Fragment> registeredFragments = new SparseArray<>();
public MyPagerAdapter(FragmentManager fm){
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment;
if(position == 0) {
fragment = FragmentResvTopViewPager.newInstance(listResvChatbot);
}
else {
fragment = FragmentResvTopViewPager.newInstance(listResvWalkIn);
}
registeredFragments.put(position, fragment);
return fragment;
}
@Override
public int getCount() {
return 2;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
public Fragment getRegisteredFragment(int position){
return registeredFragments.get(position);
}
}
Inside FragmentResvTopViewPager which is a subclass of Fragment, I created another View Pager Adapter-
public class ResvCategoriesAdapter extends FragmentStatePagerAdapter {
String[] titles;
SparseArray<Fragment> registeredFragments = new SparseArray<>();
public ResvCategoriesAdapter(FragmentManager fm){
super(fm);
titles = hashMapResv.keySet().toArray(new String[hashMapResv.size()]);
}
@Override
public Fragment getItem(int position) {
listResvCategory = wholeListResv.get(position);
Fragment fragment = CategoriesResvFragment.newInstance(listResvCategory);
registeredFragments.put(position, fragment);
return fragment;
}
@Override
public int getCount() {
return hashMapResv.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
public Fragment getRegisteredFragment(int position){
return registeredFragments.get(position);
}
}
Today, I was instructed to create an activity where admin can himself do the manual reservations(in case of Walks-Ins).
Firstly, I designed the layout for this activity. I used Wdullaer MaterialDateTimePicker. Here’s how it looks like:
To use it, add in the gradle file-
dependencies {
compile 'com.wdullaer:materialdatetimepicker:3.4.1'
}
The activity or fragment should implement OnTimeSetListener / OnDateSetListener.
@Override
public void onTimeSet(RadialPickerLayout view, int hourOfDay, int minute, int second) {
String time = "You picked the following time: "+hourOfDay+"h"+minute+"m"+second;
timeTextView.setText(time);
}
@Override
public void onDateSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth) {
String date = "You picked the following date: "+dayOfMonth+"/"+(monthOfYear+1)+"/"+year;
dateTextView.setText(date);
}
Today, I worked on Reservations Activity. In this activity my task was to show View Pager with two tabs (Reservation Requests and Active Reservations).
Here’s the output of my work:
I created two Fragments– Reservation Request and Active Reservations. In the activity, I created a subclass of FragmentStatePagerAdapter. Here it looks like:
myAdapter = new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(myAdapter);
tabLayout.setupWithViewPager(viewPager);
public class MyAdapter extends FragmentStatePagerAdapter{
String[] titles = {"Requests", "Active"};
SparseArray<Fragment> registeredFragments = new SparseArray<>();
public MyAdapter(FragmentManager fm){
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
if(position==0)
fragment = FragmentResvRequests.newInstance(listResvReq, getApplicationContext());
else if(position == 1)
fragment = FragmentActiveResv.newInstance(listActiveResv, getApplicationContext());
registeredFragments.put(position, fragment);
return fragment;
}
@Override
public int getCount() {
return 2;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
public Fragment getRegisteredFragment(int position){
return registeredFragments.get(position);
}
}
I just explored the thing which makes the most tough task in UI design, that easy, I have never thought off. In UI design Icons play very important role. I always used to struggle with the sizes of icons in different screens. Hard-coding the size of icons is a bad practice. Since I was not aware of Vector icons😃 , I was indulged into this practice.
Lot of things have become so easy with Vectors-
The best tutorial according to me about how to use vector icons, is given in Androidhive.
I implemented remaining functionalities of Floormap activity including Add Tables, Form Merge Combinations and View Merge Combinations.
Here are the screens:
Creating the merge combinations activity was little challenging since I had to show Grouped Recycler View.
At last, finished the Floormap Activity completey. 🙂
In the Floormap activity, I was planning to show the side menu with some great animation. Thanks to Yalantis Context-Menu. This is awesome context menu. Here’s my activity after adding this beautiful animated menu.
To use it, add in the gradle file-
compile 'com.yalantis:contextmenu:1.0.7'
I added the following code, in Floormap Activity to show the menu.
private void initMenuFragment() {
private ContextMenuDialogFragment;
MenuParams menuParams = new MenuParams();
menuParams.setActionBarSize(((int)getResources().getDimension(R.dimen.toolbar_height)));
menuParams.setMenuObjects(getMenuObjects());
//menu can be closed on touching non-button area menuParams.setClosableOutside(true);
menuParams.setAnimationDuration(100);
mMenuDialogFragment = ContextMenuDialogFragment.newInstance(menuParams); mMenuDialogFragment.setItemClickListener(this); mMenuDialogFragment.setItemLongClickListener(this);}
private List<MenuObject> getMenuObjects() { List<MenuObject> menuObjects = new ArrayList<>();
MenuObject close = new MenuObject();
Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.ic_cancel_white_36dp); drawable.setColorFilter(Color.parseColor("#FF5722"), PorterDuff.Mode.SRC_ATOP); close.setDrawable(drawable);
MenuObject merge = new MenuObject("Merge tables"); drawable = ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_call_merge_black_36dp); drawable.setColorFilter(Color.parseColor("#FF5722"), PorterDuff.Mode.SRC_ATOP); merge.setDrawable(drawable);
drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.ic_view_list_black_36dp); drawable.setColorFilter(Color.parseColor("#FF5722"), PorterDuff.Mode.SRC_ATOP); MenuObject viewComb = new MenuObject("View combinations"); viewComb.setDrawable(drawable);
drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.ic_add_black_36dp); drawable.setColorFilter(Color.parseColor("#FF5722"), PorterDuff.Mode.SRC_ATOP); MenuObject table = new MenuObject("Add Table"); table.setDrawable(drawable);
menuObjects.add(close); menuObjects.add(merge); menuObjects.add(viewComb); menuObjects.add(table);
return menuObjects;}
Today, I finished the work of Tables activity. I created a list of tables activity. There I provided the option of updation of table information.
I used a library from Github for the switch buttons, Zcweng SwitchButton. This is beautiful, lightweight, custom style easy switch widget for Android,minSdkVersion >= 11.
For using this, in the dependencies , write
dependencies {
compile 'com.github.zcweng:switch-button:0.0.3@aar'
}Layout for this switch button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <com.suke.widget.SwitchButton android:id="@+id/switch_button" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
workAday 