For the life of me, I cannot get this Toolbar to layout on top (note: not above, but on top of) its sibling LinearLayout. The only way I can get the Toolbar to overlay its sibling is by specifying the Toolbar's elevation to be > 0, but this doesn't work for pre-5.0.
I am using a parent FrameLayout, and the child Toolbar is located after its sibling LinearLayout in the XML. What am I missing? Even the Android Studio preview pane shows the Toolbar on top of the LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:id="#+id/fragment_main_container"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame"
android:orientation="vertical"
>
<FrameLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher"
/>
</FrameLayout>
<ListView
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:id="#+id/home_list_listview"
android:drawSelectorOnTop="true"
android:divider="#null"
android:dividerHeight="0dp"
tools:listitem="#layout/home_list_item"
>
</ListView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/slogan"
android:gravity="center"
android:textColor="#color/colorPrimaryDark"
/>
</LinearLayout>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
/>
</FrameLayout>
Turns out I had a fragment committing the linear layout over the main activity, which already contained it. Oops!
That's because of FrameLayout.
If you want to use FrameLayout, the views will not relate each other.
So all you need to do is ...
set "height of toolbar" to MarginTop of LinearLayout.
Hope, it will help.
Related
Is that possible to add an invisible view/view group into LinearLayout which will not affect sizes of other children of the layout. Here are details.
I have a simple LinearLayout with a Toolbar, RecyclerView and a TextView at the bottom.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent" android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/list_background" />
<TextView
android:layout_width="match_parent" android:layout_height="48dp"
android:text="#string/empty"/>
</LinearLayout>
Now I want to add a view or view group which is actually visible but not affect sizes and locations of other widgets and hide it with .offsetTopAndBottom method.
After that to use ViewDragHelper class to show the view based on some gestures. Actually the behavior is similar to BottomSheetBehavior but without CoordinatorLayout involved.
The only problem is that I cannot figure out how to add the view into LinearLayout.
To make a View not only invisible, but also not take up any space, thereby not interfering with layout behaviors like wrap_content or layout_weight you can set the Views visibility to gone either in XML using android_visibility="gone" or in code using yourView.setVisibility(View.GONE)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent" android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/list_background" />
<TextView
android:layout_width="match_parent" android:layout_height="48dp"
android:text="#string/empty"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:layout_marginTop="10dp"
android:textColorHint="#android:color/white"
android:textColor="#android:color/white"
android:hint="#string/loginEmailHint"
android:id="#+id/loginEmail"
android:visibility="gone"/>
</LinearLayout>
Here a an example
I want to add a button to a View Pager. Tried adding button, fragment, and layout without success.
I've also tried this:
Add button to ViewPager
But it didn't work.
This is my layout
<?xml version="1.0" encoding="utf-8"?>
<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="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
This is the screen shot, I want to add the button on the bottom of the page.
Thanks.
You can Wrap this LinearLayout in the Relative layout. If you don't want to change the Linear layout to RelativeLayout. Here is the modified layout XML and It will display Button the Bottom Right. You can modify layout_alignParentRight to left, center depend on your need.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try using RelativeLayout for the root view and use :
android:layout_alignParentBottom="true"
With LinearLayout at root view is not possible. Also, instead of RelativeLayout, ConstraintLayout is a good alternative.
I am trying to implement Bottom Navigation bar using the roughike bottom-bar: https://github.com/roughike/BottomBar
Here is an image of what I get (on my mobile phone):
I want to keep my toolbar at the top of the device screen. When I run the app, the bottom bar takes up almost all the space of my MainActivity. Does the CoordinatorLayout have to be the parent element for all elements? Here is my XML Layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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_margin="0dp"
android:layout_marginBottom="0dp"
android:padding="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="allblacks.com.ibaleka_android_prototype.MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id = "#+id/MainActivityToolbar"
android:background="#color/colorPrimary"
android:elevation="5dp"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id = "#+id/MainActivityImageView"
android:layout_marginRight="5dp"
android:layout_marginLeft="1dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/ToolbarTextView"
android:id = "#+id/MainActivityTextView"
android:textAlignment="center"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id = "#+id/mainActivityMenu"
>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id = "#+id/MainActivityContentArea"
>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Yes Coordinator layout need to be the parent layout. Coordinator Layout Documentation Check the link for getting more details
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>
I´m attempting to use the new Android Design Library´s CoordinatorLayout inside of another layout. The CoordinatorLayout contains a RecyclerView. What I´m attempting to do is to place a simple LinearLayout below the CoordinatorLayout. This layout should be placed below the CoordinatorLayout. This is XML I´m using:
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/conversation_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<EditText
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_send_white_36dp" />
</LinearLayout>
</LinearLayout>
As you can see, I´m attempting to wrap the CoordinatorLayout inside another LinearLayout. However, on-screen the second part of the layout doesn´t even render.
That is because the CoordinatorLayout has layout_height="match_parent". That means it takes the whole size of the screen and your LinearLayout is rendered but it is below the CoordinatorLayout and off-screen.
An easy way to fix this would be setting the weight of the CoordinatorLayout to fill the parent layout but leave space necesseary to display the footer LinearLayout. This would be
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
But this is not ideal way so I would suggest leaving the CoordinatorLayout as the root element and place your LinearLayout just bellow the RecyclerView where it belongs. Since your footer LinearLayout has fixed height this can be done easily
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:paddingBottom="150dp" />
<LinearLayout
android:layout_height="150dp"
android:layout_gravity="bottom">
<EditText />
<ImageButton />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>