How to set the background to white (view layout) below my search component? Here is my code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<include
layout="#layout/component_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"/>
<View
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#color/white"
android:elevation="1dp"/>
</RelativeLayout>
If by below you mean in the y axe, such as in a row after another, what you already have is probably fine. Having the items one after the other inside your relative layout. You can even force this position by using android:layout_toBottomOf="#+id/your_view_above"
Now if by below you mean on the z axe, the one coming down the screen in your direction, (behind) you may want to do as #amit suggested and use elevation instead.
Just Change the order of include tag and View tag like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#color/white"/>
<include
layout="#layout/component_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"/>
</RelativeLayout>
Update: android:orientation="horizontal" was there by mistake as I edited LinearLayout to make it RelativeLayout. You don't need to add that in your RelativeLayout.
Give an id to the include view like search,
set its layout_alignParentTop attribute to true and
set the View's layout_below attribute to "#id/search":
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/search"
layout="#layout/component_search"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"/>
<View
android:layout_below="#id/search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#color/white"
android:elevation="1dp"/>
</RelativeLayout>
You don't need this attribute android:orientation="horizontal", since it does not apply to a RelativeLayout.
Related
I have such code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center map"
android:padding="15dp"
android:background="#drawable/button"
android:layout_gravity="center_horizontal|center_vertical"
android:textColor="#FFF" />
<pl.jawegiel.endlessblow.other.GameSurface
android:id="#+id/gameSurface"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
(...)
</RelativeLayout>
</FrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/left_rv"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#22FFFFFF"
android:choiceMode="singleChoice"
android:divider="#080"
android:dividerHeight="2dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/right_rv"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#99FFFFFF"
android:choiceMode="singleChoice"
android:divider="#080"
android:dividerHeight="2dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.drawerlayout.widget.DrawerLayout>
The problem is that my Button is not below GameSurface.
I put this Button as first one counting on that it will be below GameSurface but it does not work.
How to achieve that?
You need to change FrameLayout to another kind of ViewGroup. FrameLayout is a a type of ViewGroup where one View is on top of another one. Like Layers in a cake.
Putting one below another is not possible in FrameLayout
The easiest solution might be to change FrameLayout with LinearLayout and of course, remember to add android:orientation attribute to it.
NOTE: I suggest you to learn ConstraintLayout, which can replace nearly every type of nested ViewGroups including FrameLayout and RelativeLayout :-)
This you can't achieve with FrameLayout, this is because FrameLayout is usually used to show only one child. Even tho it can show more child views they are just placed on top of each other. This is explained in the answer above. Each ViewGroup has its own pros and cons and the best Layout for this is LinearLayout. LinearLayout can place your child's one below another or one next to another, based on android:orientation attribute you can use. Values are vertical and horizontal. You understand from that which one should be used here.
Therefore, what you need to do is simply change your FrameLayout to LinearLayout. So this is how it looks in my XML:
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_height="match_parent">
After that, you just place your child views in order you want to show them. So, in my case I have an ImageView and a Button, placed in that order, like this:
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:id="#+id/gameSurface"
android:src="#drawable/ic_user"
android:layout_width="200dp"
android:layout_gravity="center_horizontal"
android:layout_height="200dp" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center map"
android:layout_marginTop="20dp"
android:padding="15dp"
android:layout_gravity="center_horizontal|center_vertical"
android:textColor="#000" />
</LinearLayout>
Then I get this:
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">
So I'm creating a list view that grows and shrinks based off of the user input and I need four buttons but I don't know how to have buttons that are aligned with the bottom of the list view and are in a 2x2 grid fashion. I've already tried relative layout and it didn't seem to work. Thank you
I've created the XML according to what I believed you wanted to see.
Please check the following screen shot:
The following is the XML file:
<?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">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON3"/>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON4"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_above="#id/linearLayout1">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON1"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="BUTTON2" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayout2">
</ListView>
</RelativeLayout>
As you can see that I am using the RelativeLayout as the base wrapper and within the RelativeLayout, I have 2 linearlayouts for the buttons (2 each) and finally the list view. The purpose for the LinearLayout is simply to add weight to the buttons so they would share the equal amount of horizontal space. If that does not fit your criteria, feel free to remove them. The main thing to learn is that relative layout allows you to use attributes such as alignParenBottom, layout_above, layout_below and so on. These attributes allow you to place your elements anywhere on the screen and adjust them according to these attributes.
Let me know if you have any questions.
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
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