Develop Reference

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 do I place relativelayout under another relativelayout using xml

I am trying to place a relativelayout under another (with recyclerview in it) within an activity layout container.
What I'd like to get is to have the action bar, then below a relativelayout with header (showing a spacer and 2 textviews), and below again another relativelayout that will host cards from a recyclerview.
This is the image of the wanted design:
What I get instead is this:
I am using the following xml (but tried many others)
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.Light">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
tools:ignore="UselessParent">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:contentDescription="image"
android:scaleType="centerCrop"
android:src="#drawable/category_detail_1" />
<TextView
android:id="#+id/spacer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="25sp" />
<TextView
android:id="#+id/sub_header_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/spacer"
android:background="#66555555"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/sub_header_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/sub_header_title"
android:background="#66555555"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/button_container"
android:layout_width="395dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header"
tools:ignore="UselessParent">
<android.support.v4.widget.Space
android:layout_width="#dimen/default_spacing_small"
android:layout_height="#dimen/default_spacing_small" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I tried to put the second RelativeLayout nested as a child of the first one with no luck.
The Android Studio preview shows the design well formatted but after build the card list overlaps the header. Well formatted apart from the unknown line/constraint I do not know how to remove. It constraints the second relativelayout to the top.
What am I missing?
Any help is appreciated.

Use FrameLayout instead of android.support.constraint.ConstraintLayout
Or try with LinearLayout

Display textview below imageview and not bottom to the parent

I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>

Try putting your code inside Scroll view

Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~

Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>

Floating action button above scrollView

How can i position floating button above Scrollview layout...i have tried to position Scrollview and the container of the button(FrameLayout) inside Relative layout but this approach also is not working...
xml file:
<LinearLayout
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:orientation="vertical"
android:weightSum="100">
<ScrollView
android:layout_width="match_parent"
android:layout_height="#dimen/no_size"
android:layout_weight="92">
<LinearLayout
android:id="#+id/questionContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.rey.material.widget.TextView
android:id="#+id/surveyTitleTtv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#android:color/black" />
<com.rey.material.widget.TextView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:layout_marginLeft="12dp"
android:layout_marginBottom="12dp"
android:textColor="#color/accentColor"
android:textSize="17dp"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
<FrameLayout
android:id="#+id/bottomSheetLlt"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="8"
android:background="#android:color/white">
<com.rey.material.widget.FloatingActionButton
android:id="#+id/saveQuestionBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="-20dp"
android:text="ADD"
app:elevation="2dp" />
</FrameLayout>
Please can anyone tell me what's going wrong?

Finally i have managed to resolve the issue..the problem was that i was trying to place FAB inside fragment layout which obviously turned out to be not feasible. I moved it inside my activity xml layout as a child of CoordinatorLayout and now is actually a 'floating' action button...

Just move your FloatingButton above scroll view in xml layout

You need to position a FloatingActionButton within a CoordinatorLayout and use the CoordinatorLayout as the root of your Activity. (FloatingActionButton relies on features which the CoordinatorLayout enables) If your scrollview is a inside a fragment, this is still alright - so long as you assign an ID to the FloatingActionButton you can reference it from inside the fragment.

Replace your xml code with below code. You need to use Relative Layout or Coordinator Layout as root layout. And simply put floatig action button outside of framelayout.
<RelativeLayout 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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/questionContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.rey.material.widget.TextView
android:id="#+id/surveyTitleTtv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:textColor="#android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<com.rey.material.widget.TextView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:textColor="#color/accentColor"
android:textSize="17dp"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
<com.rey.material.widget.FloatingActionButton
android:id="#+id/saveQuestionBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="ADD"
app:elevation="2dp" />

How to hide all elements in a Layout in Android at once?

I'm developing an Android app in eclipse.
I have an XML which has 2 linear layouts next to each other. The left one has several buttons, which make content visible in the right. However, I would not only like these buttons to make specific content visible, but hide (setVisibility.GONE) all the other stuff in that layout. I have already tried removeAllViews, but this is not suitable for me since it deletes them. So my idea is to hide (set the visibility to gone) every single stuff, then make the ones I wish visible. The reason I ask this is that it takes too much time setting the visibility to gone for everything (24, actually) for all the 12 buttons.
Thanks in advance
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/alap"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView4" >
<LinearLayout
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis" />
<Button
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/first" />
<Button
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/second" />
</LinearLayout>
</ScrollView>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:scaleType="center"
android:src="#drawable/cpr1" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="center"
android:src="#drawable/epizodok" />
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>

Please try this...
<LinearLayout
android:id="+id/ll"
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- All content which you hide/show put here -->
</LinearLayout>
now in your class file you read this.
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
after that as per your requirement you hide/show this Layout with their all contents.
like:
For Hide.
ll.setVisibility(View.GONE);
For Show.
ll.setVisibility(View.VISIBLE);
when you hide/show LinearLayout all content with this Layout also hide/show automatically.

Simply, Just take another Linear Layout with vertical layout within your "def" Linear layout..Nd change its visibility as per your need.
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/Subdef"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>

No need to hide views instead of that just use ViewFlipper concept.
Just declare view flipper in your xml file with your two linearlayouts like this
<Viewflipper android:id="#+id/myViewFlipper" android:layout_height="wrap_content" android:layout_width="match_parent">
<LinearLayout android:id="#+id/layout1" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
<LinearLayout android:id="#+id/layout2" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
</Viewflipper>
And get viewflipper reference in your java code like this
Viewflipper mFlipper = (Viewflipper)findViewById(R.id.myViewFlipper);
use mFlipper.showNext(), use mFlipper.showPrevious() methods to hide and show your layouts thats it.