Android layout with vertical tabs - design like hello sms app - android-layout

Question

Can somebody please help me out in designing vertical tabs like in the given pic(taken from hello sms app)
I'm not asking for a code snippet , so please don't ditch this question as a homework type. What I would want to know is the approach that I should take. Do I have extend the stock TabLayout or an existing tablayout with a few styles and UI customizations? Your pointers to the right resource would be of great help. Thanks

Answer 1

you can achieve this using multipane layout in android. on your right side create the listview fragment and right side implement details screen using fragment. if you wants to slide the left side listview use slidepanelayout.
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slide"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment android:id="#+id/leftpane"
android:name="com.example.package.left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left" />
<fragment android:id="#+id/rightpane"
android:name="com.example.package.right"
android:layout_width="350dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_weight="1"
/>
</android.support.v4.widget.SlidingPaneLayout>

Answer 2

I think this will not be achieved by TabLayout as it only supports Horizontal Orientation.
But you can go with SlidingPanel with NavigationDrawer where you can design DrawerItemLayout as per your requirement and get the exact layout you want.
Please check links #1. & #2.
I think this can reduce your efforts and you can get your task done easily.

Answer 3

No, you dont have to custom any view. You can just
Use RecyclerView for avatars list. If an avatar is selected, just changed background of the selected item to black U shape as in your design.
Use a detail view to display your avatar information.

Answer 4

You cannot use TabLayout here as it would not be appropriate for your purposes. What you could do is to have two layouts - maybe linear (or relative) to basically split the screen into the top part with a layout_weight of maybe 2 and the bottom layout with a layout_weight of 8 (for a 20/80) split.
From here, it's just a matter of designing your layouts. It looks like your top layout holds something like a spinner widget. You could either use this or a list view object. Your bottom layout definitely holds something like a list view. You could implement your own list view widget with some kind of a design in each row or you could have an xml layout file and reference this in your ArrayAdapter. Really, your choices are endless. For the left part of your bottom layout, you could probably use a vertical LinearLayout to hold the images of the people in the conversation.
And also don't forget to hide the ActionBar - if you want that.

Answer 5

what I would do is to split screen in a given ratio into two parts. Insert a list view with an adapter into left hand side and use fragments for the right hand side. But using tables is not a good idea. Using Fragments will make the things way easier. Check this link for an overview. Look at 2.2 and 2.3 sections.
And for the right hand side, inside fragment, you can use another list view with images and text.

Answer 6

You can achieve this by using a NavigationDrawer and a listview inside this navigation drawer.
this listview will be using a seperate xml layout for its row. which will have that image views inside as shown in the screenshot.

Answer 7

This is not a listview, its just a sliding menu. Learn about the sliding menu and you can achieve the design that you want. This will help u. https://github.com/jfeinstein10/SlidingMenu