Display TextView after ImageView

Issue

I want to display TextView after ImageView but right now Text is coming over Image on my Android screen.

layout:

<FrameLayout 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"
tools:context="in.sitemakers.sitemakers.AboutFragment">

<ImageView
    android:id="@+id/about_image"
    android:src="@drawable/sitemakers_laptops"
    android:layout_width="match_parent"
    android:scaleType="fitXY"
    android:layout_height="420dp" />

<TextView
    android:layout_below="@+id/about_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Site Makers is the web development company engage in the.."
    />

</FrameLayout>

Please see above screenshot and help me update my XML in such a way so that TextView will come after ImageView.

Solution

Replace FrameLayout with LinearLayout or RelativeLayout because FrameLayout place view one over another

LinearLayout : Place child view in linear fashion , one after another either horizontally or vertically.

Note : Linear layout also let you allocate the available width and height among child views dynamically as per assigned weight property value.

RelativeLayout : A Layout where the positions of the children can be described in relation to each other or to the parent

There are many other ViewGroups you can use as per the instructions

Note : Don't use px instead use dp as android:layout_height="420dp" because px represent actual screen pixel which restrict to keep the same size of your views on large screen (views will be quite small) , as mentioned here with Density independence

Answered By - Pavneet_Singh