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 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.

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>

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>

Add column border to gridview in android

I am new to gridview layout. could you please help me out how can we add divider/separator to grid view, as we have for tables
Please find the below image

Sadly there is no automatic way to do this. You could try this. Set a 1 or 2 pixel padding around each View in the table, and you should have a border between.
Source : Android GridView with Separator

To create such type of layout you have to assign a Frame to your GridView Item. Lets consider this is your Item's layout :-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" >
<ImageView
android:id="#+id/image_view_product_cell_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<RelativeLayout
android:id="#+id/rel_lay_product_image_frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image_view_product_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ImageView
android:id="#+id/image_view_product"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ProgressBar
android:id="#+id/progress_bar_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/custom_progress_bar"
android:indeterminateDuration="800" />
</RelativeLayout>
<TextView
android:id="#+id/text_view_product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
<TextView
android:id="#+id/text_view_product_brand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_view_product_title"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
in the above layout you can assign your frame to the GridViewItem and provide required margin.