I have a problem with the size of a ListView within a tab.
I think it's something simple, but I can not find the solution alone.
The activity is the same as the default, except for the TextView that was changed with the ListView.
I use an ArrayAdapter with a dummy list of three items ("P1", "P2", "P3").
All dimensions are set to "match_parent" or "wrap_content"
What I get is this: I see only "P1" instead of the whole list, with a little scrollbar that allow to scroll between the values.
What I would like to see is the entire list.
screenshot of my app
Can someone help me?
main activity layout
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="it.danapps.mycommunity.ChooseTags">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/container_choose_tags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
fragment
<RelativeLayout 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="it.danapps.mycommunity.ChooseTags$PlaceholderFragment">
<ListView
android:id="#+id/chooseTagListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
EDIT
1. Forcing the height to 300dp I see the list. But how can I do it automatically to Android, adapting to the screen?
<RelativeLayout 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="it.danapps.mycommunity.ChooseTags$PlaceholderFragment">
<ListView
android:id="#+id/chooseTagListView"
android:layout_width="match_parent"
android:layout_height="300dp"
/>
If you TextViews are being set to "match_parent" that would be your issue. Make sure your TextViews are using either a set height or using "wrap_content". Otherwise your TextView will try to fill the height of the scrollview its placed in which is why you are only seeing the first one.
Related
My main activity has a Toolbar within an AppBarLayout and an include below that:
<?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:fitsSystemWindows="true"
tools:context="com.zhephyr.somedaytoday.MainActivity">
<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/colorPrimaryDark"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_chrono_tab"/>
</android.support.design.widget.CoordinatorLayout>
The included layout is a RelativeLayout with a TabLayout connected to a ViewPager:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".ChronoSwipeViewActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorVariant"
android:weightSum="1">
<android.support.design.widget.TabLayout
android:id="#+id/chrono_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
app:tabMode="fixed"
android:background="#color/colorVariant"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_dialog_email"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"/>
<android.support.v4.view.ViewPager
android:id="#+id/chrono_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tabs" />
</RelativeLayout>
The issue I am currently running into is that The included layout sits on top of my main layout filling the entire screen. I cannot see the Toolbar because it is being covered. I want the included layout to fill only the area below the toolbar. I've tried placing app:layout_behavior="#string/appbar_scrolling_view_behavior" in both layouts and in the include with no avail. Anyone know what's going on?
Update
The activity being shown is this:
This activity should be shown within this one and with out the app title:
Change the root of your included layout to android:layout_height="wrap_content"
Currently, it is match_parent so it will take the height of the parent filling the entire screen.
You will also want to add to your <include>, android:layout_below="#id/toolbar" to place it below the toolbar. By default, RelativeLayout places Views in the top-left so adding this property will tell it to start your included layout below the toolbar.
Note the last two lines in the below code.
<RelativeLayout 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"
tools:context=".ChronoSwipeViewActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content">
in include tag of main layout
<include layout="#layout/activity_chrono_tab"
android:layout_below="#id/toolbar"/>
I am creating an app with an AppBar and below this one, a (Relative)Layout.
Like in Facebook Messenger :
You can see the AppBar and below it a Layout with three buttons (TOUS, MESSENGER, SMS).
When I scroll, my Layout including the three buttons does not move, it stays "pinned" at the same position (on top). My objective is to make that the Layout with the thress buttons pass behind the AppBar and does not stay in the view.
Here is my actual code :
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/background_grey_white">
<!-- These part has to scroll and pass behind the AppBar when the user is scrolling, but it does not work at the moment, it stays "pinned" at the top of the screen -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13sp"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/separator_color"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
What do I have to change to make it work ?
Can someone help me? Thank you!
Just move the RelativeLayout into the layout of the first element of the ViewPager. In this way when you swipe, the elements in the RelativeLayout will disappear, because the current tab was changed.
So I'm trying to make an app have a Tabbed Activity and I'm using this code for the ViewPager.
activity_result_screen_tab.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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.proyo.wshindsight.ResultScreenTab">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "#+id/toolbartext"
android:text = "Results"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_gravity="center"
android:fontFamily="sans-serif-medium"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The code below is one of the tabs in that Activity.
fragment_text.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="layout.TextFragment"
android:id="#+id/framelayout">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:id="#+id/vlayout">
</LinearLayout>
</ScrollView>
</FrameLayout>
And in fragment_text.xml TextViews are dynamically added to the LinearLayout.
Now here's the problem. When enough TextViews are added, so that we reach the bottom of the display, it will not show a few of them. The ScrollView works just normally, but I think the ViewPager is not working correctly.
Here's a picture of how it it looks like. It should continue till 15, like the one above it, but for some reason it stops at 10.
Here's a picture of the same page, with scrollbar. If you look at the scrollbar, it is already at the bottom of the screen, while it still scrolls on till 10.
Finally, when checking out the Preview option in Android Studio on the ViewPager component, it also showed that it's going below the screen.
So I highly suspect the fault being in activity_result_screen_tab.xml, but I really wouldn't know what could be wrong there.
EDIT: Still don't have an answer, someone answered to change the layout_heights of fragment_text, but that didn't help either.
I'm must getting started with android app development. I'm using Android Studio and working through the tutorial. I keep having 2 elements lay on top of each other, whereas one should be below the first element. It is probably a very noob mistake, but hey, I'm a noob and I don't know what it is. :) Code follows:
<?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:fitsSystemWindows="true"
android:orientation="horizontal"
tools:context="org.kehrli.testapp.MyActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
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/colorPrimaryDark"
/>
</LinearLayout>
<LinearLayout 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:orientation="horizontal" >
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/enter_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:background="?attr/colorPrimary"
android:src="#android:drawable/ic_dialog_email" />
Can anyone see where I went wrong?
Whenever there is a LinearLayout , you must specify android:orientation, that says whether the child elements should stack horizontal or vertical.
Since you want to stack vertically, update the android:orientation value to vertical.
Your linear layout orientation is set to horizontal, make it vertical and you should be seeing them one below the other.
Change android:orientation="horizontal"
to android:orientation="vertical"
Since you are using a CoordinatorLayout, you want your ToolBar inside an AppBarLayout instead of a LinearLayout. A bit like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
You should checkout the AppBarLayout for more information on the scroll flags, etc.
In addition the 2nd linear layout may need a layout behavior so it sits below the app bar. So if you see that you may need to add this attribute:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I am trying to create a tool bar associated with an EditText on my scren. Below are the contents of my xml file that I am trying to create:
<?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"
xmlns:tool="http://schemas.android.com/tools"
tool:context=".CreatePost"
android:id="#+id/create_post">
<include layout="#layout/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/create_post_toolbar"/>
<!-- Edit text for typing status. Light gray placeholder. -->
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:layout_below="#id/create_post_toolbar"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
app_bar.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:fitsSystemWindows="true"
tools:context=".CreatePost">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar_universal"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
However, when I do this, my EditText covers my toolbar. Here is an image to show what happens:
I don't really understand why this is happening, is there anyway to align my EditText so it doesn't cover the toolbar? Thanks!
UPDATE: after adding in Arya's code into mine, my image looks like so, which makes the ActionBar too high. Any ideas on how to fix it?
Your layout, in its current definition, does not make much sense. I think the problem here is that the CoordinatorLayout has been assigned fitsSystemWindows=true. This makes it report its bottom from the very top of the status-bar. On the other hand, the RelativeLayout expects the bottom value from the bottom of the status-bar. This makes your EditText overlap the Toolbar by 25dp - the standard height of a status-bar. You can kind of confirm this by assigning android:fitsSystemWindows="true" to your RelativeLayout with id create_post. In this case, the bottom for CoordinatorLayout will be reported correctly, and the EditText will not overlap the Toolbar.
Usually, the CoordinatorLayout is set to be the parent, and the content (in your case the RelativeLayout) resides as a child of the CoordinatorLayout:
<?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:fitsSystemWindows="true"
tools:context=".CreatePost">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_universal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/create_post">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
If you have a specific reason for placing the CoordinatorLayout inside a RelativeLayout, please do share.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/tabheader"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.AppBarLayout
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">