I have been working on layout lately. There are two image shown. First one shows what I need and Second one shows what I get.
Can anybody suggest me how to achieve this with LinearLayout.
And when I say LinearLayout that means no layout_weight or RelativeLayout need to be used. I know using these two will simplify my work, but I want why through my code its not achieved. Below is my code for XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mytext" />
<ImageButton
android:id="#+id/ib"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|center_vertical"
android:src="#android:drawable/ic_lock_idle_alarm"
android:contentDescription="#+id/ibutton" />
</LinearLayout>
I do this by adding a dummy View with layout_weight="1" and layout_width="0dp" between the the views I want on the left of the parent and those I want on the right. This will expand to fill the space, assuming the other views have no weight. Crude but effective.
In my opinion it is not possible to get a layout shown in 1st pic by using just one LinearLayout. Can you mention specific reason why you don't want to use RelativeLayout?
Such layouts can easily be made using single RelativeLayout. May be there is a workaround for the situation which is restricting you to use RelativeLayout/layout_weight.
Related
I tried Expand ListView method from using the code from the following blog, https://wirasetiawan29.wordpress.com/2016/01/20/membuat-expand-listview-material-design-di-android/
Everything works fine. But if I add a button in FrameLayout then the touchevent for listview item not works properly. Also I tried changing FrameLayout to Relative & also to Linear, but still no success.
<FrameLayout
android:id="#+id/wrapper"
android:layout_below="#+id/rl_title_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/deskripsi"
android:padding="16dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="Share"/>
</FrameLayout>
Thanks in advance.
According to Frame Layout description by Google's documentation...
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other. You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
Hence, your original TextView is actually overlapping by the Button (Share). You can use android:layout_gravity="right" to position the button in the right end of the screen, however, then you will have to fix the maxium length of string for TextView, so that it doesn't get overlap by the Button on the right.
If you don't have any problem, might I suggest you to use LinearLayout? It's easier to handle and render by the GPU (As far as I know). Here's an example code of your item...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrapper"
android:layout_below="#+id/rl_title_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="#+id/deskripsi"
android:padding="16dp"
android:layout_weight="1"
android:layout_gravity="left|center"
android:text="This is a big chunk of description for your listView item. you can write as much as you want...."
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share"
android:layout_gravity="right|center"/>
</LinearLayout>
You can also use RelativeLayout and GridLayout here.
I hope it answers your question. Cheers!
I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.
My question is more informative. I just want to know how to make such design. I found android application called "weather timeline" and inside of that application between CardViews (as I understand) they used this element which I pointed out in picture below. I think its just ImageView but how to set it as here. It will be interesting to know any idea about that! Thanks for attection!
You could easily do it in the following way.
Let us assume that we are using a collection view where the card element is one type and the black gap with text in the middle is the other.
The cardView would look something like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="#dimen/circle_radius_half_size"
android:layout_marginBottom="#dimen/circle_radius_half_size">
</CardView>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_align_parentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle"
android:rotation="180"/>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle" />
</RelativeLayout>
Where drawable circle looks something like this
and the layout for black grape with text in the middle looks something like this
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<View
android:layout_width="#dimen/width_of_line"
android:layout_height="match_parent"
android:layout_margin_left="#dimen/line_margin"
android:background="#color/white" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin_left="#dimen/line_margin" >
<!-- The Text View Layouts Here -->
</LinearLayout>
</LinearLayout>
Where line_margin is 24dp + CircleHalfSize - LineWidthHalfSize
Of course the CircleHalfSize and LineWidthHalfSize are in DP
Now it is just a question of arranging them properly via the adapter. Personally I would use the RecyclerView. Great Flexibility.
Also this way if you wanted the bubbles to be gone, all you have to do is set the bubble ImageView's visibility to GONE and that too you can do specifically either for the top or the bottom.
I'm pretty sure that this could be accomplished using 9-patched images.
By determining the way to draw your patches and how to set them as a background for your layouts you'll get the same result.
Quick illustrated demo
By adjusting the two backgrounds exactly one above the other you'll get the UI you posted.
Hope it helps.
Further reading
To see how to draw 9-patched images here is a documentation.
This can be accomplished by using a RelativeLayout. Then you can align all your views however you want inside your main view.
Thus, you would layout Card1 at the top, then layout the bubble connector with your marginTop attribute (remember this is from the top of the container, not from the bottom of the card) to layout that view wherever you want.
Basically, you would use a single RelativeLayout, then align the various views within that container wherever you want in relation to each other (or really in relation to the the top of your main view).
Checkout this Pseudo-code:
<RelativeLayout >
<CardView
layout_height = "8dp"
alignParentTop = "true"
/>
<!-- Connector Image -->
<ImageView
alignParentTop = "true"
layoutMarginTop = "10dp" <!-- or whatever it takes to align properly with CardView -->
/>
</RelativeLayout>
I'm new to android programming but from how much I have understood of the layouts from the documentation, RelativeLayout is mostly used when you need the views based on some rules and the FrameLayout when you want to overlap views.
But unfortunately for the following program I get the work of FrameLayout done by using RelativeLayout. I got my work done but for understanding, Am I missing something in the difference?
Also, how did the buttons come over my image? (Even the other image is overlapping.)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_alignLeft="#id/imageView1"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Login" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Register" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Try application" />
</LinearLayout>
</RelativeLayout>
The RelativeLayout can use :
android:layout_toEndOf="#id/some_view"
android:layout_toStartOf="#id/some_view"
android:layout_above="#id/some_view"
android:layout_below="#id/some_view"
to make sure views lineup correctly in relation to each other. FrameLayout is very similar except it's only using gravity to put display its views (with no relation).
I would also suggest you to take a look at the ConstraintLayout component. ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.
RelativeLayout based on relation of views. It is a layout manager that helps you arrange your UI elements based on some rule. You can specify things like: align this to parents left edge, place this to the left/right of this elements etc.
FrameLayout allows placements along Z-axis. That is you can stack your view elements one above the other.
RelativeLayout - As the name suggest in this viewgroup, view are placed relative to each other. Most used property of relativelayout are used are
android:layout_toLeftOf="#id/some_view1"
android:layout_toRightOf="#id/some_view2"
android:layout_above="#id/some_view3"
android:layout_below="#id/some_view4"
android:layout_toendof="#id/some_view5"
android:layout_tostartof="#id/some_view6"
View are placeed relative to each other. It is really helpful while developing complex designed.
FrameLayout - It behaves as a single object view are not placed relative to each but as per to the FrameLayout. FrameLayout takes the size of biggest child view.
android:gravity="center_horizontal|center_vertical|bottom"
Using above property child views position is modified.
[Second Edited]
I found where problem is. But i dont know why its doing. It cant be margin on LinearLayout (or just marginLeft). Does anybody know why it cant have ?
[EDITED]
Hello i have xml file in layout like bellow.And iam adding TextViews from any xml layout to horizontal LinearLayout. This layout structure is given and i cant change it.
And last added TextView is streching always verticaly. I dont know why i am in tottaly despair. Too many hours i was try* that but without no idea. I know just its not in programicaly adding TextViews ..
If some body know why its doing i will be thankful.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/back_border"
>
<RelativeLayout
android:id="#+id/manager_view_table_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>
<LinearLayout
android:id="#+id/layout_for_textViews"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6px"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#drawable/back_border"
>
<!-- horizontal layout, HERE IAM ADDING TEXTVIEWS -->
</LinearLayout>
</RelativeLayout>
<!--What is here its no important
because, there is RelativeLayout with alignBellow relative layout before -->
</RelativeLayout>
and TextView witch iam addig to LinearLayout:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:paddingRight="7px"
android:paddingLeft="7px"
android:paddingTop="3px"
android:paddingBottom="3px"
android:layout_marginLeft="5px"
android:gravity="center_horizontal"
android:background="#drawable/background_table"
android:textColor="#330033"
android:text="Some text"
/>
Try to replace the android:layout_margin="6px" from the LinearLayout by android:padding="6px".
I think this will solve your problem. I mean the new LInearLayout should be like this:
<LinearLayout
android:id="#+id/layout_for_textViews"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="6px"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#44ff435f"
>
I am confused with your three layouts. Wat's the porpose of all thses nested layouts, try to recreate the text views with a single relative layout, and use the android:layout_above and android:layout_below for placing the text views.
First of all you need to refactor this code.
You might want to use actual ListView to create repeated elements.
and why is xmlns:android="http://schemas.android.com/apk/res/android" declared thrice in this xml code, when it is actually required just once at top root element.
Even with this layout to solve your problem, if other things are not working a nice idea would be to switch to Graphic layout(bottom tab in eclipse when on .xml file) and manually try to set the third TextView (not listview) height manually, you can observe the changes then and finalize them accordingly..