Display TextView after ImageView - android

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.

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

You can use linearlayout with orientation="vertical" and Its really easy to implement.

You can use LinearLayout or RelativeLayout
If You use LinearLayout So you can set orientation="vertical"
If You use RelativeLayout So 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>

Related

Nested View forcing it's parent's size to match_parent instead of wrap_content

I am wondering if it is possible to make one View adjust it's height to it's parent height when the parent has layout_height="wrap_content". In following example:
<?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"
android:background="#color/red"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/time"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"/>
</RelativeLayout>
the nested ImageView makes RelativeLayout expand it's height to match it's own parent. What I would like to achieve is that RelativeLayout has height equal to the one of the inner TextView and ImageView should work here as a background spanning only behind the text. Is this possible in pure XML without Java code tricks?
If you use a RelativeLayout (as you do), you can have Views or ViewGroups layout referencing other Views or ViewGroups by id.
In your case, if you assign an id to your TextView android:ud="#+id/tvHello" then you can align the top and bottom of your ImageView to that TextView:
android:layout_alignTop="#+id/tvHello"
android:layout_alignBottom="#+id/tvHello"
For completeness, here's your 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"
android:background="#color/red"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignTop="#+id/tvHello"
android:layout_alignBottom="#+id/tvHello"
android:src="#drawable/time"/>
<TextView
android:id="#+id/tvHello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"/>
</RelativeLayout>
As you can see, I made the height of the ImageView 0dp. I could've chosen for wrap_content or maybe even match_parent, but because the alignTop and alignBottom overrules it's, it is better to give the view a fixed height. This is due to performance. Now android doesn't have to measure the height of the ImageView, before it's to decide to make it the same height as your TextView after all.
One other way (and perhaps better - depending on how you want your images to scale), is to attach a drawable as background to your RelativeLayout. As such:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/time"
android:orientation="vertical">
I hope this helps you out a little bit and it's helpful (it is my first time answering on stackoverflow).
happy coding!

Layout weight in relative layout

I am aware about layout weight in linear layout. Can i assign layout weight in relative layout.
example: two image view in a layout which fills the layout in the ratio 60:40. first image should take up 60% of the whole screen height and the second image has to take the remaining 40% of the screen.
Don't just answer for this example problem alone please tell me the concept precisely or post some reference links about layout weight in relative layout. Thanks in advance.
You can place an invisible view in center of your layout and align your view in left and right. Here is an example
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/view"
android:background="#fffba2" />
<View
android:id="#+id/view"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/view"
android:background="#ba2fff" />
</RelativeLayout>
There is no need of weights with Relative Layout. You can move around the Image Views to make sure that they are in correct proportion. Weights are only used with LinearLayout.
Actually you cannot use weight in a RelativeLayout but you can use a combination of Relative and Linear layouts in order to take both advantages of them!
Tip: Try to use as less layouts as possible to avoid slow UI, because of multiple screen measurements! [1] [2]

Putting two child layout inside a parent layout with equal weight distribution in Android

I want to use two child layout (one linear layout and one relative layout) inside a parent layout (relative layout) in such a way that both of the child layout will take exactly half of the screen and items inside of each child layout will not cause one child layout to get more width than another one!
It is pretty easy, use parameter layout_weight in children of LinearLayout, something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
</RelativeLayout>
</LinearLayout>
If I understand correctly from your illustration, the red box is a RelativeLayout, whereas the green boxes are a LinearLayout and a RelativeLayout.
A simple solution would be to center an empty View inside the RelativeLayout and align the two child Views against it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/v_center" />
<View
android:id="#+id/v_center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/v_center" />
</RelativeLayout>
A nice little bonus here is that you can provide some spacing between the two by specifying the View's dimensions.
Beware, however, that RelativeLayouts aren't very efficient, and nesting them is an especially bad idea. I suggest using the hierarchy viewer tool to inspect the layout timings to make sure it's relatively fast, and to try to avoid nesting the layouts in this fashion.

How to make 2 images views each be sized to cover screen inside a linear layout inside a horizontal scrollview

I'm trying to get 2 (or more as needed) imageviews inside a linearlayout inside a horizontalscrollview, such that each image is scaled to fit the screen height without distorting the image ie one image showing as large as possible on screen, scroll to see next one.
once the second image is added, i get 2 small images next to each other (dimensions are 217 * 300px for both images). currently my activity_main.xml looks like the following..
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/image1"
android:src="#drawable/luke"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/luke"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
/>
</LinearLayout>
</HorizontalScrollView>
</FrameLayout>
I've tried various combinations of match_parent, fill_parent, wrap_content on the layouts, all the scaleTypes on the image views and spent over a day browsing the net looking for an example similar to what i want, but no luck.
I would say to set these two things:
<ImageView
android:layout_height = "match_parent"
android:layout_width = "10dp" />
This is the tricky part. Get the screen width at runtime, and set it to the imageView.
I'd be inclined to use a viewpager with a custom page adapter showing your scaled imageview instead of trying to do it in way you are currently.
The view pager / adapter would handle view recyling, page snapping etc for you.
how about using
android:width="0"
android:weight ="1"
android:height="match_parent"
In the imageViews
and match_parent else where in your layout.

Left aligning images in LinearLayout using gravity or linear_gravity in XML

First off, this is not a duplicate question, to best of my ability I've tried all (there are many) similar questions. Solutions to such problems appear to be very subjective, specific to a given scenario.
My layout currently appears as follows. Black boxes are images (logo and body, respectively), colours represent each layout:
My XML:
<?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:background="#000"
android:padding="0px"
android:layout_margin="0px"
android:orientation="vertical">
<LinearLayout
android:layout_weight="16"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/logo"
android:layout_gravity="top|center" />
</LinearLayout>
<LinearLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00F"
android:gravity="bottom|left"
android:orientation="vertical">
<ImageView
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/body"
android:layout_gravity="bottom|left" />
</LinearLayout>
</LinearLayout>
Here you can see I have a parent linear layout, split into two children linear layouts. This is because I need the images to be positioned differently within that part of the page.
In a nutshell, I need logo to be vertically aligned to the top, and body horizontally aligned to bottom-left.
Now, a few things that I've tried:
Using RelativeLayout rather than Linear
Switching gravity with layout_gravity for both LinearLayout and ImageView, along with combinations of excluding each
Fairly confident match_parent for width and height is what I want, but I have tried different combinations with wrap_content
What I've come to understand:
gravity:top requires the parent view use orientation:horizontal
gravity:left requires the parent view use orientation:vertical
gravity applies to the children of the view
linear_gravity applies how the child aligns with it's parent
Using the same value for gravity on the parent and linear_gravity on the child might have the same effect (when using one instead of the other)?
Hopefully this is enough information. I'm having a very difficult time wrapping my head around how these layouts work.
Thank you SO much for the help!
I think your problem is you are setting dimensions of the image views to match_parent. I would use a RelativeLayout as it seems to be the most efficient in your case (pseudo-XML-code):
RelativeLayout (width=match_parent, height=match_parent)
ImageView (width=wrap_content, height=wrap_content,
alignParentTop=true, centerHorizontal=true)
ImageView (width=wrap_content, height=wrap_content,
alignParentBottom=true, alignParentLeft=true)
You don't need any gravity setting here. You might want to play with the scaleType attribute depending on your image sizes.

Categories

Resources