A Sliding Up Panel for Data Entry in Xamarin Android

I have a customer who wanted a sliding up panel form on his Android app, which will be used for extra data input. Lucky for me there is an excellent component by @Cheesebaron to do exactly this, that is so simple to use.

  • Install the component in your Android App, from the Xamarin Component Store.

Installing Cheesebaron's component

  • Wrap your view's layout with the following code:

    <cheesebaron.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">
    

    And the closing tag, of course:

     </cheesebaron.slidinguppanel.SlidingUpPanelLayout>
    
  • Add a reference to support library 4, this can be done either through the component store or nuget.

Support Library 4 nuget Support Library 4 component store

  • One final reference, add a reference to Mono.Android.Export.dll through the references manager.

References Manager

This is the basics of installing the sliding up panel and getting your app back into a buildable state.

show me the data form

Next we will add our main, non-draggable form elements to the view. The component requires that the two layouts (main and draggable) have their layout_width and layout_height set to match_parent. I noticed I had to set the orientation in order for all the elements to show up.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
        <TextView
             android:text="Name:"
               android:textAppearance="?android:attr/textAppearanceLarge"
               android:layout_width="match_parent"
               android:layout_height="wrap_content" />
           <EditText
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:id="@+id/Name"/>
</LinearLayout>

Then, add the draggable portion to the view. It is important to note the use of a RelativeLayout. I am still new to Android layouts and was frustrated at first when I couldn't get my customer's app to layout correctly and allow data entry. It is a bit tedious to add a name to every form element (I use MvvmCross so I have lost that habit) and set the layout_below element, but I needed to make something work (to meet deadlines) and this was a very viable option.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:clickable="true"
    android:focusable="false">

I found the Information Panel to be a lovely way to show the users that there is something to click on. Friendly advice: use it, it is mandatory.

    <!--Information Box-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="68dp"
        android:id="@+id/infobox">
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:textSize="24sp"
            android:text="More Information"
            android:paddingLeft="10dp" />
    </RelativeLayout>

Now add the RelativeLayout wrapping the data elements that make up the form. Note that each layout element has the layout_below property set.

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#000000"
            android:padding="8dp">
            <TextView
                android:text="Address:"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_width="match_parent"
                   android:layout_height="wrap_content" 
                   android:id="@+id/lblAddress"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/txtAddress"
                android:layout_below="@id/lblAddress"/>
            <TextView
                android:text="Phone:"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/lblPhone"
                android:layout_below="@id/txtAddress" />
            <EditText
                android:inputType="number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/txtPhone"
                android:layout_below="@id/lblPhone" />
    </RelativeLayout>

gif of sliding panel in use

In Conclusion

We learned about using the SlidingUpPanel component to build a form to enter data with using Cheesebaron's SlidingUpPanel. I think the key takeaways are to use a RelativeLayout for your data form on the view, and to set the main and draggable layouts height and width to match_parent.

This is not a complete feature set; there are plenty of things to tinker with. To set the height of the draggable slide up panel, I suggest looking at Cheesebaron's sample app for more inspiration.

As always, the code for this demo is viewable here, and the component's code is viewable here.

comments powered by Disqus