I want to build a page that have a Scrollview which include a FragmentTabHost, and inside the FragmentTabHost I have 3 tabs that each tab contains fragment with listview.
example:
main_activity:
<?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:orientation="vertical" >
<RelativeLayout
android:id="#+id/Relative1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/Relative1" >
<RelativeLayout
android:id="#+id/Relative2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageButton
android:id="#+id/ImageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/ImageButton1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" />
<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="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
fragment_example:
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</ListView>
I know that it's not recommended to put listview inside scrollview and the best way is to add header to the list view, but how it's possible with the FragmentTabHost?
What is the recommended way to build this page?
Related
I am trying to place a chart widget (com.android.AnyChartView, #+id/piechart) from the AnyChart library (https://github.com/AnyChart/AnyChart-Android) below an included layout (#layout/content_main) that contains a TabHost. I tried giving the include an id and setting the layout_below property of the chart widget, but that has not worked. The app graph fills the entire screen, covering the Tab view.
Below is my code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"/>
<include layout="#layout/content_main"
/>
<com.anychart.AnyChartView
android:id="#+id/piechart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TabHost
android:id="#+id/tab_host"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</FrameLayout>
</LinearLayout>
</TabHost>
</androidx.constraintlayout.widget.ConstraintLayout>
Below is a screenshot of the app:
You need to remove your pie chart from main_activity and put it under content_main like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:padding="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TabHost
android:id="#+id/tab_host"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</TabHost>
<com.anychart.AnyChartView
android:id="#+id/piechart"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#+id/tab_host" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I have added the scrollview but you can remove it if it's not in your requirements.
There are a number of possible solutions
Solution 1
On the include tag indicate android:layout_width="match_parent" and android_height="wrap_content"
<include layout="#layout/content_main"
android:layout_width="match_parent"
android_height="wrap_content"
/>
Solution 2
Using LinearLayout as the parent ViewGroup provide android:layout_weight="1" and android:layout_height="0dp" on the include tag, this will allow the content_main.xml to occupy the remaining space and yet fit on the screen.
<include layout="#layout/content_main"
android:layout_width="match_parent"
android_height="0dp"
android_layout_weight="1"
/>
I am creating UI like as per below code
View pager with images and then other UI controls.
It is working fine with 2-3 controls, but if UI is out of page with 10 UI controls then scroll view not wokring.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<android.support.v4.view.ViewPager
android:id="#+id/scheduleViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account_create_password" />
// Other UI controls
</LinearLayout>
</LinearLayout>
</ScrollView>
Please try this below code ...
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160dp">
<android.support.v4.view.ViewPager
android:id="#+id/scheduleViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account_create_password" />
// Other UI controls
</LinearLayout>
</LinearLayout>
</ScrollView>
I have this layout for a fragment:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="#layout/header" />
</FrameLayout>
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
</ListView>
</LinearLayout>
</FrameLayout>
and this is header:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone" />
</LinearLayout >
Now when button is pressed, "box" should be populated and become visible, and box overlay the rest of views (in my case listview). Now when i press button ox does not overlay listview, but take a portion of screen (and listview moves down).
How can i do? thanks
Just use a RelativeLayout instead of LinearLayout, and put the FrameLayout after the ListView in xml ( to place the header over the list):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
</ListView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="#layout/header" />
</FrameLayout>
</RelativeLayout>
I am getting error when I tried to put image view on top of surface view.
Here is my XML code please help me in this regard
<?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="wrap_content"
android:background="#android:color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EFE3AF"
android:orientation="vertical" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="500dp"
android:layout_weight="1"
>
<SurfaceView
android:id="#+id/surfaceview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
android:scaleType="fitXY"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="right"
android:orientation="vertical"
android:paddingRight="#dimen/right01"
android:paddingTop="#dimen/top02" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/village" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
Above code works fine if I will add surface view up and image down, but I want other way around.
Something like this?
<?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="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EFE3AF"
android:orientation="vertical">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="500dp"
android:layout_weight="1">
<SurfaceView
android:id="#+id/surfaceview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
/>
<ImageView
android:layout_gravity="top|right"
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/show_recipe_bg">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/saveRecipeButtonId"
android:text="#string/save_recipe_button"
android:layout_gravity="center" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom" />
</LinearLayout>
</TabHost>
I want the button to apear on the TOP for all tabs, a fixed header.
The problem in this layout that the TAB icons (TabWidget) do not apear on the screen. I guess that is because of the fill_parent for the frame layout. But I do not want to define a fixed size (because it is not good for using on other devices...)
How can I fix:
I need it to be like
Button
Tabs
TabWidget
EDIT:
I have found the problem, new XML is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/show_recipe_bg">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/saveRecipeButtonId"
android:text="#string/save_recipe_button"
android:layout_gravity="center" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</LinearLayout>
</TabHost>
</LinearLayout>
Android: Tabs at the BOTTOM
how about this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<TabHost android:id="#android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent" android:id="#+id/linearLayout1" android:layout_height="match_parent" android:orientation="vertical">
<TabWidget android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#android:id/tabs"></TabWidget>
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#android:id/tabcontent">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab1"></LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab2"></LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab3"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
There is two possible ways:
It is mentioned in #sampathpremarathna answer - just move Button up in hierarchy, to the level of TabHost
You can try to change LinearLayout to RelativeLayout and define that FrameLayout should be below button, and above tabs.