Scrollview's last bottom contents hidden by the bottom navigation view - java

Hi coders I have a constraint layout, in it is a bottom navigation view
a tool bar on top and a scrollview which has lots of buttons going down vertically.
The problem is that the scrollview's last buttons are hiding behind the bottom navigation view after I scroll all the way to bottom how can this be solved
On the actual code there are plenty of buttons in scrollview through here I add only a few here.
<android.support.constraint.ConstraintLayout 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:id="#+id/container"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/tutorialsinclude"
layout="#layout/app_bar_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tutorialsinclude"
android:id="#+id/webtut">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="web "
android:id="#+id/tutorialsButton1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tutorials 1 "
android:id="#+id/tutorialsButton1"/>
</LinearLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationbb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</android.support.constraint.ConstraintLayout>

You can just put a footer in the end to fix this issue. Just make a View below the last button. Something like this:
<View android:layout_width="match_parent"
android:layout_height="32dp" />
You just have to adjust the height to make it work for your layout. Also, you really shouldn't manually put all these buttons in a scrollView. should use a RecyclerView instead.

Set constraint to bottom of scrollview to top of bottom navigation view and set height as 0dp which will make height to match the constraint
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/tutorialsinclude"
app:layout_constraintBottom_toTopOf="#id/navigationbb"
android:id="#+id/webtut">

Related

Button at bottom of programmatically created layout

I made a linear layout where I have a view and a button. And inside that linear layout I am also adding some more elements but programmatically. Here is the code:
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<View android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/transparentBlack1"/>
<Button
android:layout_width="70dp"
android:layout_height="40dp"
android:shadowColor="#color/noColor"
android:background="#color/transparentBlack1"
android:text="#string/NewButton"
android:textSize="30sp"
android:gravity="center"
android:textColor="#color/background2"
android:onClick="addLine"/>
</LinearLayout>
With the addLine function I just add another element in the layout.
Is there any way to keep the button at the bottom of every element inside the layout, so other elements that I create with code will be above the button?
I guess you use linearLayout.addView(view); to add your views, correct? You can specify where the view should be added like the following:
linearLayout.addView(view, linearLayout.getChildCount() - 1);
This should add it between the view and the button.
See documentation for method explanations:
addView(View, int)
getChildCount()
Try make that button outside that layout, something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<View android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/transparentBlack1"/>
</LinearLayout>
<Button
android:layout_width="70dp"
android:layout_height="40dp"
android:shadowColor="#color/noColor"
android:background="#color/transparentBlack1"
android:text="#string/NewButton"
android:textSize="30sp"
android:gravity="center"
android:textColor="#color/background2"
android:onClick="addLine"/>
</LinearLayout>
Hope this helps

need to give margin for each grid

need to give margin for each grid. given below grid single view. am using this view in each grid here i need to get 2dp margin between all grids. when i use android:layout_margin = "2dp" there occurs a problem for inner grids there will be about 4dp(2dp+2dp)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
<ImageView
android:id="#+id/grid_image"
android:layout_width="50dp"
android:layout_gravity="center"
android:layout_height="50dp"
>
</ImageView>
<TextView
android:id="#+id/grid_text"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textSize="9sp"
android:textColor="#android:color/black"
>
</TextView>
</LinearLayout>
If you are using Gridview than normally add horizontalSpacing and verticalSpacing.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/albums_gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:horizontalSpacing="20dp"
android:listSelector="#android:color/transparent"
android:numColumns="2"
android:overScrollMode="never"
android:scrollbars="none"
android:verticalSpacing="20dp" />
Or what are you using as parent grid view ?
So you just want to have 2dp margin between one grid and another one and not 4dp?
What if you put android:layout_marginTop="2dp" at you LinearLayout.
a i think i am getting it, did you try to put 1dp margin to each Content item and 1dp margin to the linear layout? so they should end up right 2dp at the outer grid and 2 at the inner

How can i remove unnecessary top padding in cardview?

I managed to implement Cardviews in my app, but the cardview show an unnecessary padding in the top.
What i want to achieve is to get a header image like this :
Here's my cardview Layout file :
<android.support.v7.widget.CardView
android:id="#+id/programCardview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardUseCompatPadding="true"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/programHeader"
android:layout_width="match_parent"
android:layout_height="160dp"
android:src="#drawable/createdprogramviewcard"/>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Programme d'endurance"
android:textSize="20sp"
android:textAlignment="center"/>
<TextView
android:id="#+id/objectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Objectif : " />
<TextView
android:id="#+id/programObjectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="6 séances"
android:layout_toRightOf="#id/objectif"/>
<TextView
android:id="#+id/programWorkouts"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textAlignment="textEnd"
android:layout_alignParentRight="true"
android:text="6 séances" />
</RelativeLayout>
</LinearLayout>
This is the code of the RecyclerView :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewPrograms"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
I manage to change the attribute cardUseCompatPadding but that not affect the internal form of the cardview, it's just there to separate them.
Thanks in advance.
I found a solution for my problem by changing the height of the imageView to 130dp. Apparently since i made the with of the image to match_parent, i had to find the exact height that will suit the image inside the cardview without giving it some extra padding.
The situation is due to two reasons, the first is that the height property of the CardView is in match_parent or in a larger size than the components occupy and at the same time the gravity property of the layout is in center.
To fix it just set the gravity of the LinearLayout to center | fill or just to fill.
I used these below attributes and it works for me.
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
Or you can just use MaterialCardView instead of legacy CardView

RecyclerView takes up all screenspace

So I'm having some trouble with a RecyclerView in a layout file
Here it is:
<android.support.v7.widget.RecyclerView
android:id="#+id/chat_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/abc_action_bar_default_padding_material"
android:paddingLeft="#dimen/abc_action_bar_default_padding_material"
/>
<LinearLayout
android:layout_below="#id/chat_listview"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_height"
android:orientation="horizontal"
>
<EditText
android:id="#+id/chat_input_edittext"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:inputType="textAutoCorrect"
/>
<Button
android:id="#+id/chat_send_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/ic_action_send_now"
/>
</LinearLayout>
The RecyclerView is visible and scrollable but the LinearLayout and the Views inside are not visible... I tried quite a few things but nothing has worked so far.
Can any of you please point me into the right direction?
Many thanks in advance!
When RecyclerView is drawn, it calculates all the remaining size on screen to itself before drawing the next elements and don't recalculate after the other elements are drawn, leaving them outside the screen.
The trick is to draw all other elements first, and leave RecyclerView for last. FrameLayout does not work anymore so use a relative layout and put the RecyclerView last on the XML layout file.
Example to add a bar with buttons below the RecyclerView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="16dp"
tools:context=".MainActivity"
>
<LinearLayout
android:id="#+id/pagination_btns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"> //HERE YOU ALIGN THIS ELEMENT TO THE BOTTOM OF THE PARENT
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/previous_btn_label"/>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/next_btn_label"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/items_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_above="#id/pagination_btns"/> //HERE YOU ALIGN THE RECYCLERVIEW ABOVE THE PAGINATION BAR
</RelativeLayout>
Change the root view to a FrameLayout. Set the gravity of the LinearLayout to bottom
<FrameLayout 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.support.v7.widget.RecyclerView
android:id="#+id/chat_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/abc_action_bar_default_padding_material"
android:paddingLeft="#dimen/abc_action_bar_default_padding_material"
/>
<LinearLayout
android:layout_below="#id/chat_listview"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_height"
android:layout_gravity="bottom"
android:orientation="horizontal">
<EditText
android:id="#+id/chat_input_edittext"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:inputType="textAutoCorrect"/>
<Button
android:id="#+id/chat_send_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/ic_action_send_now"/>
</LinearLayout>
</FrameLayout>
Alternatively, you can wrap the linear layout in a FrameLayout
and set it to align_parentBottom = true if it is a relative layout or a linear layout at your root and you have other things in your view.

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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"
android:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<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="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

Categories