Android menu bar on the bottom

Question

I am wanting to implement a menu bar on the bottom of my app like I see in a lot of major apps like facebook, google +, stumble etc. (see image below)

The key aspects of this are that it is overlayed on top of the actual content, and as you scroll down, it disappears, but as you scroll up it comes back.

Since a bunch of apps use this kind of construct I was wondering if there is a simple way to do it and I'm just missing something, or if it actually is quite complicated but these big companies just hire really good developers?

Any pointers on how to go about this would be appreciated.

Answer 1

I have implemented the QuickReturn UI pattern as seen in Facebook.

You can see more examples here --> https://github.com/lawloretienne/QuickReturn

public class QuickReturnFacebookFragment extends Fragment {

    // region Member Variables
    private String[] mAvatarUrls;
    private String[] mDisplayNames;
    private String[] mTimestamps;
    private String[] mMessages;
    private String[] mPostImageUrls;
    private int[] mCommentCounts;
    private int[] mLikeCounts;

    @InjectView(R.id.rv)
    RecyclerView mRecyclerView;
    @InjectView(R.id.quick_return_footer_ll)
    LinearLayout mQuickReturnFooterLinearLayout;
    @InjectView(R.id.quick_return_header_tv)
    TextView mQuickReturnHeaderTextView;
    // endregion

    //region Listeners
    //endregion

    // region Constructors
    public static QuickReturnFacebookFragment newInstance() {
        QuickReturnFacebookFragment fragment = new QuickReturnFacebookFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    public QuickReturnFacebookFragment() {
    }
    // endregion

    // region Lifecycle Methods
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mAvatarUrls = getActivity().getResources().getStringArray(R.array.avatar_urls);
        mDisplayNames = getActivity().getResources().getStringArray(R.array.display_names);
        mTimestamps = getActivity().getResources().getStringArray(R.array.facebook_timestamps);
        mMessages = getActivity().getResources().getStringArray(R.array.facebook_messages);
        mPostImageUrls = getActivity().getResources().getStringArray(R.array.facebook_post_image_urls);
        mCommentCounts = getActivity().getResources().getIntArray(R.array.facebook_comment_counts);
        mLikeCounts = getActivity().getResources().getIntArray(R.array.facebook_like_counts);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_quick_return_facebook, container, false);
        ButterKnife.inject(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        ArrayList<FacebookPost> posts = new ArrayList<>();
        for(int i=0; i<23; i++){
            FacebookPost post = new FacebookPost();
            post.setAvatarUrl(mAvatarUrls[i]);
            post.setDisplayName(mDisplayNames[i]);
            post.setTimestamp(mTimestamps[i]);
            post.setCommentCount(mCommentCounts[i]);
            post.setLikeCount(mLikeCounts[i]);
            post.setPostImageUrl(mPostImageUrls[i]);
            post.setMessage(mMessages[i]);
            posts.add(post);
        }

        FacebookAdapter adapter = new FacebookAdapter(getActivity(), posts);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getActivity());
        mRecyclerView.setLayoutManager(layoutManager);

        mRecyclerView.setAdapter(adapter);
        mRecyclerView.addItemDecoration(new SpacesItemDecoration(QuickReturnUtils.dp2px(getActivity(), 8)));

        int headerHeight = getResources().getDimensionPixelSize(R.dimen.facebook_header_height);
        int footerHeight = getResources().getDimensionPixelSize(R.dimen.facebook_footer_height);

        int headerTranslation = -headerHeight;
        int footerTranslation = -footerHeight;

        QuickReturnRecyclerViewOnScrollListener scrollListener = new QuickReturnRecyclerViewOnScrollListener.Builder(QuickReturnViewType.BOTH)
                .header(mQuickReturnHeaderTextView)
                .minHeaderTranslation(headerTranslation)
                .footer(mQuickReturnFooterLinearLayout)
                .minFooterTranslation(-footerTranslation)
                .isSnappable(true)
                .build();
        mRecyclerView.setOnScrollListener(scrollListener);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.reset(this);
    }
    // endregion
}

Answer 2

This pattern is commonly called "QuickReturn UI". There are few open source implementations to take a look at, i.e. QuickReturnListView