Home screen and navigation drawer - ivancrg/vis.it GitHub Wiki

Introduction

At first, the plan was to display home screen after user successfully logs into the app. The idea was that it would consist of news about popular destinations. Second part of this milestone is developing navigation drawer which would offer all application features and could be accessed from any other part of the app.

  • After further consideration, we decided to display Explore Screen right after login, instead of news alone. We decided that for the best outcome, we should incorporate travelling news to Explore Screen. That means that the Explore Screen will not only recommend travelling destinations but also display the most interesting news from the travelling world.

Navigation drawer

Navigation drawer is shown after user swipes right. The image below shows screenshot of the navigation drawer consisting the links to other parts of the application. Users can choose if they want to futher explore destinations, plan actual trip, if they are starting planned trip, if they arrived on destination or if they want to check out or update their personal data.

Implementing the navigation drawer

Navigation drawer was quite easy to implement. We start off by creating a menu resource file (navigation_drawer_menu.xml) which is basically a layout with groups and items which are shown in the drawer itself and can be clicked. Code below shows Share and contact… group, or more specifically its implementation in the menu resource file. Same principle is applied to all the other links within the navigation bar.

<item android:title="@string/navigation_share_contact">
    <menu>
        <item
            android:id="@+id/nav_share"
            android:icon="@drawable/ic_share"
            android:title="@string/navigation_share" />
        <item
            android:id="@+id/nav_contact_support"
            android:icon="@drawable/ic_contact_support"
            android:title="@string/navigation_contact" />
    </menu>
</item>

After the creation of an appropriate menu resource file, adding icons etc., we had to design navigation drawer’s header. Again, quite an easy task if you have a clear idea of what you want to achieve/design. Our navigation header’s look implements a mainstream Android application look – it consists of user’s profile picture, user’s first and last name as well as user’s username. Final layout look is shown below.

Final step that includes meddling with the layout files is the one concerning the activity to which we want to implement the navigation drawer. In our case, that layout was activity_main.xml. The changes include converting the current layout model (in our case ConstraintLayout) to DrawerLayout. In our specific case, the root DrawerLayout of activity_main.xml includes a LinearLayout (for displaying fragments and toolbar) and NavigationView which is used to show the navigation drawer on swiping. NavigationView takes the previously created menu resource file and header layout file as its arguments and does everything automatically – we just need to set its height (which is mainly match_parent), width (mainly wrap_content so that it doesn’t occupy the whole screen), ID and gravity (from which screen edge will the navigation drawer appear). The picture below shows the activity_main.xml layout after completing all the described steps.

Final changes in activity’s code (our case – MainActivity.java) include finding a reference to the created DrawerLayout and NavigationView and setting the activity itself as the listener for the navigation view. We also need to override some methods – onNavigationItemSelected and onBackPressed which define navigation drawer’s behaviour. They can be easily understood by just reading the activity’s code so I will not go into further details.

Problems and solutions

  • When changing navigation view textview from another fragment, we should create a header view from the navigation view. We can get the navigation view from getActivity() and then get the header view with navigationView.getHeaderView(). After that, we use headerView.findViewById(R.id.EXAMPLE).

    If you mean changing a textview from an navigation view, then try this one.

    NavigationView navigationView = (NavigationView)FindViewById(Resource.Id.navigationView1);
    View headerView = navigationView.GetHeaderView(0);
    TextView navUsername = (TextView)headerView.FindViewById(Resource.Id.edituser);
    navUsername.Text=("Your Text Here"); 

Issues

#8 #42

Tasks and assignees

  • Navigation drawer task was done by Ivan Rubinić
⚠️ **GitHub.com Fallback** ⚠️