I have a screen contain collapsable toolbar (AppBarLayout) and scrollable content with NestedScrollviews
My Main layout:
<android.support.design.widget.CoordinatorLayout
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/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:theme="#style/ToolbarTheme"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarHeight"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
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"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/layoutMainContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And the layout content that I put into FrameLayout layoutMainContent is as below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground">
<LinearLayout
android:id="#+id/layoutAbout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/logo"/>
</LinearLayout>
<TextView
android:id="#+id/tvViewDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textColor="#color/colorPrimary"
android:text="#string/see_license"
android:gravity="center_horizontal"/>
</RelativeLayout>
What I want is the logo image is in the center and the TextView (tvViewDetail) is at the bottom the the screen. However, logo image is not in the center (pushed down a little bit) and tvViewDetail is pushed out of the screen.
Is there anything I've done wrong? Any suggestion would be helpful!
Thank you all masters,
Try this way I hope it helps.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground">
<LinearLayout
android:id="#+id/layoutAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/logo"/>
<TextView
android:id="#+id/tvViewDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:text="#string/see_license"/>
</LinearLayout>
</RelativeLayout>
hence linearlayout height and width will be wrap_content and gravity will be center so all child of that linear layout will be at center of the linear layout. and linear layout also appear at the center of the relative layout.
Related
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>
Good day everyone! I want to know why did my linear layout have margin in left? I want to set the linear layout, in the end of the left screen of the device.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="0dp"
android:layout_alignParentBottom="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="#32333D"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I am trying to add a custom header in my main activity that already contains a bottom navigator and a framelayout that acts as a container for the fragments i want to display.
The below given code contains a Linearlayout["#+id/application_header] that should act as the application header, however the header is displayed by the fragment container[#+id/main_container] is overlapping the header.
Tried the properties android:layout_below and android:layout_above but it is still overlapping.
<?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:design="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.amplitude.tron.volksradio.MainActivity">
<LinearLayout
android:id="#+id/application_header"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RADIO"
android:layout_gravity="center"/>
</LinearLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/application_header"
android:layout_above="#+id/bottomNavigationBar"
android:layout_alignParentTop="true">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
design:menu="#menu/bottom_menu_navigation"
android:background="#50b1b5b9">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
<?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">
<LinearLayout
android:id="#+id/application_header"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RADIO"
android:layout_gravity="center"/>
</LinearLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/application_header"
android:layout_above="#+id/bottomNavigationBar"
android:layout_alignParentTop="true">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
design:menu="#menu/bottom_menu_navigation"
android:background="#50b1b5b9">
</android.support.design.widget.BottomNavigationView>
</LinearLayout>
android:layout_below and android:layout_above work with RelativeLayout. BTW, the LinearLayout with only one TextView is redundant. You can just use TextView. Here are some options on how to get that done.
Using RelativeLayout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:design="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/application_header"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="RADIO"/>
</LinearLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomNavigationBar"
android:layout_alignParentTop="true"
android:layout_below="#id/application_header">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#50b1b5b9"
design:menu="#menu/bottom_menu_navigation">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
Using LinearLayout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:design="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/application_header"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="RADIO"/>
</LinearLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#50b1b5b9"
design:menu="#menu/bottom_menu_navigation">
</android.support.design.widget.BottomNavigationView>
</LinearLayout>
One more (better) alternative would be using CoordinatorLayout with Toolbar:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:design="http://schemas.android.com/tools">
<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>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/application_header"
android:layout_above="#+id/bottomNavigationBar"
android:layout_alignParentTop="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
design:menu="#menu/bottom_menu_navigation"
android:background="#50b1b5b9"/>
</android.support.design.widget.CoordinatorLayout>
Solved it my self, although there might other clean solution and would be accepted as answer if found feasible.
I just added android:layout_marginTop="50dp" which is same as the height of element with id - #+id/application_header
PS- i don't know if this would effect screens with different sizes and my testing device is only 5.5 inches to which the solution worked perfectly.
You can also make the layout align center of the screen by adding this :
android:layout_centerInParent="true"
also add a padding or margin incase there is any small amount of overlapping
I have implemented this horizontal scroll view inside my collapsing toolbar (because I want users to horizontally scroll through images). And my collapsing toolbar isnt collapsing correctly (there's this random space (in color orange) after it has collapsed. I was hoping you guys can look at my xml and tell me what im doing wrong here.
Here we have it not collapsed.
Here we have it collapsed (and we have this orange space). Also how do i put a margin from my horizontal scroll view and the toolbar so that it would work on all devices?
Here is my xml code.
<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:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<include
android:layout_width="match_parent"
android:layout_height="50dp"
layout="#layout/toolbar_layout_edit_card"
app:layout_collapseMode="pin">
</include>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/cardInfo_HSV_LL">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"
android:id="#+id/cardInfo_imageView"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
/>
</LinearLayout>
</HorizontalScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
and my toolbar layout xml
<?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:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/toolbar_edit_card_ID"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="#style/Frontier2017_2"
android:background="#color/orange_test"
android:elevation="10dp">
<TextView
android:layout_width="150dp"
android:layout_height="55dp"
android:gravity="bottom|center"
android:textSize="25sp"
android:id="#+id/toolbar_textview"
android:textColor="#color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit"
android:background="#color/orange_test"
android:textColor="#color/white"
android:layout_gravity="right"/>
</android.support.v7.widget.Toolbar>
I have a bit of a predicament.
My Layout is currently this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item_shipping_shipping_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|left"
android:padding="#dimen/margin_16"/>
<View
android:id="#+id/line43"
android:layout_width="match_parent"
android:layout_height="#dimen/line_height"
android:background="#color/light_gray"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.RecyclerView
android:id="#+id/item_shipping_fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:isScrollContainer="true"/>
</LinearLayout>
The TextView is dynamic content set by the server and it can be really long sometimes.
The problem I am having is the TextView can take up the whole screen. This XML is a fragment that is in a TabLayout with a collapsable toolbar. So when I scroll the content I would like the TextView to scroll out the screen, if this is possible. I tried to embed the Textview in a scrollView but this doesn't work as you see about?
Got any ideas how I can still have the CollapsableToolbar collapse as well as scroll the Textview out the screen to reveal the RecyclerView?
Thank you
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="true">
<TextView
android:id="#+id/item_shipping_shipping_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|left"
android:padding="#dimen/margin_16"/>
</android.support.v4.widget.NestedScrollView>
<View
android:id="#+id/line43"
android:layout_width="match_parent"
android:layout_height="#dimen/line_height"
android:background="#color/light_gray"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/item_shipping_fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:isScrollContainer="true"/>
</LinearLayout>