I am facing a problem when it comes to the width of my app (attachment). It seems that the full width of the screen is not used since I am using a actionbar, and that the space where the "Settings" menu would appear is taking the remaining width of the screen. Is there any way to use the full width since I am not using the "Settings" menu anyway?
app_bar_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.simple.activities.MainActivity"
tools:showIn="#layout/app_bar_main">
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
current_fragment.xml:
<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"
tools:context="com.example.simple.fragments.Notifier">
<!-- TODO: Update blank fragment layout -->
<TabHost
android:id="#+id/tab_host"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/layout1"
layout="#layout/activity_hour_notification"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include android:id="#+id/layout2"
layout="#layout/activity_minute_notification"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
</FrameLayout>
</LinearLayout>
</TabHost>
</FrameLayout>
Thanks for any help on this one!
You gave width and height constant to the layout, for ConstraintLayout match_parent give 0dp and add all necessary constraints
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
</RelativeLayout>
In content_main.xml please use width match_parent
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.simple.activities.MainActivity"
tools:showIn="#layout/app_bar_main">
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="match_parent"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
use LinearLayout instead of android.support.design.widget.CoordinatorLayout and android.support.constraint.ConstraintLayout and set orientation = "vertical"
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
here you make width with specific value not match parent and the fragment layout which contain toolbar and tab will take that width so you should make width of master_fragment match_parent or at least use toolbar on content_main.xml before relativeLayout
Related
This is the layout of my CustomerSearchFragment.
It has a CoordinatorLayout with a AppBarLayout and a ScrollView with a FrameLayout inside.
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.CustomerSearchFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<FrameLayout
android:id="#+id/fl_results_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The FrameLayout will host CustomerMapResultsFragment, whose layout is shown below:
<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"
tools:context=".fragments.CustomerMapResultsFragment">
<com.mapbox.maps.MapView
android:id="#+id/map_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Actual Behaviour: the MapView's heigth is just a bunch of pixels (like 16dp).
Expected behaviour: the MapView has to fill all the available space from the AppBar to the bottom of the screen.
What am I missing? Thanks.
Change your coordinator layout to ConstraintLayout like below code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.CustomerSearchFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf=parent
android:layout_height="wrap_content">
...
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/appbar"
app:layout_constraintBottom_toBottomOf="parent">
<FrameLayout
android:id="#+id/fl_results_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This will solve your problem.
I solved adding android:fillViewport="true" In the <ScrollView>.
I cannot see the first row of my listview. I am assuming the screen page's header is overlapping with the listview.
My fragment file is follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/layout_background_color">
<LinearLayout
android:id="#+id/colors_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<ListView
android:id="#+id/colors_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Any advice tips will be very helpful.
Edit: I am including my activity file below.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="#+id/coordinator_layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".views.activities.ColorActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<fragment
android:id="#+id/color_fragment"
android:name="com.microsoft.skype.teams.views.fragments.ColorFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.constraint.ConstraintLayout>
As a hack I am currently adding an extra row of data. Adding the extra row of data is clearly something I wish to avoid.
The issue is your toolbar is taking the height of your first row. To get out of this do something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/layout_background_color">
<LinearLayout
android:id="#+id/colors_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize" // added this line now your
android:orientation="vertical" listview will start below
android:visibility="visible"> toolbar
<ListView
android:id="#+id/colors_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I have an activity layout with 2 FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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="de.sioned.multivoc.AddWordActivity"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/toolbar_layout"/>
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/paneLeftTop"/>
</RelativeLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
The 2nd FrameLayout paneLeftBottom will at some point contain the following fragment:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/lyTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...some static fields...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/lyTop">
<ListView
android:id="#+id/lvResult"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"/>
</RelativeLayout>
In this configuration the ListView is only shown with a height of one of it's rows instead several rows utilizing the available space. The ListView works fine but only one row at a time is displayed.
The same ListView fragment works fine when I put it into a 2-pane landscape layout. How can I make the ListView use the available space ?
Edit:
Found a partial solution by switching to a LinearLayout within the ScrollView. Only problem left is, that the bottom Framelayout overlays a bit of the top FrameLayout when I load the said fragment into it. But that is acceptable in this case as it is only temporary to select some data.
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<LinearLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</ScrollView>
This right here
android:layout_width="match_parent"
android:layout_height="match_parent"
Should be
android:layout_width="match_parent"
android:layout_height="wrap_content"
My layout file:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageViewPage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/zelenjavne_jedi"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
</ScrollView>
No matter how I change height to fill_parents, wrap_content, match_parent etc, if I use other views such as Relative instead of Linear it still doesn't work.
Solution found here
Have to set layout_height attribute to dp value such as this:
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="500dp">
I have added viewpager in an activity with the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.45">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.15"
android:foregroundGravity="center_vertical|fill_vertical">
</android.support.v4.view.ViewPager>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container1"
android:layout_weight="0.4"></FrameLayout>
</LinearLayout>
But the toolbar colour has moved and the viewpager has gone to the center of the screen.
Do you need to put the toolbar inside the frame layout. And if so, consider removing the wight for the toolbar and just leave the wrap_content.
Change the height of the layouts with weight specified to "0dip".
If all else fails consider changing the wights to whole numbers and add them to make the wight_sum of the linear_layout e.g.toolbar frame layout gets 9, view pager gets 3, frame at the bottom gets 8 and weight_sum is 20.
Its easy to implement your layout using RelativeLayout. Use RelativeLayout and make the ToolBar layout the top child and put ViewPager below "Toolbar layout".
Hope this helps.
Regards,
Try this layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"/>
<FrameLayout
android:id="#+id/container1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"/>
</FrameLayout>
Try it this way. Just specify the height of the elements
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foregroundGravity="center_vertical|fill_vertical">
</android.support.v4.view.ViewPager>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/container1"
android:layout_below="#id/imgdetail">
</FrameLayout></RelativeLayout>