I have a LinearLayout with 2 inner LinearLayouts. If I add the Toolbar in this layout-file it always overlaps the whole layout. So only the Toolbar is visible. In the other layout-files it worked without any problem.
<LinearLayout 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"
android:orientation="horizontal"
tools:context="de.dk.mafi.ActMain">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:padding="2dp"
app:titleMarginStart="20dp"
app:titleTextAppearance="#style/MyMaterialTheme.Base.TitleTextStyle"
app:titleTextColor="#color/textColorPrimary">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TEST"
android:textColor="#android:color/white"
android:textStyle="bold|italic"/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/border"
android:padding="10dp"
android:text="#string/welcome"/>
<Button android:id="#+id/button2" android:layout_width="match_parent"
android:layout_height="wrap_content" android:text="Favoriten"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/training"/>
<Button android:id="#+id/button" android:layout_width="match_parent"
android:layout_height="wrap_content" android:text="Hauptmenü"/>
</LinearLayout>
What is the problem here?
The first LinearLayout has a wrong orientation. It should be set with vertical, instead of horizontal which gives the other children (as the inner LinearLayouts) to be draw after the Toolbar on the right outside the width screen. Change to:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
Then, remove the android:fitsSystemWindows="true" from the Toolbar.
EDIT:
I just did this, it works as expected:
<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="vertical"
android:fitsSystemWindows="true"
tools:context="...">
<include layout="#layout/include_toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/blue"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/red"/>
</LinearLayout>
Where I'm reusing this Toolbar layout on other Activities:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
Output:
My test contains above/below inner children, but to keep your requirements, juste add a parent container for the children, easily do as:
<LinearLayout ...>
<include layout="#layout/include_toolbar" />
<!-- use a parent container with horizontal orientation -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" .../>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" .../>
</LinearLayout>
</LinearLayout>
Related
How can I make the bottom navigation to stay at the bottom of the page by using the LinearLayout? Most solution I found is they used RelativeLayout instead of LinearLayout.
Below is my code
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=" MY ACCOUNT"
android:textStyle="bold"
android:textColor="#color/white">
</TextView>
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btm_nav"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:clipToPadding="false" />
</LinearLayout>
It is quite easy - your xml should look like this:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=" MY ACCOUNT"
android:textStyle="bold"
android:textColor="#color/white">
</TextView>
</androidx.appcompat.widget.Toolbar>
<!--Just add in between the action bar and bottom bar some other view with height = 0dp and weight = 1. I added one more LinearLayout-->
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btm_nav"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:clipToPadding="false" />
</LinearLayout>
In other cases it won't work. There should be at least one weight but not height based view in LinearLayout to do it.
Hope it helps.
I have created a layout with tabs
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_id"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
</com.google.android.gms.ads.AdView>
</RelativeLayout>
One of the tabs is
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image_section"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
The problem is that before the ad loads I can see the button all the way on the bottom. How would I make the layout for the tab to take up exactly the space available instead of the whole screen? Same way if I added a button and make it be on top, instead of appearing below the tabs, it appears all the way on the top.
EDIT: I would like to make it look like this image
The button is part of tab content that is shown and the ad is part of the main layout. The problem is that whenever I set button to android:layout_alignParentBottom="true" then I end up with it being on the bottom and hidden behind the ad.
Change the root of your main layout to vertical LinearLayout instead of RelativeLayout.
Now you have two children in LinearLayout i.e CoordinatorLayout and AdView.
Since you want AdView to lie below CoordinatorLayout and CordinatorLayout to occupy the rest of the space,
set the height of CoordinatorLayout as android:layout_height="match_parent" with android:layout_weight="1" and the issue should be fixed.
Also change the height of AppBarLayout and TabLayout to match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_id">
</com.google.android.gms.ads.AdView>
</LinearLayout>
There is no need to change in the other layout. But I would recommend you use LinearLayout as the root layout instead of RelativeLayout
So here are the changes that I would recommend doing in your tab layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/image_section"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</LinearLayout>
Edit: Attaching images for better understanding:
Have You tried setting minHeight in Your AdView?
Change your Tab layout to this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/image_section"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:gravity="center"/>
</LinearLayout>
this is my xml layout tree:
when i open app,and everything is well! i can scroll the page to show/hide titlebar or footerbar,but when i do something like remove all views in framelayout,and add some others view into framelayout, the framelayout just gone!
webFrameLayout.removeAllViews();
webFrameLayout.addView(newView);
i had try to handle it,but i can't. i can't see the framelayout in uiautomatorviewer.
and i had make some breakpoint in coordinatorlayout.
when onlayout() method called:coordinatorlayout has 3 child.but in uiautomatorviewer tree,i just see 2 child!
framelayout is gone.any one can help me?
my xml is :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
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.support.design.widget.AppBarLayout
android:id="#+id/bottom_tool"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:background="#FEFEFE"
android:orientation="vertical"
app:layout_behavior="inno.video.downloader.videodownloader.view.FooterBehaviorDependAppBar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/iv_home"
style="#style/BrowserBottomToolItem"
app:srcCompat="#drawable/v_home"
/>
<FrameLayout
android:id="#+id/tab_count"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<TextView
android:id="#+id/tv_tab_count"
android:layout_width="#dimen/tab_item_text_size"
android:layout_height="#dimen/tab_item_text_size"
android:layout_gravity="center"
android:background="#drawable/tab_background"
android:contentDescription="#null"
android:gravity="center"
android:text="1"
android:textColor="#color/icon_gray"
android:textSize="12dp"
/>
</FrameLayout>
<ImageView
android:id="#+id/iv_bookmarks"
style="#style/BrowserBottomToolItem"
app:srcCompat="#drawable/v_bookmark_border"
/>
<ImageView
android:id="#+id/iv_more"
style="#style/BrowserBottomToolItem"
app:srcCompat="#drawable/v_more_vert"
/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/search_bar_height"
android:background="#color/colorPrimary"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways">
<include layout="#layout/search_bar"/>
<include layout="#layout/search_bar_page_search"/>
<Button
android:id="#+id/main_relayout_ok"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:text="#string/main_relayout_ok"
android:textColor="#color/white"
android:textSize="#dimen/text_size_16sp"
android:visibility="gone">
</Button>
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<!--web layout-->
<!--this framelayout is gone when i add/remove views-->
<FrameLayout
android:id="#+id/web_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
I have a TabLayout. In the MainActivity where I set the TabLayout I also have three buttons and a banner on bottom (so those buttons and banner are on front of the the tablayout). What I want to do is place an ImageView exactly between the button/banner and the tab. How can I achieve this?
Here is a picture of the layout, I want the view exactly in center between buttons and layout.
Code main_activity:
<?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"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.tomhogenkamp.NeonDiscoLight.MainActivity">
<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.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
<LinearLayout
android:layout_above="#id/adView"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="settings"
android:id="#+id/setting"/>
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="start"
android:id="#+id/start"/>
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="rate"
android:id="#+id/rate"/>
</LinearLayout>
</RelativeLayout>
and code for fragment:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewStrobe"/>
<ImageView
android:layout_above="#+id/linearLayout"
android:id="#+id/imageViewStroboscope"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</RelativeLayout>
I have this 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="ca.usherbrooke.whapl.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="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:elevation="4dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal"
android:paddingTop="5dp"
android:paddingBottom="10dp"
android:background="#color/colorPrimary"
>
<ImageView
android:id="#+id/previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_action_previous"/>
<ImageView
android:id="#+id/play_pause"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_action_play"/>
<ImageView
android:id="#+id/next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_action_next"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:background="#color/colorPrimary"
>
<TextView
android:layout_marginLeft="10dp"
android:id="#+id/songname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
/>
</LinearLayout>
</LinearLayout>
and when I have a ListView in my fragment_container, the player with play/pause/next/rewind button is alway over the container, so I cannot access the last element in the list view, because it's behind my player (the linear layout after the fragment_container).
What should I change for the container only take the place he has and don't go under my player ?
By the way this layout is included in the layout of my main activity, wich is a DrawerLayout that contain my container + a NavigationView.
Add a android:layout_marginBottom property to the container equal to the height of the player.