Nested Relative and Linear Layout - android

I am new to layouts in android and would like to implement a layout like the one shown below however I am a bit confused as to how I should layer my layouts in XML.
I am currently trying a:
<LinearLayout>
<RelativeLayout>
<ImageView>
<TextView>
</RelativeLayout>
<LinearLayout>
<ImageView>
<TextView>
<ImageView>
<TextView>
</LinearLayout>
</LinearLayout>
I don't want to over complicate my layout structure. Would there be a better way to structure this?

Might be best to have a look at this link. As a rule of thumb, don't try and nest layouts too much, i.e. keep them as shallow as possible.
So relative layouts are usually better in this case.
http://developer.android.com/resources/articles/layout-tricks-efficiency.html

Related

What type of View is used?

I have been trying to figured out what kind of View was the 2 rectangle, I would like to use the same kind of design. I though at first it was a CardView but I think it can be since they are not the same.
Sorry if my question is really basic, I'm still on the learning process.
This view is not one single view, but rather a compound view. To reproduce this type of view, I would recommend, broadly, something like this:
<LinearLayout>
<CardView>
<TextView/> //Name
<TextView/> //Location w/ drawableStart set
<TextView/> //Phone w/ drawableStart set
<TextView/> //link w/ drawableStart set
</CardView>
<CardView>
<TextView/> //Title
<TextView/> //Body
</CardView>
</LinearLayout>
Both of them are CardView only, give a light gray background for the root layout and for card views give elevation and corner radius.

Most fitting View/Layout for placing several text- and image views inside, XML for Android

So I have this ScrollView inside which I have a RelativeLayout on one of my views on my Android app. Inside the RelativeLayout I already have a TableLayout that I'm using, and above it I want; 2 different text views (one header and one longer text, and I want the header to be placed on top of the longer bit of text) aswell as an ImageView that I want to be placed to the right of the 2 TextViews, and I want all 3 views to be placed on a differently colored background than the other stuff on the ScrollView such as the TableLayout for example.
I tried putting another RelativeLayout inside the ScrollView but it tells me ScrollView can only host one direct child, so that didn't really pan out. What would the most fitting way to accomplish this? Because I want this 3-view-background-thingie to scroll with the TableLayout and all the other stuff on the view.
As always, thankful for any answers or tips!
(My design kinda looks like this at the moment, schematically;)
<Container (that doesn't scroll)/>
<ScrollView
<RelativeLayout
*Alot of stuff here, such as a TableLayout for example
</RelativeLayout>
</ScrollView>
Put everything in your RelativeLayout
<ScrollView
<RelativeLayout
<LinearLayout>
<TextView>
</TextView>
<TextView>
</TextView>
<ImageView>
</ImageView>
</LinearLayout>
<TableLayout>
</TableLayout>
</RelativeLayout>
</ScrollView>
This way, the only child is the RelativeLayout, the others being children of the RelativeLayout.
Hope this helps!

How do i put multiple images(ImageView) in a ScrollView?

i want to put multiple images and scroll down and see them all. I tried to put a ScrollView and inside a ImageView but i dont know if i need to put a layout. I searched tutorials but i didnt found what i needed.
That's clearly not how ScrollViews work. ScrollView is a ViewGroup, so you have to put it outside the view that you want to scroll.
Also, there can only be one view as the direct child of scroll view. So you cannot do this:
<ScrollView>
<ImageView>
<ImageView>
<ImageView>
</ScrollView>
Actually, you should put the images in a LinearLayout, and put the LinearLayout in the scroll view.
<ScrollView>
<LinearLayout>
<ImageView>
<ImageView>
<ImageView>
</LinearLayout>
</ScrollView>
Note: the attributes are omitted because I'm lazy :P
EDIT:
If you want to scroll down, just set the orientation attribute to "vertical".
<ScrollView>
<LinearLayout
android:orientation="vertical"
other attributes.../>
image views here...
</LinearLayout
</ScrollView>
Check out the Android documentation for CardViews http://developer.android.com/training/material/lists-cards.html
You can put an image within each CardView element and a sharebutton below the image. As I previously said, good memory management is a must when working with images and the RecyclerView will work just well.
Cheers
Try this method
<ScrollView>
<LinearLayout>
<ImageView>
<ImageView>
<ImageView>
<ImageView>
<ImageView>
</LinearLayout>
</ScrollView>

Warning: This <FrameLayout> can be replaced with a <merge> tag

I have a FrameLayout that contains a TextView and two LinearLayouts:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
... a textview and 2 linearlayouts
</FrameLayout>
After running Android Lint, I get this warning: This <FrameLayout> can be replaced with a <merge> tag.
Why does this warning exist? What can I do to fix it (other than ignore)?
To understand this, you need to understand how layouts are inflated and placed.
Let's say for example, you have an activity and this is the layout xml you use. Here is what the layout of the activity looks before you put your layout file.
<FrameLayout> // This is the window
<FrameLayout> // This is activity
</FrameLayout>
</FrameLayout>
There might be few other layers depending on the device/OS.
Now when you inflate your layout file and put it in, this is how it will look.
<FrameLayout> // This is the window
<FrameLayout> // This is activity
//A textview and 2 linearlayouts
</FrameLayout>
</FrameLayout>
Do you see the FrameLayout inside the other FrameLayout? It is redundant to have that since it does not add much value. To optimize, you can replace your outer FrameLayout with the <merge> tag. This is what it will look like.
<merge> // This is the window
<FrameLayout> // This is activity
//A textview and 2 linearlayouts
</FrameLayout>
</merge>
Notice how there is no extra FrameLayout. Instead, it is just merged with the FrameLayout of the activity. Whenever you can, you should use <merge>. This doesn't only apply to FrameLayouts. You can read more about it here. http://developer.android.com/training/improving-layouts/reusing-layouts.html#Merge
Hope this helps.
Are you using this as the main layout of your activity? If so, you can replace it with a merge tag like this:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
... a textview and 2 linearlayouts
</merge>
At setContentView, Android will take the children of the merge tag and directly insert them to the FrameLayout with #android:id/content. Examine both approaches (FrameLayout vs merge) with HierarachyViewer to see the difference.
Refer this post by the Romain Guy for more information. It tells you why the merge option is suggested.
To render the XML in the device a process is followed in phases, and the first one is Measure.
Measure: In this phase, the sizes of the parent and their children and
their children, and so on, is measured. So your CPU scans all the
ViewGroup and View in your layout to measure their sizes. And sometimes for some
reasons, it may require this scanning recursively because of the
dependency of the size of the parent and their children on each other.
So why Lint is giving this warning?
Because your XML eventually will be loaded into a window which contains FrameLayout and in your XML file you are also using the FrameLayout, so eventually your XML will be placed in
FrameLayout of the window and it will be like this:
<FrameLayout> <!--belongs to window-->
<FrameLayout> <!--belongs to your XML-->
...
</FrameLayout>
</FrameLayout>
Now there is an overhead for CPU in the measure phase, to measure both the FrameLayout. And this overhead can be overcome if we can somehow manage to use the outer FrameLayout in our XML, that's exactly possible via merge tag.

Controlling the scroll bar in my Android application

I have three linear sub layouts in my activity window in my Android application. Each layout has one scroll bar. My problem is when I am trying scroll in one layout area other layouts scroll bars also activating. Could you please suggest a solution for this?
ONE <scrollView> can hold at max ONE component inside it....... this ONE component can be either a layout holding several other views or further layouts inside it, or it can be a single view.
in order to have 3 separate scrolling linear layouts (meaning scrolling one linearLayout does not affect other LinearLayouts)..... you should have 3 separate <ScrollView> elements - each scrollview containing at max ONE of your THREE linearLayout.
for example:
<ScrollView>
<LinearLayout>
all sub-components of **LinearLayout1** goes here
<LinearLayout>
</ScrollView>
<ScrollView>
<LinearLayout>
all sub-components of **LinearLayout2** goes here
<LinearLayout>
</ScrollView>
<ScrollView>
<LinearLayout>
all sub-components of **LinearLayout3** goes here
<LinearLayout>
</ScrollView>
hope it helps you.

Categories

Resources