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.
Related
I am making an app in which I have a RecyclerView. I have also added a button, but it isn't shown. See the left photo. What I now want is to make the RecyclerView so that may button is visible, like in the photo on the right. How can I achieve this?
Under the photos you can see my xml code. I'd like the RecyclerView to be relative/dynamic.
<?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"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
The problem is that you set the CardView height to match_parent so it takes up the entire screen. It's best to use ConstraintLayout for these kinds of layouts, but you can also fix it with minimal effort 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_weight="1"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
Note I only changed CardView's layout_height to 0dp and then added the following:
android:layout_weight="1"
Which will tell the layout to stretch as much as it can (while not covering other elements below it).
How can add image on top of the bottom sheet in Android? See this image
I tried this but it doesn't work. I want the transparency as shown in the image attached.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/myBottomLL"
app:layout_anchorGravity="top|center" />
<LinearLayout
android:id="#+id/myBottomLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/background" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Follow these links.
How to make the background transparent:
https://medium.com/#manuaravindpta/transparent-background-for-bottomsheetdialog-396a1a646f1b
How to make the bottom sheet full screen:
https://medium.com/better-programming/bottom-sheet-android-340703e114d2
For the circular image view:
https://github.com/hdodenhof/CircleImageView
Just add a transparent View to the top like this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="#android:color/transparent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/topImage"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center_horizontal|top"
android:elevation="6dp"
android:src="#drawable/ic_account_circle"
app:civ_border_color="#color/colorAccent"
app:civ_border_width="2dp"
app:civ_circle_background_color="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/transparentRegion"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:elevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_close"
android:tint="#android:color/black" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<LinearLayout
android:id="#+id/other_content_goes_here"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Other Content"
android:textSize="24sp" />
<View
android:id="#+id/extraSpace"
android:layout_width="match_parent"
android:layout_height="800dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set the theme of the BottomSheetDialogFragment.
You can also add a BottomSheetCallback and decrease the height of the transparent space at the top as you scroll up
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>
I'm trying to implement a layout which will be divided in 2 sublayouts. I want the left layout to be 1/4 of the screen, while the right one will be the remaining 3/4 of the screen. My goal is the following: if the user presses a button, then the left layout will get hidden and the right layout will take up the whole screen (not sure if this will work).
In order to achieve this, I tried using the following layout, which doesn't really seem to be as intended.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/categoriesLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:orientation="vertical">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/holo_blue_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FFFFFF">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
As seen in the following picture, the problem is that the left LinearLayout is only as wide as it's content and not actually taking 1/4 of the screen.
your problem is because you set the width of its parent layout to wrap_content, and if you want to have a full screen width just set it to match_parent, so it will be like that:
<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"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
.
.
.
Use
android:weightSum="4"
in your parent layout!
You can hide your layout1 programatically calling
layout1.setVisibility(View.INVISIBLE);
Hope this helps.
You need android:weightSum attribute.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/categoriesLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:background="#000000"
android:orientation="vertical">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/holo_blue_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#FFFFFF">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have made a base-activity with a toolbar and add my layouts to this. But when I add a scrollview in the main content it doesn't show the bottom part when scrolling down. The missing part seems to be the same height as the toolbar.
My activitybase.xml:
<?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="wrap_content"
style="#style/ToolBarStyle"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/root_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
My fragmentinfo.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin">
<TextView
android:id="#+id/info_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="hei"
style="#style/TextLarge" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/small_margin"
android:text="-SOME LONG TEXT-"
style="#style/TextNormal" />
<TextView
android:id="#+id/info_header2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="Test"
style="#style/TextLarge" />
</LinearLayout>
</ScrollView>
Screenshot below. This is scrolled all the way down. "Test" should be showing with 16 dp margin below it...
In FrameLayout
<FrameLayout
...
android:layout_marginBottom="56dp"
...
/>
Here 56dp is the Action Bar size.
Add android:layout_marginBottom to the ScrollView, using the action bar height dimen.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/abc_action_bar_default_height_material"
android:fillViewport="true">