Android View below another in FrameLayout not work - java

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:

Related

Why height of the list view is Full size?

I want the list view to appear below the text view.
However, the text view is not visible and only the list view is displayed in full size. How do I fix it?
<?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:background="#color/white"
android:orientation="vertical">
<TextView
android:id="#+id/textView21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="채팅"
android:textColor="#000000"
android:textSize="20sp" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
It happens because in the ListView you are using android:layout_height="match_parent.
You can do it in many ways, for example you can use the
android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view.
Something like:
<LinearLayout>
<TextView
../>
<ListView
android:layout_weight="1"
.../>
</LinearLayout>
you should set layout_height = "wrap_content" in listview:
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

What is the right way to use two scrollviews in a single activity?

This is my current design in my main activity.
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtSubestacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Subestacion"
android:textSize="18sp" />
<Spinner
android:id="#+id/spSubestacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown" />
<TextView
android:id="#+id/txtClasificacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Clasificacion"
android:textSize="18sp" />
<Spinner
android:id="#+id/spClasificacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown" />
<ScrollView
android:id="#+id/scrollEventos"
android:layout_width="match_parent"
android:layout_height="350dp"
android:paddingTop="30dp"
android:paddingBottom="10dp">
<LinearLayout
android:id="#+id/linearEventos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<Button
android:id="#+id/btnRegistros"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Actualizar Registros" />
</LinearLayout>
</ScrollView>
I have a second scrollview inside the first one because this one is filled with multiple labels created from code. These labels can take up a lot of space, so a scrollview is suitable for proper navigation.
The first scrollview that contains everything is so that when changing the screen in landscape mode, you can continue browsing and access all the controls that are displayed.
The problem is that when changing the screen in landscape mode, only the first scrollview works, which allows you to see all the controls correctly. However, the second scrollview showing the records cannot be moved, and therefore the records are cut.
Is there a way to freeze the first scrollview when the user wants to slide the records and allow the second scrollview to be moved?
Or is it that I should create my design differently?
Note: Everything works correctly with the screen in portrait mode. All the controls are accessible at first instance and the second scrollview can be slid correctly allowing to see the records.
I've tried working with the layout_weight property but it didn't work for me or I just didn't know how to use it.
Use this:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- Other Layout or scrollView-->
</android.support.v4.widget.NestedScrollView>
Android site: NestedScroll

Android LinearLayout, set background to Transparent

I am inflating a bottom_sheet_layout. It contains a LinearLayout as the root element. It has one child CardView.
I've tried the following:
setting `android:background` property to
1. #00FFFFFF
2. #00000000
3. #android:color/transparent
setting the background color of LinearLayout programatically
`LinearLayout l = container.findViewById(R.id.root_element);
l.setBackgroundColor(Color.TRANSPARENT);`
This is the BottomSheet.Class that is linked to the bottom_sheet_layout
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.bottom_sheet_layout, container, false);
LinearLayout l = container.findViewById(R.id.root_element);
l.setBackgroundColor(Color.TRANSPARENT);
return v;
}
This is the full bottom_sheet_layout
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
android:id="#+id/root_element"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="16dp">
<!-- A CardView that contains a TextView -->
<androidx.cardview.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/poiName"
android:fontFamily="#font/comfortaa_bold"
android:text="#string/poiName"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"/>
<!--Location-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:fontFamily="#font/work_sans_medium"
android:text="#string/ui_location"
android:textFontWeight="800" />
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:fontFamily="#font/work_sans"
android:text="#string/ui_location_addr" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/share"
android:scaleType="center"
card_view:backgroundTint="#color/colorPrimary" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
This is the Map Fragment. Here is where I inflate the bottom_sheet_layout
<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity" />
Following several guides, I still could not get the #00FFFFFF method to work. Programmatically setting the color to transparent, crashes the application.
It seems that in earlier questions on StackOverflow, setting the background to the hex code with alpha value used to work. Now I only get a dim gray background.
Screenshots of the application
Image Layout
App ScreenShot
If you are not using MapView, I supposed that you are inflating the Google Map + bottom_sheet_layout in the same fragment. If Yes, I think that your issue is not the LinearLayout transparency but you are inserting bottom_sheet_layout to the bottom of the fragment container, not over the map.
You can use this layout for your Map fragment
(androidx, but very similar if you are using android)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- use this fragment for your google map -->
<fragment
android:id="#+id/google_map"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!-- use this fragment for your bottom_sheet class -->
<fragment
android:id="#+id/bottom_sheet"
android:layout_margin="16dp" // with this you do not need the LinearLayout root_element
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Then, you can play with your CardView (or LinearLayout) visibility to show the card or not.
Other layouts are possible like using directly the card view instead of a Fragment.
I think I can help you with some sort of solutions, which you can also try and see if that works or not.
Make use of alpha property in your .java file
Range the value as per your ease
LinearLayout l = container.findViewById(R.id.root_element);
l.setAlpha(0.4);
You can make use of alpha in your XML file too:
<LinearLayout
android:id="#+id/l1"
android:alpha="0.5"
android:layout_width="190dp"
android:layout_height="match_parent">
0.0 is for fully transparent and 1.0 is for fully opaque.
Let me know if any of the solutions work for you. However, do more research here, you will definitely get a solution. Happy coding.
Try background null.
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null">
......
</LinearLayout>
Are you sure that the child layout elements doesn't have backgrounds?

How to make included component always on top

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.

Trying to place buttons below a list view

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.

Categories