Develop Reference

layout_below doesn't place text underneath

Hello, I tried to copy the Code of a tutorial, but it doesn't work out for me... The Layout_below won't move the text to underneath the picture, can somebody help?
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="#string/todo" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="#string/meal_name"
android:textSize="16sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>

your text view and image view are not inside RelativeLayout
replace below code with your code
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="some text" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="cheese pizza "
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>

close Relative layout using </RelativeLayout> after Textview

View not visible in device but visible in XML

I am trying to build a layout with a right arrow and a vertical line with 2 textviews to right of it.
This layout will be used in a RecyclerView
This is the code that I am using,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
android:id="#+id/rootLayout"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_margin="#dimen/app_margin"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/right_arrow"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:id="#+id/right_arrow"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the result of the above layout
The blue line is not visible when I run the output on my device but is visible in XML as shown
My Questions
How do I make it visible in my device ?
The blue line is very big I tried wrap_content but still did not work

You can simply align your lineView upto the height of text views. otherwise it will grow upto the device height. Refer this sample.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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:layout_margin="10dp"
app:cardBackgroundColor="#FFFFFF"
app:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<View
android:id="#+id/view"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearLayout"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/view"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
<TextView
android:id="#+id/value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
</LinearLayout>
<ImageView
android:id="#+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/ic_keyboard_arrow_right_black_24px" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Screenshot of above example:

To fit the line according to content use this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<LinearLayout />

Custom row with circular ImageView and textview in android

I am trying to create a custom row for my RecyclerView. Here is my custom row layout:
<?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="180dp"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_above="#+id/gameText"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</RelativeLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>
This is how it looks like:
The problem is, I have to define a predefined height of the custom row i.e 170dp currently. I am facing 2 problems because of this:
1) If I open the application in a small screen or a tablet device. The custom row is looking ugly i.e I loose the circular shape of the ImageView.
2) The text doesn't remain at the centre if there is a slight change in the layout.

Try this in your code .
<?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="wrap_content"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="#fff"
android:textSize="45sp"/>
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing"/>
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone"/>
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>

Try This. You can use Linearlayout as root than for image and text use RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00000000"
android:orientation="vertical">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</LinearLayout>

Use constrain layout which helps you to set image like you want just by drag and drop and add constrain

For supporting multiple screen. First you have to go through this link
enter link description here
Once you fix first issue, second issue also will get fix

layout_below not working in RelativeLayout

I have a Relative Layout with 3 children.
1st is ImageView cover.
2nd is ImageView avatar center in parent and
3rd is TextView app name below avatar and center horizontal.
As in theory it should work but my layout not place text below avatar. What's wrong with RelativeLayout?
P/S: I've tried both android:layout_below="#+id/logo2" and android:layout_below="#id/logo2" but still didn't work!
Thank you!
Here is my xml layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>
And the result:

Change the parent Relative Layout height to match parent. It will work.
Like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>

try below code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"
android:layout_margin="5dp"/>
<RelativeLayout
android:id="#+id/profile_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logo"
android:elevation="4dp"
android:layout_marginTop="64dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAA"
android:textStyle="bold"
android:layout_margin="10dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>

Try this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="10dp"
android:adjustViewBounds="true"
android:src="#drawable/android_apple" />
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/logo2"
android:layout_below="#+id/logo2"
android:text="AAAAAAA"
android:textStyle="bold" />
</RelativeLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
You are using layout_below="#+id/logo2". Use layout_below="#id/logo2", It will work.

Imageview not centered in parent - Android

I'm trying to position the blue icon precisely in the center of the card, but for some reason the icon goes up to the top of the card.
Can someone tell me what's wrong?
Thanks,
Here's a screenshot of my problem:
<GridView
android:id="#+id/documents_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:columnWidth="#dimen/document_grid_item_width"
android:gravity="center"
android:horizontalSpacing="0dp"
android:numColumns="auto_fit"
android:stretchMode="spacingWidthUniform"
android:verticalSpacing="48dp" />
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:focusable="true"
android:foreground="?android:selectableItemBackground"
android:background="#drawable/document_grid_item_bg">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/draft_more_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
app:srcCompat="#drawable/ic_more" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#drawable/draft_icon" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="0.1">
<TextView
android:id="#+id/draft_date_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Date" />
</RelativeLayout>

I assume that in gridview item your parent is LinearLayout which can't be seen from your code snippet. If that's the case, in FrameLayout properties set the height to wrap_content
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:focusable="true"
android:foreground="?android:selectableItemBackground"
android:background="#drawable/document_grid_item_bg">

Given code snippet is working fine with LinearLayout as parent.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:focusable="true"
android:background="#color/colorGreen"
android:foreground="?android:selectableItemBackground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/draft_more_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
app:srcCompat="#drawable/ic_more" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/draft_icon"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="0.1">
<TextView
android:id="#+id/draft_date_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Date" />
</RelativeLayout>
</LinearLayout>

1. Remove FrameLayout and add its attributes to child RelativeLayout.
2. Use attribute android:src instead of app:srcCompat to set image on ImageView.
Try this:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:background="#fff">
<ImageView
android:id="#+id/draft_more_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_more" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/draft_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="0.1">
<TextView
android:id="#+id/draft_date_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="16 May 2017" />
</RelativeLayout>
</LinearLayout>
FYI, If you are using CardView as a container, then just put below LinearLayout inside your CardView.
OUTPUT: