how to make sure the color fill in the entire bottom navigation view? - android-layout

I'm facing a problem right now that i tried to imply the color function background in the app:itemBackground="#color/purpleBoo"
but the color seems like not to fill in the entire bottom navigation? why is this happening to me?
my bottom navigation code
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/purpleBoo"
app:menu="#menu/bottom_nav_menu"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"/>
</RelativeLayout>

For the current layout that you are using the bottom navigation panel can be maximized to width "match_parent" so the color will also be available inside the width section.
Well, in case the white space around the panel is disturbing the look of your app then you can change the background of the layout as a whole then that would seem better.

Just add the android android:background="#color/purpleBoo" in BottomNavigationView
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/purpleBoo"
app:menu="#menu/bottom_nav_menu"
android:background="#color/purpleBoo"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"/>
</RelativeLayout>

Related

android studio expandable bottom sheet with recycleview

I'm trying to achieve something like this:
as you can see the bottom sheet is expandable when there is more than one line of the recycleview.
I want to implement the same thing in the profile page so that if posts are more than three lines then I can expand the bottom sheet, then I can scroll the recycleview (when the sheet is expanded).
my current xml:
<LinearLayout
android:id="#+id/allPosts"
android:layout_below="#+id/userinfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:background="#drawable/rounded_behind_recycleview"
android:orientation="vertical"
android:elevation="1dp">
<com.taimoorsikander.myapplication.Widgets.B_RecycleView
android:id="#+id/recycle_view"
android:overScrollMode="never"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
^
it looks like the image I attached but it is not expandable yet.
is this possible in Android Studio? if yes, please help.
In this tutorial they teach you how to set the Behaviour in the BottomSheetFragment,
take a look it's really helpful, there you will find how to set the Behaviour that you want with BottomSheetBehaviour.from(...)...
Kotlin language
Basically you have to set the height(Ex: peekHeight = 50) you want than and set "false" to hide the bottomSheet and "true" to (isDraggable).
There is 2 ways of doing this declarative in the XML or programmatically, I'll show the first:
1º Your first layout needs to be CoordinatorLayout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="#layout/bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2º The bottomSheetLayout:
<?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"
app:behavior_hideable="false"
app:behavior_peekHeight="100dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardBackgroundColor="#81D4FA" />
</LinearLayout>
Pay attention to this TAGS, which states the behavior and state of the BottomSheet:
app:behavior_hideable="false"
app:behavior_peekHeight="100dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="#string/bottom_sheet_behavior"

Why Relativelayout doesn't work on fragments?

I have created a bottom navigation bar from this tutorial https://www.youtube.com/watch?v=JS3DIb4x1JQ&t=1352s, but RelativeLayout doesn't work properly on fragments.
Here is the code of bluetooth fragment with textview in the middle:
<?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"
android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
android:id="#+id/bluetooth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#0472FE"
android:text="Bluetooth"
android:textSize="30dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
This is what it looks like in
design
And this is what it looks like in
android emulator
How do I fix it?
Are there other components in this view? check the main view if it set to match_parent.

How to add ButtonOverlay on a Map(osmdroid)

I want to add a button overlay but it shouldn't be based on the geopoint but instead based on the screen. So whenever i scroll the map, the button should still exists and will remain in that position, How do i do that?
Just add it to your android layout for the activity/fragment
Example here:
https://github.com/osmdroid/osmdroid/blob/master/OpenStreetMapViewer/src/main/res/layout/sample_cachemgr.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<org.osmdroid.views.MapView
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tilesource="Mapnik" />
<Button android:id="#+id/btnCache"
android:layout_width="fill_parent"
android:text="Cache Manager"
android:layout_height="wrap_content"></Button>
</RelativeLayout>

android layout: constant size of bottom view

I just started learning Android and got a problem implementing a special layout. I read a lot about layouts and tried everything that crossed my mind, but i couldnt solve it. Probably its very easy and I would be very grateful for your help!
I need a simple layout, having a bigger view at the top and a smaller one at the bottom. The lower view should have a constant size of 150dp, the upper view should be variable in height and fill the rest . It is no problem giving the upper one a constant size and the lower one the rest - but thats not the way i need it...
Thats a simplified screenshot how it should look like:
Screenshot
Thanks a lot!
Here you go:
<?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">
<RelativeLayout
android:id="#+id/rl_layout_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_above="#+id/rl_layout_two">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_layout_two"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#android:color/darker_gray"
android:padding="15dp"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
This matches your expectation. Howerev, i would like to point out that generally, layout height or width are not specified.It is bad practice. I would suggest another option, using LinearLayouts with weights, find the code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:id="#+id/rl_layout_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_weight="0.4">
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_layout_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:padding="15dp"
android:layout_weight="0.6">
</RelativeLayout>
</LinearLayout>
Hope these help.
EDIT 1:
Check the 1st solution, it was missing the layout_above attribute, that is why it took the whole screen space and centered the image according to the whole screen space. Now, it will not, since layout one is above layout two, it will center your image according to layout one.

Scrollview doesn't scroll to the margin at the bottom

I have a simple layout as follows :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#D23456" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#FFFFFF" >
<ImageView
android:layout_width="match_parent"
android:layout_height="800dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
The background of the scrollview is pink and linear layout inside has the android icon image with a height of 800dp (that doesnt fit to the screen) . What I'm expecting to see is that imageview floats in a background of pink with a margin of 10dp in every sides (top,bottom,left,right).But when I scroll to the bottom, the scrollview doesn't scroll to the margin, so the bottom of the scroll is the imageview not the pink margin.
How can I prevent this? This makes the user think the page hasn't ended yet and makes him want to scroll more.
I later found out that ,a similar situation has already been answered in the following thread https://stackoverflow.com/a/16885601/1474471 by #olefevre.
Adding an extra LinearLayout that surrounds the current LinearLayout with a padding and removing the inner LinearLayout's layout-margin solved the problem:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D23456"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" >
<ImageView
android:layout_width="match_parent"
android:layout_height="800dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</ScrollView>
The solution posted by #Mehmet Katircioglu works well, but you can solve the problem simply changing the android:layout_margin to android:padding, without none extra view. Like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D23456"
android:padding="10dp" >
<!-- Your content (ImageView, buttons...) -->
<LinearLayout/>
use android:fillViewport="true" on the ScrollView may do it.
example in this thread.

Resources