I have two textviews. I want one of them to be left aligned and the other to be right aligned. Pretty much so that it looks like a 2 column table.
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#+id/profileLayout" android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:id="#+id/experience" android:orientation="horizontal">
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/experienceLabel" android:textStyle="bold" android:layout_weight="0" android:text="Experience"></TextView>
<LinearLayout android:id="#+id/linearLayout4" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1"></LinearLayout>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/experienceTextView" android:layout_gravity="right" android:layout_weight="0" android:layout_width="wrap_content"></TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal">
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1"/>
<TextView android:layout_height="wrap_content" android:layout_weight="0" android:layout_width="wrap_content"/>
</LinearLayout>
Set the weight of the first one to 1 so it will eat up all of the extra space. Set the 2nd oen to wrap content, so it only takes up as much space as it needs.
But why do you have an extra LinearLayout around them? If you have nested LinearLayouts, you should probably be using a RelativeLayout instead.
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/experienceLabel" android:textStyle="bold" android:layout_weight="1" android:text="Experience"></TextView>
<TextView android:text="TextView" android:layout_height="wrap_content" android:id="#+id/experienceTextView" android:layout_weight="1" android:layout_width="wrap_content"></TextView>
</LinearLayout>
Use Relative Layout. About Relative Layout Link Example link
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:id="#+id/experienceLabel"
android:textStyle="bold" android:layout_weight="0" android:text="Experience"
android:layout_alignParentLeft="true"/>
<TextView android:text="TextView" android:layout_height="wrap_content"
android:id="#+id/experienceTextView" android:layout_gravity="right"
android:layout_weight="0" android:layout_width="wrap_content"
android:layout_alignParentRight="true" />
Benefit of using RelativeLayout: it reduces your number of layout. Which will optimize your ui too.
I'm not entirely sure of the exactly layout you want, but you can try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profileLayout"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:id="#+id/experience"
android:orientation="horizontal">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/experienceLabel"
android:textStyle="bold"
android:layout_weight="1"
android:text="Experience"/>
<TextView
android:text="TextView"
android:layout_height="wrap_content"
android:id="#+id/experienceTextView"
android:gravity="right"
android:layout_weight="1"
android:layout_width="wrap_content"/>
</LinearLayout>
</LinearLayout>
You were using layout_gravity rather than gravity also. layout_gravity tells the parent how you want to be laid out, gravity tells content how to be laid out.
Notice how I have a weightSum in the parent layout to 2 and then set the two children to a weight of 1 each. I also set the parent to fill_parent
You had and extra layout in there too - if you want spacing, set a margin on the second textview or use a view (a simpler object than a LinearLayout)
Related
I'm trying to add 3 headers going from left to right above a ListView. I'm trying to add TextViews to achieve this. I've attached a picture to better demonstrate. Picture
My ListView works as i want it to by itself but I can't seem to get the textViews to align as i want them to.
activity_visualise.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/latitudeHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:layout_alignLeft="#+id/longitudeHeader"
android:text="#string/latitudeHeader"/>
<TextView
android:id="#+id/longitudeHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:text="#string/longitudeHeader"/>
<TextView
android:id="#+id/syncHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:layout_alignRight="#+id/longitudeHeader"
android:text="#string/syncHeader"/>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
activity_visualise_row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_visualise_database"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="org.softshack.VisualiseDatabaseActivity">
<TextView
android:id="#+id/dbLatitude"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbLongitude"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbReportTime"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbSyncStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"/>
</LinearLayout>
Didn't see the rest of your code but you can try and put the headers as the first row on your ListView instead of the TextViews..
Couldn't align it properly in XML so I added the headers into the listview as strings. Had issues with them randomly repeating and this fixed it List view items changes position when scrolling android?
As the parent of your header view use a linear layout (horizontal) and apply a weightSum of 1 on it. then add 4 textviews as the childs of the linear layout and apply a layout weight of 0,25 on every one of them. do the same for the single list row view and you will get the result that you want.
UPDATED ANSWER:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView2" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView3" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView4" android:layout_weight="0.25"/>
</LinearLayout>
P.S. you can use a gridview widget to get the same result.
I am building an app for android that dynamically updates a table layout with table rows. The way I do this, is by having a fixed table row layout that I populate with content and then insert it to the table layout and it displays like seen below.
The problem I'm having is that when I add a row that contains content that is longer in the middle part and creates multiple lines on one of the text views, it somehow shortens the width of the layout that contains the two text views of the other rows (middle part), specifically those that have single lines, for example the first and second row in the image below.
You can find the code below. If you need any more code or examples, please tell me.
row_main.xml - The fixed layout of the row.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRowMain1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center" >
<TextView
android:id="#+id/textViewEmployeeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textViewClientId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textViewTable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
<TextView
android:id="#+id/textViewTimeStamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_margin="1dp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"
android:layout_weight="1" >
<TextView
android:id="#+id/textViewOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="marquee"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center" />
<TextView
android:id="#+id/textViewOrderDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_weight="1"
android:layout_margin="0dp"
android:gravity="center"
android:layout_gravity="center" />
</LinearLayout>
<Button
android:id="#+id/buttonDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:text="#string/cross"
android:textSize="25sp"
android:gravity="center"
android:layout_gravity="center" />
</merge>
MainActivity.xml (snippet) - Where the table row is inserted.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:layout_weight="1"
android:layout_margin="10dp"
android:overScrollMode="always" >
<TableLayout
android:id="#+id/tableLayoutMain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
</TableLayout>
</ScrollView>
I really can't figure out how to solve this or what may be causing it... Please help!
Thank you in advance! :)
Note: The pink/red rectangles is the "Show layout bonds" tool from the developer options in android.
EDIT: I replaced the TableLayout with a Vertical LinearLayout and it works just fine. I guess I was overcomplicating it... :P
I'm using TabWidget to get tabbed navigation. Each tab tile has icon and text below it. As content of my tab I currently have cardview list.
So, tab button layout:
<LinearLayout android:id="#+id/tabsLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="bottom|center"/>
<TextView android:id="#+id/title"
style="#android:style/TextAppearance.Holo.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#000000"
android:text="test"
android:visibility="visible"
android:focusableInTouchMode="false"
android:layout_gravity="center"
android:textIsSelectable="true" android:textSize="13sp"
android:textAlignment="center"
android:gravity="center_horizontal"/>
</LinearLayout>
My activity where tab widget is used:
<?xml version="1.0" encoding="utf-8"?>
<TabHost
android:id="#android:id/tabhost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" android:background="#84dadada"/>
</LinearLayout>
</TabHost>
FrameLayout is for replacing tab content with fragments when user switch between tabs. It works, but there are some problems though. This is how it looks like:
As you can see - first problem is icon alignment. If text is wrapped as multiline (large font and small screen), icon is not aligned with the rest ones that have one line label. How to get all icons properly aligned?
Second - there is white extra space just above my tab control - why? How to disable it?
Any ideas?
[edit]
My CardView is defined as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="3dp"
>
<android.support.v7.widget.CardView android:id="#+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:background="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="dp" android:clickable="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/card_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2"
android:padding="6dp"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:orientation="vertical"
android:padding="4dp">
<TextView
android:id="#+id/card_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"/>
<TextView
android:id="#+id/card_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:padding="6dp"
android:src="#drawable/arrow"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
So it seems there is extra margin around cardview - top, bottom, left and right. How to disable it?
For the space issue have a look here, it may be a duplicate answer.
For the icon-alignment, have a look here, it shows how to keep your text on a single-line and use ellipsis to truncate it if your device doesn't have room to show it entirely. It may not be your perfect solution, but it's a good hint.
I'm attempting to split the UI for my horizontal layout into two halves each with it's own realative layout so I am able to center text and graphics within the two left and right halves of the screen. The problem is when I attmept to do so - the go button still ends up in the middle of the screen instead of centered on the right hand of the screen.
(If I can figure out how to center correctly I'm sure I'll be able to apply the same technique to the other elements to achieve the result I desire.
SOURCE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8sp"
android:layout_marginLeft="8sp"
android:layout_marginRight="8sp"
android:layout_marginTop="8sp"
android:background="#drawable/background"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/start2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/apn_app_go_button" />
</RelativeLayout>
</RelativeLayout>
EDIT: (in response to Kuba's answer)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/apn_app_go_button"
android:gravity="center_horizontal" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
Instead of Relative layout, I would recommend using LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
In the inner LinearLayout you can either use android:gravity="center" to have its children centered vertically and horizontally. Or use use android:gravity="center_horizontal" to center in only horizontal way.
EDIT: Added the textview, which was discussed in the comments.
To have the textView appear underneath the button, you must change the orientation of the LinearLayout from horizontal to vertical. Please see the developer site .
The inner LinearLayout thus looks like this.
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#dd0000"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text here"
/>
</LinearLayout>
How can I use android:layout_below="#+id/go_button" in a linear layout?
You can't. These relationships only work in relative layout where you place views in relation to each other or the parent view. In linear layout items are stacked either vertically or horizontally.
Set android:gravity="center" in
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/apn_app_go_button" />
Maybe its work.
I'm trying to make horizontally design that divides screen into 4x 50% pieces within scrollable view.
I'm having linear layout that divides the screen into two 50% parts. That's okay. How to add another two 50% "under the screen" - note this root linear layout in enclosed within scroll view...
This is what I want to achieve: http://s7.postimg.org/9qyy3y1h7/image.jpg
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/as_30d"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:background="#dddddd"
android:paddingBottom="5dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Your activity - kilometers"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/as_30d"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dddddd"
android:paddingBottom="5dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Your activity - kilometers"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
Any ideas will are appreciated. I am able to figure out it myself if you give my some tips :) Thanks!
I don't think that what you want is possible just within the XML.
A solution is to at runtime get the screen height and set the height of the two nested LinearLayouts to that.
Alternatively you can use a vertical ViewPager implementation with separate fragments if that suits your needs.