Can't convert PercentRelative Layout to Linear Layout - android

Basicly i created all my layouts with a library that is already deprecated (PercentRelativeLayout) everything works well except that i have this layout inside a ScrollView, and the scroll doesn't work on all devices.
I read some topics about it and seems the issue is with the Percent Library.
So i need to move on and construct the Lienar Layout example, i tried to construct my layout with the current Layout that i have but everything got buggy, the spaces between the elements are never the same as i had with the percent.
Basicly what i need is this:
The elements are top down -> toolbar -> thumbnail -> recycle view(this one just has a unique image -> details about this foto.
I have more details about it, but if i can construct this example its fine.
so my xml that i current have is this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.percent.PercentRelativeLayout 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="wrap_content">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:srcCompat="#android:drawable/ic_menu_camera"
android:elevation="2dp"
app:layout_widthPercent="90%"
app:layout_heightPercent="10%"
app:layout_marginTopPercent="90%"
app:layout_marginLeftPercent="80%"
app:backgroundTint="#f1c40f"
android:onClick="capture"/>
<include
layout="#layout/custom_toolbar"
android:id="#+id/my_toolbar"
app:layout_widthPercent="100%"
app:layout_heightPercent="8%"
app:layout_marginTopPercent="0%"
app:layout_marginLeftPercent="0%"/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/SpecieName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="14dp"
app:layout_widthPercent="60%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="85%"
app:layout_marginLeftPercent="30%"/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/GenreName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="genrePressed"
android:textColor="#color/nephritis"
android:textSize="14dp"
app:layout_widthPercent="60%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="95%"
app:layout_marginLeftPercent="30%"/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/FamilyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="familyPressed"
android:textColor="#color/nephritis"
android:textSize="14dp"
app:layout_widthPercent="60%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="105%"
app:layout_marginLeftPercent="30%"/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/textView8"
android:text="Espécie"
android:textSize="14dp"
app:layout_widthPercent="25%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="85%"
app:layout_marginLeftPercent="5%"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/textView7"
app:layout_widthPercent="25%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="95%"
app:layout_marginLeftPercent="5%"
android:text="Género"
android:textSize="14dp" />
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/Family"
app:layout_widthPercent="25%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="105%"
app:layout_marginLeftPercent="5%"
android:text="Familia"
android:textSize="14dp" />
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/specieDescription"
android:textSize="14dp"
app:layout_widthPercent="90%"
android:layout_height="wrap_content"
app:layout_marginTopPercent="120%"
app:layout_marginLeftPercent="5%"/>
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/descricaoTit"
android:text="Descrição"
android:textSize="14dp"
app:layout_widthPercent="30%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="115%"
app:layout_marginLeftPercent="5%"/>
<ImageView
android:id="#+id/plantImage"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:layout_widthPercent="80%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="12%"
app:layout_marginLeftPercent="10%"
app:srcCompat="#drawable/color_cursor_white" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery"
app:layout_widthPercent="100%"
app:layout_heightPercent="10%"
app:layout_marginTopPercent="62%"
app:layout_marginLeftPercent="0%" />
<RelativeLayout
app:layout_widthPercent="40%"
app:layout_heightPercent="5%"
app:layout_marginTopPercent="75%"
app:layout_marginLeftPercent="5%"
android:onClick="showMap">
<com.example.afcosta.inesctec.pt.android.Helpers.OpenSansMedium
android:id="#+id/googleMapsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView6"
android:layout_alignBottom="#+id/imageView6"
android:text="Ver no mapa" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_facebook_placeholder_for_locate_places_on_maps"
android:tint="#F90101" />
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
</ScrollView>

First for solving your problem with ScrollView you must know ScrollView works if you put a LinearLayout to be child of it and then cut all your Views inside this LinearLayout .
See this tree :
| ScrollView
|-- LinearLayout
|---- OtherViews you want to scroll
Its not important what you want to put Scrolling . you must follow this way.
EDIT :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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" >
// everything you want to scroll
</LinearLayout>
</ScrollView>
</LinearLayout>

Related

How to set bottom edge to CardView as Fab shape in BottomAppBar?

I would make an insert FAB in my CardView like the one set by default in the BottomAppBar.
I changed my CardView to MaterialCardView to change the bottom edge bu setting the BottomAppBarTopEdgeTreatment
The issue is that i'm playing with the fabMargin, roundedCornerRadius, cradleVerticalOffset and fabDiameter but i can't set it's values to get the result from the native BottomAppBar inset FAB.
so which values should i set in it?
Desired behaviour would be like this (Actual picture of my BottomAppBar):
While i get this (Actual picture of my CardView):
My FAB code looks like this:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btnScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:contentDescription="#string/nuovo_documento"
android:translationY="-36dp"
app:layout_anchor="#id/cardView"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#drawable/ic_outline_qr_code_scanner"
app:tint="#color/white" />
And the code where i set the shape to the Card is the following:
val bottomAppBarTreatment = BottomAppBarTopEdgeTreatment(16f, 2f, 8f)
bottomAppBarTreatment.fabDiameter = 110f
cardView.shapeAppearanceModel = cardView.shapeAppearanceModel.toBuilder()
.setBottomEdge(bottomAppBarTreatment)
.build()
You can use something like:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btnScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationY="24dp"
../>
and:
val bottomAppBarTopEdgeTreatment = BottomAppBarTopEdgeTreatment(
resources.getDimension(R.dimen.margin), //5dp
resources.getDimension(R.dimen.rounded_corner), //8dp
resources.getDimension(R.dimen.vertical_offset) //0dp
)
bottomAppBarTopEdgeTreatment.fabDiameter = resources.getDimension(R.dimen.diameter) //56dp
cardView.shapeAppearanceModel = cardView.shapeAppearanceModel.toBuilder()
.setTopEdge(bottomAppBarTreatment)
.build()
I'm using below code snippet to achive this result using background image like below.
XML File:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<RelativeLayout
android:id="#+id/rr_fab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/ll_bottom_nav"
android:layout_below="#+id/ll_top"
android:background="#android:color/transparent">
<LinearLayout
android:id="#+id/ll_last"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:foreground="#android:color/transparent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:foreground="#android:color/transparent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fac_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_10"
app:backgroundTint="#color/colorPrimary"
app:srcCompat="#mipmap/home" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_bottom_nav"
android:layout_width="match_parent"
android:layout_height="#dimen/padding_50"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:background="#drawable/cut_nav_full_another_grey_two"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="10"
app:layout_behavior="com.wpa3.productshopify.widget.BottomNavigationViewBehavior">
<TextView
android:id="#+id/tv_category"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2.2"
android:drawableTop="#mipmap/category"
android:gravity="center"
android:text="#string/category"
android:textColor="#color/gray71"
android:textSize="#dimen/text_size_16" />
<TextView
android:id="#+id/tv_orders"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:drawableTop="#mipmap/order"
android:gravity="center"
android:text="#string/track_your_order"
android:textColor="#color/gray71"
android:textSize="#dimen/text_size_16" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent" />
<TextView
android:id="#+id/tv_profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:drawableTop="#mipmap/profile"
android:gravity="center"
android:text="#string/my_account"
android:textColor="#color/gray71"
android:textSize="#dimen/text_size_16" />
<TextView
android:id="#+id/tv_more"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:drawableTop="#mipmap/more"
android:gravity="center"
android:text="#string/more"
android:textColor="#color/gray71"
android:textSize="#dimen/text_size_16" />
</LinearLayout>
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
Background Image = https://imgur.com/a/3cOhy9E
Hope this may helps you.

Centering Nested Relative layout in parent

I have to make (sort of) footer for empty screen. My parent layout is RelativeLayout1. Inside this layout I have ToolBar and below that is another RelativeLayout2.
Inside this RelativeLayout2 is Button and another RelativeLayout3. I made it that way, because I want to center RelativeLayout3 content in RelativeLayout2 and Button should always align bottom of the parent layout(RelativeLayout2)
I got answer for similar question before, but it doesnt always work. My problem now is that RelativeLayout3 is off-centered vertically(it's closer to the bottom).
How it should looks like
How it actually looks like
How to fix this?
Full Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/colorBackground"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/toolbar_round"
android:orientation="horizontal">
<include
android:id="#+id/toolBarContent"
layout="#layout/order_toolbar_layout" />
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:id="#+id/order_complete_footer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolBar"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/order_complete_image_text_layout"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/order_complete_image"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/footer_image" />
<TextView
android:id="#+id/order_complete_text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/order_complete_image"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="-12dp"
android:gravity="center_horizontal"
android:text="#string/order_complete_screen_text1"
android:textColor="#color/colorItemMinor"
android:textStyle="bold"
android:textSize="12sp" />
<TextView
android:id="#+id/order_complete_text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/order_complete_text1"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:gravity="center_horizontal"
android:text="#string/order_complete_screen_text2"
android:textColor="#color/colorItemMinor"
android:textSize="12sp" />
</RelativeLayout>
<Button
android:id="#+id/order_complete_continue_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/address_creation_button_padding_TOP_BOTTOM"
android:layout_marginEnd="#dimen/address_creation_button_padding_START_END"
android:layout_marginStart="#dimen/address_creation_button_padding_START_END"
android:layout_marginTop="#dimen/address_creation_button_padding_TOP_BOTTOM"
android:background="#drawable/login_button_background_void"
android:text="#string/order_complete_screen_button_label"
android:textAppearance="#style/VoidLoginButtonTextAppearance" />
</RelativeLayout>
</RelativeLayout>
If I understood correctly, you should add the following to your order_complete_image_text_layout.
android:layout_above="#id/order_complete_continue_button"
#JanStoltman

How to align buttons next to text that should flow on 2 lines?

So I want to have a title with 2 buttons next to it. These buttons should stick to the left next to the text, and when the text becomes too long, it should flow on 2 lines.
I was able to replicate this by giving the textView a maxwidth, but this causes the textview to take that maxwidth, even if it reflows on 2 lines. Therefore my buttons don't align next to the text anymore.
Like this:
How can I make my textView take the width it needs, not the one I tell it to use as maxWidth?
Here comes the perfectly working answer using ConstraintLayout (as I love this layout).
This is the code.
<android.support.constraint.ConstraintLayout
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.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:maxWidth="300dp">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:maxWidth="300dp"
android:text="Some layout is going to be created and whatever I do it won't cross the limit."
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:layout_height="40dp"
android:background="#365987"
android:layout_width="40dp"
android:layout_marginStart="5dp"
android:id="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"/>
<ImageView
android:id="#+id/image1"
android:layout_height="40dp"
android:background="#e85f11"
android:layout_width="60dp"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Outputs:
Whatever the text is, it will not cross the maxwidth. And with less width than maxwidth, it's width will be wrap_content.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="Male:"
android:textColor="#111111"
android:textSize="12dp" />
<ImageView
android:id="#+id/iv_male"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/block_user" />
<ImageView
android:id="#+id/iv_female"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/blocked_user" />
</LinearLayout>
<TextView
android:id="#+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is something Demo Content"
android:layout_marginLeft="#dimen/_15sdp"
android:textColor="#111111"
android:textSize="12dp" />
</LinearLayout>
So you can just add content below the linear layout complete
I Hope it Helps you and you will get your solution.
Try this code
<?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="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:paddingEnd="100dp"
android:text="Simple textdfddfdf dfdfdfdfdf dfdf Sample Text Sample Text" />
<LinearLayout
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/zero"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Here, You have to pass android:paddingEnd="100dp". This you can manage from dimens.xml
I hope. This will help full
You should use ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Let's take an instance of that Planner part of the image.
<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/constraintLayout"
<!-- Other attributes -->
<TextView
android:id="#+id/text"
android:layout_width = "xxxdp"
android:layout_height = "xxxdp"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
<!-- Other attributes --> />
Definition of Attributes used.
layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.

updating design and support libs broke UI

currently we are using design and support libs 23.1.1 , when i updated to 25 there is a big gap in the layout and i can't figure out why
unfortunately i need more reputation to post links , all the links inside the file , sorry.
https://gist.github.com/xxqxpxx/a652a0c26a132913cd67faf21a670515
included files : build.gradle , layoutfile.xml , fragmentfile.xml , mainactivity ,activity1.
screenshot before :
screenshot after :
In your layout file change the root Linear layout height form match_parent to wrap_content
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/authors_and_publishers_simpleDraweeView_margin_left"
android:orientation="vertical">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/authors_and_publishers_simpleDraweeView"
android:layout_width="#dimen/author_publishers_simpledraweeview"
android:layout_height="#dimen/author_publishers_simpledraweeview"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/authors_publishers_name_layout_margin_top"
android:orientation="vertical">
<com.kotobi.widget.fonts.views.textviews.RobotoLight
android:id="#+id/authorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:lines="1"
android:text="Name"
android:textSize="#dimen/author_publisher_pop_up_followrs_text_size" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/authors_and_publishers_simpleDraweeView_margin_top">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="#dimen/author_publisher_pop_up_image_dimen"
android:layout_height="#dimen/author_publisher_pop_up_image_dimen"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/author_publisher_pop_up_image_dimen_margin_right"
android:background="#drawable/followers" />
<com.kotobi.widget.fonts.views.textviews.RobotoLight
android:id="#+id/numberOfFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="12"
android:textColor="#color/grey"
android:textSize="#dimen/author_publisher_pop_up_followrs_number_books" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<ImageView
android:layout_width="#dimen/author_publisher_pop_up_image_dimen"
android:layout_height="#dimen/author_publisher_pop_up_image_dimen"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/author_publisher_pop_up_image_dimen_margin_right"
android:background="#drawable/number_books" />
<com.kotobi.widget.fonts.views.textviews.RobotoLight
android:id="#+id/numberOfBooks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="12"
android:textColor="#color/grey"
android:textSize="#dimen/author_publisher_pop_up_followrs_number_books" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

How to keep a View on top of my Fragments

Sounds like a question that was answered before but from my research I couldn't find a solution. My layout is roughly the following:
The main area is a container where I'll add/replace Fragments, and the bottom is where I place a bottom navigation menu. The pink View is a button that I need to place on top of my menu (and that's not working).
Every time I add a Fragment to the main view, my "Menu" text disappears, even though the TextView is added after the container View. Same with the pink Button, which is added after the bottom menu container (see my xml below).
How can I keep both "Menu" TextView and the pink Button always on top of my Fragments?
This is my xml:
<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:background="#eee"
tools:context="com.wecancer.wecancer.activities.Menu">
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="520dp"
android:layout_marginBottom="0dp"
>
</FrameLayout>
<TextView
android:id="#+id/main_center_tv"
android:layout_centerVertical="true"
android:textSize="24sp"
android:layout_centerHorizontal="true"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/lightGray"
android:layout_height="40dp"
>
</FrameLayout>
<Button
android:elevation="1dp"
android:id="#+id/menu_plus_img"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:layout_width="70dp"
android:layout_marginBottom="0dp"
android:layout_height="70dp"
tools:targetApi="lollipop" />
</RelativeLayout>
Try This`
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="40dp"
>
</FrameLayout>
<Button
android:elevation="1dp"
android:id="#+id/menu_plus_img"
android:background="#color/colorAccent"
android:layout_width="70dp"
android:layout_height="70dp"
tools:targetApi="lollipop"
android:layout_marginLeft="71dp"
android:layout_marginStart="71dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/main_center_tv"
android:textSize="24sp"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_alignBaseline="#+id/menu_plus_img"
android:layout_alignBottom="#+id/menu_plus_img"
android:layout_toRightOf="#+id/menu_plus_img"
android:layout_toEndOf="#+id/menu_plus_img" />
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="520dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/menu_plus_img">
</FrameLayout>
`
You just have to change the order of the views in the layout while using a Framelayout
The complexity of your layout does not require a RelativeLayout so you just have to switch.
I don't really know why methods like bringToFront, bringChildToFront, or adding and removing View's children to change their indices didn't work. So I actually had to create a new layout structure.
Instead of:
RelativeLayout
...FrameLayout
...TextView
...FrameLayout
...Button
I did:
FrameLayout
...RelativeLayout
......FrameLayout
......FrameLayout
......TextView
...RelativeLayout
......Button
Whereas the second RelativeLayout has only a button and a transparent background. My full xml code is below as a reference.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_root_view"
android:layout_height="match_parent">
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
tools:context="com.wecancer.wecancer.activities.Menu">
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/lightGray"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp" />
<TextView
android:id="#+id/main_center_tv"
android:layout_centerVertical="true"
android:textSize="24sp"
android:layout_centerHorizontal="true"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:onClick="menuPlusBt"
android:elevation="5dp"
android:id="#+id/menu_plus_img"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#drawable/green_circle"
android:layout_width="70dp"
android:layout_marginBottom="0dp"
android:layout_height="70dp"
tools:targetApi="lollipop" />
</RelativeLayout>
</FrameLayout>

Categories

Resources