Display TextView after ImageView

Question

I want to display a TextView after an ImageView , but right now the text goes over the image on the screen of my Android.

location:

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

See the screenshot above and help me update my XML so that the TextView appears after the ImageView .

Answer 1

Replace FrameLayout with LinearLayout or RelativeLayout , because FrameLayout one above the other

LinearLayout : Place the child view in linear mode, one after the other, either horizontally or vertically.

Note. The linear layout also allows you to dynamically distribute the available width and height among child views according to the assigned value of the weight property.

RelativeLayout : A layout where children's positions can be described relative to each other or to the parent

There are many other ViewGroups you can use according to the instructions.

Note: Do not use px instead of dp instead of android:layout_height="420dp" because px represent the actual screen pixel that limits the same size of your views on the big screen (there will be quite a few views), as mentioned here with Density independence

Answer 2

You can use LinearLayout or RelativeLayout

If you use LinearLayout this way, you can set the orientation = "vertical"

If you use RelativeLayout , you can use android: layout_below = "@ id / about_image" in your TextView.

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" orientation="vertical" android:layout_height="match_parent"> <ImageView android:id="@+id/about_image" android:src="@drawable/sitemakers_laptops" android:layout_width="match_parent" android:scaleType="fitXY" android:layout_height="420px" /> <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.."/> </LinearLayout>