android

Read more about the article Implementing Timeline for Attendees Activity in Organizer App

Implementing Timeline for Attendees Activity in Organizer App

Open Event Organizer App offers the functionality to Checkin/checkout attendees but the Organizer was unable to view when a particular attendee was checkin or checkout. We decided to implement a feature to view the timeline of checkin/checkout for each attendee. Let’s begin by adding the dependency in build.gradle. implementation "com.github.vipulasri:timelineview:"1.0.6" In the recyclerview item layout add the TimeLineView layout. Following are some of the useful attributes. app:markerInCenter - This defines the position of the round marker within the layout. Setting it to true, position it in center. app:marker - Custom drawables can be set as marker. <com.github.vipulasri.timelineview.TimelineView android:id="@+id/time_marker" android:layout_width="wrap_content" android:layout_height="match_parent" app:marker="@drawable/ic_marker_active" app:line="#aaa4a4" app:lineSize="2dp" app:linePadding="3dp" app:markerInCenter="true" app:markerSize="20dp" /> The ViewHolder class will extend the RecyclerView,ViewHolder class. In the constructor, we will add a parameter viewType and then set it to TimeLine Marker layout using method initLine. public CheckInHistoryViewHolder(CheckInHistoryLayoutBinding binding, int viewType) { super(binding.getRoot()); this.binding = binding; binding.timeMarker.initLine(viewType); } In RecyclerViewAdapter, we will override the getItemViewType() method. Here we will use the getTimeLineViewType method which takes in position and total size of the recycler view list and returns a TimeLineView type object. @Override public int getItemViewType(int position) { return TimelineView.getTimeLineViewType(position, getItemCount()); } References TimeLineView library by VipulAsri https://github.com/vipulasri/Timeline-View Android Documentation for RecyclerViewAdapter https://developer.android.com/reference/android/support/v7/widget/RecyclerView.Adapter Android Documentation for RecyclerViewView https://developer.android.com/reference/android/support/v7/widget/RecyclerView

Continue ReadingImplementing Timeline for Attendees Activity in Organizer App
Read more about the article Adding List Preference Settings using Preference Fragment Compat

Adding List Preference Settings using Preference Fragment Compat

In this blog post we will see how we can add a Preference List in Settings which will display a list of radio buttons in UI which user can choose from. In Open Event Orga App, the Organizer had a choice to switch between viewing Net Sales or Gross Sales in the App’s Dashboard. We decided to use a preference list to allow the user to select between using Net or Gross Sales. The benefit of using Preference List and not any other storage media (like SQLite) to store the information is that, Preference List stores the information as key-value pair in SharedPreferences which makes it easy to store and extract small amount of data with strong consistency guarantees and using less time. Let’s move on to the implementation. Implementation Firstly add the dependency in build.gradle. implementation "com.takisoft.fix:preference-v7:27.1.0.0" In the preferences layout file, we will use checkboxes. <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"> <CheckBoxPreference android:key="@string/gross_sales_key" android:title="@string/gross_sales" android:defaultValue="true" /> <CheckBoxPreference android:key="@string/net_sales_key" android:title="@string/net_sales" android:defaultValue="false" /> </PreferenceScreen> We will create SalesDataSettings class which extends PreferenceFragmentCompat and override onCreatePreferenceFix method. We will request PreferenceManager and set SharedPreferencesName. The manager will be used to store and retrieve key-value pairs from SharedPreferences. Using setPreferencesFromResource we will attach the layout file to the fragment. PreferenceManager manager = getPreferenceManager(); manager.setSharedPreferencesName(Constants.FOSS_PREFS); setPreferencesFromResource(R.xml.sales_data_display, rootKey); We are using CheckBox Preferences and modifying their behaviour to work as a Radio Preference List because Radio reference is not provided by Android. We are initializing two checkboxes and attaching a preference listener to unset all other checkboxes which one is selected. CheckBoxPreference netSales = (CheckBoxPreference) findPreference(NET_SALES); CheckBoxPreference grossSales = (CheckBoxPreference) findPreference(GROSS_SALES); Preference.OnPreferenceChangeListener listener = (preference, newValue) -> { String key = preference.getKey(); switch (key) { case GROSS_SALES: netSales.setChecked(false); break; case NET_SALES: grossSales.setChecked(false); break; default: break; } return (Boolean) newValue; }; netSales.setOnPreferenceChangeListener(listener); grossSales.setOnPreferenceChangeListener(listener); We can load SalesDataDisplay Fragment class when a preference button is clicked using fragment transactions as shown below. findPreference(getString(R.string.sales_data_display_key)).setOnPreferenceClickListener(preference -> { getFragmentManager().beginTransaction() .replace(R.id.fragment_container, SalesDataSettings.newInstance()) .addToBackStack(null) .commit(); return true; }); References Shared Preferences Documentation https://developer.android.com/reference/android/content/SharedPreferences Gericop Takisoft Android-Support-Preference-V7-Fix https://github.com/Gericop/Android-Support-Preference-V7-Fix Codebase for Open Event Organizer App https://github.com/fossasia/open-event-orga-app

Continue ReadingAdding List Preference Settings using Preference Fragment Compat
Read more about the article Performing Database Migrations using DbFlow

Performing Database Migrations using DbFlow

In Open Event Organizer Android App we decided to add database migrations for every change in database while development. Two of the reasons behind this - The users have some version of the app installed and then during development the developers had to modify the database, let’s say, add a table or modify existing ones. This makes the existing database incompatible with the new app. On adding database migration the upgradation of database takes place automatically and prevent the situation of reinstalling the app. Migrations makes it possible to rollback or upgrade to some particular database state. Thus, help in debugging certain changes in isolation. Let’s discuss the implementation details. Consider the scenario when a user adds a new table named SpeakersCall. For creating migration for this change we need to add migration class inside OrgaDatabase class annotated with @Database. We will break it down to look closely at each step. Use @Migration annotation in DbFlow library and specify the new database version (by incrementing the existing version) and the database class. Extend BaseMigration and override migrate method. The logic used inside the migrate method can be different for different tasks. In the present case we first need to delete any existing table (if exists) with the name SpeakersCall and then recreate that table in database. Create an array of java classes which are created/modified. We wrap the SQL query inside a Database Wrapper class which prevents it from running recursively. FlowManager uses reflection to look up and construct the generated database holder class used in defining the structure for all databases used in this application. So we will getModelAdapter for the class to be recreated and use creation query returned by Model Adapter and execute it. @Migration(version = 15, database = OrgaDatabase.class) public static class MigrationTo15 extends BaseMigration { @Override public void migrate(@NonNull DatabaseWrapper databaseWrapper) { Timber.d("Running migration for DB version 14"); Class<?>[] recreated = new Class[] {SpeakersCall.class}; for (Class<?> recreate: recreated) { ModelAdapter modelAdapter = FlowManager.getModelAdapter(recreate); databaseWrapper.execSQL(DROP_TABLE + modelAdapter.getTableName()); databaseWrapper.execSQL(modelAdapter.getCreationQuery()); } } } Similarly, we can write migration for changing a column of table(s).

Continue ReadingPerforming Database Migrations using DbFlow
Read more about the article Testing the ViewModels in Open Event Organizer App

Testing the ViewModels in Open Event Organizer App

In Open Event Organizer Android App we follow Test Driven Development Approach which means the features added in the app are tested thoroughly by unit tests. More tests would ensure better code coverage and fewer bugs. This blog explains how to write tests for Viewmodel class in MVVM architecture. Specifications We will use JUnit4 to write unit tests and Mockito for creating mocks. The OrdersViewModel class returns the list of Order objects to the Fragment class. The objects are requested from OrderRepository class which fetches them from Network and Database. We will create a mock of OrderRepository class since it is out of context and contain logic that doesn’t depend on Orders Respository. Below is the getOrders method that we will test.  public LiveData<List<Order>> getOrders(long id, boolean reload) { if (ordersLiveData.getValue() != null && !reload) return ordersLiveData; compositeDisposable.add(orderRepository.getOrders(id, reload) .compose(dispose(compositeDisposable)) .doOnSubscribe(disposable -> progress.setValue(true)) .doFinally(() -> progress.setValue(false)) .toList() .subscribe(ordersLiveData::setValue, throwable -> error.setValue(ErrorUtils.getMessage(throwable).toString()))); return ordersLiveData; } We will be using InstantTaskExecutorRule() which is a JUnit Test Rule that swaps the background executor used by the Architecture Components with a different one which executes each task synchronously. We will use setUp() method to load the RxJavaPlugins, RxAndroid plugins and reset them in tearDown method which will ensure each test runs independently from the other and avoid memory leaks. After doing this initialization and basic setup for tests we can begin code the method shouldLoadOrdersSuccessfuly() to test the getOrders method present in ViewModel class. Let’s see the step by step approach. Use Mockito.when to return Observables one by one from ORDERS_LIST whenever the method getOrders of the mock orderRepository is called. We will use Mockito.InOrder and pass orders, orderRepository and progress to check if they are called in a particular order. We will use .observeForever method to observe on LiveData objects and add a ArrayList on change. Finally, we will test and verify if the methods are called in order. @Test public void shouldLoadOrdersSuccessfully() { when(orderRepository.getOrders(EVENT_ID, false)) .thenReturn(Observable.fromIterable(ORDERS_LIST)); InOrder inOrder = Mockito.inOrder(orders, orderRepository, progress); ordersViewModel.getProgress().observeForever(progress); orders.onChanged(new ArrayList<>()); ordersViewModel.getOrders(EVENT_ID, false); inOrder.verify(orders).onChanged(new ArrayList<>()); inOrder.verify(orderRepository).getOrders(EVENT_ID, false); inOrder.verify(progress).onChanged(true); inOrder.verify(progress).onChanged(false); } Similar approach can be followed for writing tests to check other behaviour of the ViewModel. References Official Documentation for testing. https://developer.android.com/reference/android/arch/core/executor/testing/InstantTaskExecutorRule Official Documentation for JUnit.  https://junit.org/junit4/ Official documentation for Mockito.  http://site.mockito.org/ Open Event Organizer App codebase.  https://github.com/fossasia/open-event-orga-app

Continue ReadingTesting the ViewModels in Open Event Organizer App
Read more about the article Swipe to Check In/Out in Open Event Organizer App

Swipe to Check In/Out in Open Event Organizer App

Open Event Organizer App didn’t provide any option for the Event Organizer to view the list of Attendees present under an Order and check them in/out the event. Therefore, we designed a system such that the Organizer can just swipe the attendee present under an order to check them in or out. In this blog post, I will discuss how we implemented this functionality in Open Event Organizer App without using any third party libraries. Specifications We will create a separate class SwipeController.java which extends ItemTouchHelper.SimpleCallback and provide the swiping functionalities to our plain old recyclerview. We will call the super constructor with ItemTouchHelper.LEFT and ItemTouchHelper.RIGHT as arguments to provide left as well as right movements in each recyclerview list item. The bitmaps and paint object initialized here will be used later in onDraw. public SwipeController(OrderDetailViewModel orderDetailViewModel, OrderAttendeesAdapter orderAttendeesAdapter, Context context) { super(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT); this.orderDetailViewModel = orderDetailViewModel; this.orderAttendeesAdapter = orderAttendeesAdapter; closeIcon = BitmapFactory.decodeResource(context.getResources(), R.drawable.close); doneIcon = BitmapFactory.decodeResource(context.getResources(), R.drawable.done); paintGreen.setColor(context.getResources().getColor(R.color.light_green_500)); paintRed.setColor(context.getResources().getColor(R.color.red_500)); } Next, we will override getMovementFlags method. This method decides the allowed movement directions for each recyclerview item. The deciding logic is that, if an attendee is checked in then the allowed movement is left to check out and if an attendee is checked out then the allowed movement is right to check in. If neither of the above case, then both movements are allowed. @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags = 0; If (orderDetailViewModel.getCheckedInStatus( viewHolder.getAdapterPosition()) == null) makeMovementFlags(dragFlags, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT); if (orderDetailViewModel.getCheckedInStatus( viewHolder.getAdapterPosition())) { return makeMovementFlags(dragFlags, ItemTouchHelper.LEFT); } else { return makeMovementFlags(dragFlags, ItemTouchHelper.RIGHT); } } The onChildDraw method involves the code doing actual drawing. The variables used in code are discussed below. ActionState - Checks the state of the recycler view item. We proceed with the below logic if the item is being swiped. dX - The distance by which the item is swiped. Positive for left and negative for right. Background - Background of the viewholder. Rectangular in shape and dimensions changed with change in dX. IconDest - Calculates the position where the icons (close icon or done icon) is placed in canvas Canvas - Java Canvas on which the drawing is done. We set the background and draw the bitmaps on their location in canvas. @Override public void onChildDraw(Canvas canvas, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) { View itemView = viewHolder.itemView; float height = (float) itemView.getBottom() - (float) itemView.getTop(); float width = height / 3; RectF background; Paint paint; Bitmap icon; RectF iconDest; if (dX > 0) { background = new RectF((float) itemView.getLeft(), (float) itemView.getTop(), dX, (float) itemView.getBottom()); paint = paintGreen; icon = doneIcon; iconDest = new RectF((float) itemView.getLeft() + width, (float) itemView.getTop() + width, (float) itemView.getLeft() + 2 * width, (float) itemView.getBottom() - width); } else { background = new RectF((float) itemView.getRight() + dX, (float) itemView.getTop(), (float) itemView.getRight(), (float) itemView.getBottom()); paint = paintRed; icon = closeIcon; iconDest = new RectF((float) itemView.getRight() - 2 * width, (float) itemView.getTop() +…

Continue ReadingSwipe to Check In/Out in Open Event Organizer App
Read more about the article Showing Order Details in Eventyay Organizer Android App

Showing Order Details in Eventyay Organizer Android App

In Open Event Organizer App, the organizer was not able to view the details for the Orders received from attendees for his/her events. So in this blog we’ll see how we implemented this functionality in the Orga App. Specifications There is a fragment showing the list of all orders for that event. The user will be able to click on order from the list which will then take the user to another fragment where Order details will be displayed. We will be following MVVM architecture to implement this functionality using REST API provided by Open Event Server. Let’s get started. Firstly, we will create Order Model class. This contains various fields and relationship attributes to setup the table in database using RazizLabs DbFlow annotations. Then, We will make a GET request to the server using Retrofit 2  to fetch Order object. @GET("orders/{identifier}?include=event") Observable<Order> getOrder(@Path("identifier") String identifier); The server will return the Order details in form of a Order object and then we will save it in local  database so that when there is no network connectivity then also we can show data to the user and user can refresh to fetch the latest data from network. The network observable handles fetching data from network and disk observable handles saving data in local database. @NonNull @Override public Observable<Order> getOrder(String orderIdentifier, boolean reload) { Observable<Order> diskObservable = Observable.defer(() -> repository .getItems(Order.class, Order_Table.identifier.eq(orderIdentifier)).take(1) ); Observable<Order> networkObservable = Observable.defer(() -> orderApi.getOrder(orderIdentifier) .doOnNext(order -> repository .save(Order.class, order) .subscribe())); return repository .observableOf(Order.class) .reload(reload) .withDiskObservable(diskObservable) .withNetworkObservable(networkObservable) .build(); } Now, we will make a Fragment class that will bind the layout file to the model in the onCreateView method using DataBindingUtil. Further, we will be observing on ViewModel to reflect changes of Order, Progress and Error objects in the UI in the onStart method of the Fragment. public class OrderDetailFragment extends BaseFragment implements OrderDetailView { @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { binding = DataBindingUtil.inflate(inflater, R.layout.order_detail_fragment, container, false); orderDetailViewModel = ViewModelProviders.of(this, viewModelFactory).get(OrderDetailViewModel.class); return binding.getRoot(); } @Override public void onStart() { super.onStart(); setupRefreshListener(); orderDetailViewModel.getOrder(orderIdentifier, eventId, false).observe(this, this::showOrderDetails); orderDetailViewModel.getProgress().observe(this, this::showProgress); orderDetailViewModel.getError().observe(this, this::showError); } } Next, we will create OrderDetailsViewModel.This is the ViewModel class which interacts with the repository class to get data and the fragment class to show that data in UI. Whenever the user opens Order details page, the method getOrder() twill be called which will request an Order object from OrderRepository, wrap it in MutableLiveData and provide it to Fragment. Using MutableLiveData to hold the data makes the data reactive i.e. changes in UI are reflected automatically when the object changes. Further, we don’t have to worry handling the screen rotation as LIveData handles it all by itself.   public LiveData<Order> getOrder(String identifier, long eventId, boolean reload) { if (orderLiveData.getValue() != null && !reload) return orderLiveData; compositeDisposable.add(orderRepository.getOrder(identifier, reload) .compose(dispose(compositeDisposable)) .doOnSubscribe(disposable -> progress.setValue(true)) .doFinally(() -> progress.setValue(false)) .subscribe(order -> orderLiveData.setValue(order), throwable -> error.setValue(ErrorUtils.getMessage(throwable)))); if (!reload) { getEvent(eventId); } return orderLiveData; } } References Codebase for Open Event Orga App https://github.com/fossasia/open-event-orga-app Official documentation for LiveData Architecture Component…

Continue ReadingShowing Order Details in Eventyay Organizer Android App
Read more about the article Using Contextual Action Bar as Selection Toolbar

Using Contextual Action Bar as Selection Toolbar

In Open Event Android Organizer App we were using Android Action Bar as Toolbar to allow deleting and editing of the list items but this implementation was buggy and not upto the industry standards. So we decided to implement this using Contextual Action Bar as a selection toolbar. Specifications We are using MVP Architecture so there will be Fragment class to interact with the UI and Presenter class to handle all the business logic and interact with network layer. The SessionsFragment is the Fragment class for displaying List of Sessions to the user. We can long press any item to select it, entering into contextual action bar mode. Using this we will be able to select multiple items from list by a click and delete/edit them from toolbar. To enter in Contextual Action Bar Mode use ActionMode actionMode = getActivity().startActionMode(actionCallback); To exit Contextual Action Bar Mode use if (actionMode != null) actionMode.finish(); We will implement Action.Callback interface in out fragment class. It’s contains three method declarations - onCreateActionMode - This method is executed when the contextual action bar is  created. We will inflate the toolbar menu using MenuInflator and set new status bar color. onPrepareActionMode - This method is executed after onCreateActionMode and also whenever the Contextual Action Bar is invalidated so we will set the visibility of delete button in toolbar here and return true to ignify that we have made some changes. onActionItemClicked - This method is executed whenever a menu item in toolbar is clicked. We will call the function showDeleteDialog. onDestroyActionMode - This method is executed whenever user leaves the contextual action bar mode by pressing back button on toolbar or back button in keyboard etc. Here we will make unselect all the selected list items and the status bar color. public ActionMode.Callback actionCallback = new ActionMode.Callback() { @Override public boolean onCreateActionMode(ActionMode mode, Menu menu) { MenuInflater inflater = mode.getMenuInflater(); inflater.inflate(R.menu.menu_sessions, menu);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { statusBarColor = getActivity().getWindow().getStatusBarColor(); getActivity().getWindow().setStatusBarColor(getResources().getColor(R.color.color_top_surface)); } return true; }@Override public boolean onPrepareActionMode(ActionMode mode, Menu menu) { MenuItem menuItemDelete = menu.findItem(R.id.del); MenuItem menuItemEdit = menu.findItem(R.id.edit); menuItemEdit.setVisible(editMode); menuItemDelete.setVisible(deletingMode); return true; } @Override public boolean onActionItemClicked(ActionMode mode, MenuItem item) { switch (item.getItemId()) { case R.id.del: showDeleteDialog(); break; case R.id.edit: getPresenter().updateSession(); break; default: return false; } return false; } @Override public void onDestroyActionMode(ActionMode mode) { actionMode = null; getPresenter().resetToolbarToDefaultState(); getPresenter().unselectSessionList(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { //return to "old" color of status bar getActivity().getWindow().setStatusBarColor(statusBarColor); } } }; The showDeleteDialog method shows a AlertDialog to the user before deleting the selected items in the list. User can click on Ok to delete the items or on Cancel to close the dialog. public void showDeleteDialog() { if (deleteDialog == null) deleteDialog = new AlertDialog.Builder(context) .setTitle(R.string.delete) .setMessage(String.format(getString(R.string.delete_confirmation_message), getString(R.string.session))) .setPositiveButton(R.string.ok, (dialog, which) -> { getPresenter().deleteSelectedSessions(); }) .setNegativeButton(R.string.cancel, (dialog, which) -> { dialog.dismiss(); }) .create();deleteDialog.show(); } When user presses Ok then we call the method deleteSelectedSessions in presenter to delete the sessions. Resources Offical doumentation for Contextual Action Bar by Google https://developer.android.com/guide/topics/ui/menus#CAB Official Documentation for Alert Dialog by Google https://developer.android.com/guide/topics/ui/dialogs Codebase…

Continue ReadingUsing Contextual Action Bar as Selection Toolbar
Read more about the article Share Events in the Open Event Organizer Android App

Share Events in the Open Event Organizer Android App

In the Open Event Organizer Android App, after creating an event the organizer was unable to share it. We handled this challenge and came up with options to share Event with other social media apps. Along with that user can send Email to users containing event description with just a click. All this through a UI that our user will love interacting with. Let’s see how we implemented this. Specifications We designed a UI given below which offer four functionalities to the user in a single screen. The Event Name and Date are shown in the CardView. User can copy Event External URL by clicking on Copy URL option. User can send Email containing information about the Event like ( Name, Description, Starting and Ending Date-Time for the Event) via Email by clicking on Email option. User can share the same information described in point three via other social media/chatting apps etc by clicking on many more option. The is the Event Model class ia a POJO containing the associated attributes. We will use Retrofit to fetch Event object from server through a GET request in EventApi class. @GET("events/{id}?include=tickets") Observable<Event> getEvent(@Path("id") long id); Then we will use the getEvent method of EventRepositoryImpl class to make the request for us using EventApi class and then pass on the Response Event object to the ViewModel by wrapping it in RxJava Observable. We are accepting a boolean field named reload which decdes whether we need to reuse the existing Event object from Local Database  or fetch a new object from server. @Override public Observable<Event> getEvent(long eventId, boolean reload) { Observable<Event> diskObservable = Observable.defer(() -> repository .getItems(Event.class, Event_Table.id.eq(eventId)) .filter(Event::isComplete) .take(1) ); Observable<Event> networkObservable = Observable.defer(() -> eventApi .getEvent(eventId) .doOnNext(this::saveEvent)); return repository.observableOf(Event.class) .reload(reload) .withDiskObservable(diskObservable) .withNetworkObservable(networkObservable) .build(); } In ShareEventVewModel, we are calling the getEvent from EventRepositoryImpl class, construct a LiveData object from it so that UI could observe changes on it. Methods getShareableInformation, getShareableUrl, getShareableSubject provide the shareable information to the UI which is further shared with other apps. public class ShareEventViewModel extends ViewModel { protected LiveData<Event> getEvent(long eventId, boolean reload) { if (eventLiveData.getValue() != null && !reload) return eventLiveData; compositeDisposable.add(eventRepository.getEvent(eventId, reload) .doOnSubscribe(disposable -> progress.setValue(true)) .doFinally(() -> progress.setValue(false)) .subscribe(event -> { this.event = event; eventLiveData.setValue(event); }, throwable -> error.setValue(ErrorUtils.getMessage(throwable)))); return eventLiveData; } public String getShareableInformation() { return Utils.getShareableInformation(event); } } In ShareEventFragment class does the work of binding the UI to the model using data binding. It observes the LiveData objects supplied by presenter and reflect the changes in UI to the LiveData object. public class ShareEventFragment extends BaseFragment implements ShareEventView { public void shareEvent() { Intent shareIntent = new Intent(); shareIntent.setAction(Intent.ACTION_SEND); shareIntent.putExtra(Intent.EXTRA_TEXT, shareEventViewModel.getShareableInformation()); shareIntent.setType("text/plain"); startActivity(Intent.createChooser(shareIntent, getResources().getText(R.string.send_to))); } public void shareByEmail() { Intent shareIntent = new Intent(); shareIntent.setAction(Intent.ACTION_SENDTO); shareIntent.setType("message/rfc822"); shareIntent.setData(Uri.parse("mailto:")); shareIntent.putExtra(Intent.EXTRA_SUBJECT, shareEventViewModel.getEmailSubject()); shareIntent.putExtra(Intent.EXTRA_TEXT, shareEventViewModel.getShareableInformation()); try { startActivity(Intent.createChooser(shareIntent, getResources().getText(R.string.send_to))); } catch (android.content.ActivityNotFoundException ex) { ViewUtils.showSnackbar(binding.getRoot(), "There are no email clients installed"); } } public void copyUrlToClipboard() { ClipboardManager clipboard = (ClipboardManager) getActivity().getSystemService(Context.CLIPBOARD_SERVICE); String eventUrl = shareEventViewModel.getShareableUrl(); if (eventUrl == null) { ViewUtils.showSnackbar(binding.getRoot(), "Event does not have…

Continue ReadingShare Events in the Open Event Organizer Android App
Read more about the article Change Password Feature for Open Event Android Organizer App

Change Password Feature for Open Event Android Organizer App

In Open Event Organizer Android App, the users were able to successfully login and sign up but in case they wanted to change their login password they could not. So, we added a feature to allow users to change their existing password. This blog explains the technical details to implement this feature following MVVM architecture and using highly efficient libraries like Retrofit, RxJava, Raziz Labs DbFlow, Data Binding. Specifications We will implement a page where users can enter their old password and new password along with a confirm password field. Their will be a login button to send the password change request to server. Server then return a response and we will provide feedback regarding the request. We are following MVP architecture so there will be a Model class, Fragment class, Presenter class and Network Layer to make network requests. Let’s start with creating ChangePassword model class. There are three fields to store old password, new password and new confirmed password. Several Lombok annotations like @Data, @AllArgsConstructor, @NoArgsConstructor are used to avoid boilerplate code for getters, setters and constructors. @JsonNaming annotation is used to translate the Java Object names to KebabCase when they are serialized. @Data @AllArgsConstructor @NoArgsConstructor @JsonNaming(PropertyNamingStrategy.KebabCaseStrategy.class) public class ChangePassword { public String oldPassword; public String newPassword; @JsonIgnore public String confirmNewPassword; } The layout file is binded to model using Data Binding. There will be three TextInputEditText fields for user input. An option to toggle password visibility and a login button. The Fragment class binds layout file to the Fragment and handle UI stuff. Presenter is called to make Login request when login button is pressed. public class ChangePasswordFragment extends BaseFragment<ChangePasswordPresenter> implements ChangePasswordView { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { binding = DataBindingUtil.inflate(inflater, R.layout.change_password_fragment, container, false); validator = new Validator(binding); AppCompatActivity activity = ((AppCompatActivity) getActivity()); activity.setSupportActionBar(binding.toolbar); ActionBar actionBar = activity.getSupportActionBar(); if (actionBar != null) { actionBar.setHomeButtonEnabled(true); actionBar.setDisplayHomeAsUpEnabled(true); } return binding.getRoot(); } @Override public void onStart() { super.onStart(); getPresenter().attach(this); binding.setOrganizerPassword(getPresenter().getChangePasswordObject()); getPresenter().start(); binding.btnChangePassword.setOnClickListener(view -> { if (!validator.validate()) return; String url = binding.url.baseUrl.getText().toString().trim(); getPresenter().setBaseUrl(url, binding.url.overrideUrl.isChecked()); getPresenter().changePasswordRequest(binding.oldPassword.getText().toString(), binding.newPassword.getText().toString(), binding.confirmNewPassword.getText().toString()); }); } When the Login button is pressed, changePasswordRequest() method is called which makes an asynchronous call to ChangePasswordModel in order to perform the task of sending and receiving data from network in a different thread than the UI thread. Along with making requests, this method also verifies the password typed in confirm password field and send the the error as well as success message to the fragment. public class ChangePasswordPresenter extends AbstractBasePresenter<ChangePasswordView> { public void changePasswordRequest(String oldPassword, String newPassword, String confirmPassword) { if (!newPassword.equals(confirmPassword)) { getView().showError("Passwords Do Not Match"); return; } organizerPasswordObject.setOldPassword(oldPassword); organizerPasswordObject.setNewPassword(newPassword); organizerPasswordObject.setConfirmNewPassword(confirmPassword); changePasswordModel.changePassword(organizerPasswordObject) .compose(disposeCompletable(getDisposable())) .compose(progressiveErroneousCompletable(getView())) .subscribe(() -> getView().onSuccess("Password Changed Successfully"), Logger::logError); } } We are using Retrofit to make POST Request to server using the REST API. @Body annotation denotes the object request body which here contains a Map<String, ChangePassword> object. The Response from server is captured in Observable<ChangePasswordResponse> which is an RxJava Observable. @POST("auth/change-password") Observable<ChangePasswordResponse> changePassword(@Body Map<String, ChangePassword> changePassword); This is the declaration for the…

Continue ReadingChange Password Feature for Open Event Android Organizer App
Read more about the article Create Session in Open Event Android Organizer Application

Create Session in Open Event Android Organizer Application

Open Event Android Organizer Application offered variety of features to Organizers from all over the world to help them host their Events globally but it didn’t had the functionality to create Sessions in the app itself and associate it to Tracks. This feature addition was crucial since it enables Organizer to create Sessions which every common person enquires about before attending and event. In this Blog Post we will see how we added this functionality in the app. Open Event Android Organizer Application is a client for Open Event Server which provides the REST API. Problem There can be various Sessions associated with Tracks for an Event. Open Event API had the endpoint to implement Creating Session but the Orga app didn’t, so we worked on creating a Session in the app. The UI for creating a Session is shown above. User can fill in the necessary details and click on the green Floating Action Button to create a Session. How to implement functionality? We will follow MVP Architecture and use Retrofit 2.x, RxJava, Dagger, Jackson, Data Binding and other industry standard libraries to implement this functionality. Firstly, let’s create Session model class specifying the attributes and relationships to set up in database using RazizLabs DbFlow library. The POJO will be serialized into JSON by Jackson library to be passed on as a part of RequestBody to server. Now we will create SessionApi class that will contain the request details to be passed to Retrofit. @POST denotes a POST request and @Body denotes the requestBody of the request which is a Session object. public interface SessionApi { @POST("sessions") Observable<Session> postSession(@Body Session session); } This is the CreateSessionFragment class that contains the code binding model to the view. The Fragment class implements the CreateSessionView class overriding the method declarations present there. The @Inject annotation of Dagger is used to load singleton presenter instance lazily to improve app’s performance. Event-Id and Track-Id’s are retrieved from Bundle from Fragment Transaction. These are then passed on to presenter when Create Session button is pressed. There are other methods to show binding progressbar, snackbar and other UI components to show progress of the background request to server and database. public class CreateSessionFragment extends BaseFragment<CreateSessionPresenter> implements CreateSessionView { @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { binding = DataBindingUtil.inflate(inflater, R.layout.session_create_layout, container, false); validator = new Validator(binding.form); binding.sessionCreate.setOnClickListener(view -> { if (validator.validate()) { getPresenter().createSession(trackId, eventId); } }); return binding.getRoot(); } @Override public void onStart() { super.onStart(); getPresenter().attach(this); binding.setSession(getPresenter().getSession()); } } In the Presenter createSession method is called when create button is pressed in UI. The method attaches track-id and event-id to Session object. This is necessary for Relationship constraints on Session Model. Then after binding all the data to Session object, we pass it on to SessionRepository. The success response is provided to user by passing success response in getView().onSuccess() method. public class CreateSessionPresenter extends AbstractBasePresenter<CreateSessionView> { public Session getSession() { return session; } public void createSession(long trackId, long eventId) { Track track…

Continue ReadingCreate Session in Open Event Android Organizer Application