Develop Reference

text wrapping in two lines - recyclerview

i am designing the app having expected UI like this
i am using RecyclerView with
StaggeredGridLayoutManager manager=new StaggeredGridLayoutManager(3,1);
recyclerView.setLayoutManager(manager);
and this is the row xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/padding_8dp"
android:layout_marginLeft="#dimen/padding_4dp"
android:layout_marginRight="#dimen/padding_4dp"
>
<com.skcsllp.mutterfly.views.widgets.MfTextView
android:id="#+id/tagName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/textview"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textSize="#dimen/text_18"
android:background="#drawable/selector_tags"
android:textColor="#color/tags_text_color"
/>
</LinearLayout>
using this much i am getting the output as
i don't want tags to go into second line. i am aware about the fact that i have used the span count as 3 and so getting 3 tags in one line but is there any way to avoid the text wrapping in two lines?

Instead of RecyclerView i would suggest you to use AndroidTagView
need to add dependency
dependencies {
compile 'co.lujun:androidtagview:1.0.3'
}
in your main xml, instead of RecyclerView
<co.lujun.androidtagview.TagContainerLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="10dp"
app:container_enable_drag="false"
app:horizontal_interval="10dp"
app:vertical_interval="10dp"
app:tag_clickable="true"
app:tag_theme="pure_teal" />
and in your activity/fragment
TagContainerLayout mTagContainerLayout = (TagContainerLayout) findViewById(R.id.tagcontainerLayout);
mTagContainerLayout.setTags(List<String> tags);
you will get output something like below, for more you can refer that library, they have given nice example project also.
other usefull libraries are listed below :
https://github.com/loopeer/MultiTextTagView
https://github.com/klinker41/android-chips
https://github.com/ApmeM/android-flowlayout
https://github.com/blazsolar/FlowLayout

I think , you have to write a custom ViewGroup. Using the ViewGroup's onMeasure and onLayout, Get the total width of the screen. Then measure the size of TextView. If the TextView width is less than the screen width, place the TextView. Continue to next TextView, with remaining width. If the TextView width is greater than the remaining screen width, then place the TextView at the next line. Continue this until you placed all the TextViews.

How can this UI featute be achieved in Android?

I want to achieve this feat in Android.
Now this is a processed screenshot of what I want to realize. Above this layout there is a image and those are buttons.Now my question: is this a gridLayout or there are just buttons on a scrollView?

for example:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:columnCount="4"
android:columnOrderPreserved="true"
<Button ...>
<Button ...>
<Button ...>
<Button ...>
<Button ...>
..
</GridLayout>

yes you can do this in both the ways, using grid layout and also using the scroll view but for both cases you have to change the background for the button because Android default button have some padding. If you don't want that space, you need create a custom background for your buttons and remove the padding. also have to change the margins of buttons, this can be achieved by using buttons in a scroll view by keeping all the margins to negative numbers. for example - for two buttons, just set the android:layout_marginRight of the first button to "-8dip" or even more. Than the space between the two buttons will get smaller.

Which of layout should i use?

I'm confused. I want to show the map and on below of map show 5 buttons. I use RelativeLayout, but the program just show Product button. Why? I'm confused which layout i use (Linear,Relative,Frame or absolute )!! Please help me. and How can i correct this code?
location.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frame"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.google.android.maps.MapView
android:id="#+id/mapView"
android:apiKey="0cPRv243zM1_S3ydsNg8MJP9_6BfCp642jOhPvQ"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home" />
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
</LinearLayout>
</LinearLayout>

To answer your specific problem: Instead of saying that the home button is to the left of the product button, you should say that the product button is to the right of the home button. When a RelativeLayout is inflated, the layout is parsed in a linear way so if view A it positioned relative to view B, view B must come first.
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home"/>
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_home"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
Add this to the product button and delete the layout_toLeftOf from the home button.
android:layout_toRightOf="#id/button_home"
You can use gravity and alignment to position the home button and then have the other four buttons following it, each one positioned to the right of the one before it.
Good luck

RelativeLayout by default places these 2 buttons together, so you can just see the latter.
And the line
android:layout_toLeftOf="#+id/button_product"
is wrong. #+id creates an id, use #id in such cases.
I would recommend LinearLayout for the situation. Place these buttons in it, and adjust them with some margin.

LinearLayout : LinearLayout is used when we need to arrange the
widgets/views in a horizontal or vertical manner.
The direction of arrangement can be set to horizontal or vertical,
by default it is being horizontal.
TableLayout : If the Layout's widgets/views need to be arranged
in the form of rows and columns, we use this layout object.
This is similar to html tables. The cells can span columns.
The TableLayout do not display its border. We can be made to
shrink and stretch by setting the respective properties of the columns,
"TableRow" is another helper widget which should be used in conjunction
with the TableLayout.
RelativeLayout : Here the position of each of the widgets/view is
in relative/dependent to each other. For example, when a layout is needed
such that it has a text view just to the left of an Edit Textbox, and a button
just below the EditText. The relation between the views are taken care in
one iteration, hence if view B’s position is dependent on view A’s position,
view A must come first in the layout.
FrameLayout : This is a very simply layout which is used to hold a section
of the screen blank, for displaying an item or group of items at run time. All the
elements added in the framelayout will be added to the top left of the screen.
AbsoluteLayout : When there is a need is to specify exact x and y co-ordinate
position of the view, then AbsoluteLayout need to be used. This layout is
difficult to maintain.

Overlap views in android?

I have a linearlayout which have a textbox(multiline, nearly 5 lines) and image view. Is it possible to draw a image on textview(overlapping)?
Note: I have to specify the coordinates of the image, which are not static, and may be anywhere above text.
Something like this mockup:

I think it can be achieved using RelativeLayout.
<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="wrap_content" >
<TextView
android:id="#+id/Textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="#string/Text2display"
android:textColor="#EEDCAA" />
<ImageView
android:id="#+id/choose_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="-46dp"
android:adjustViewBounds="true"
android:contentDescription="#string/description_logo"
android:src="#drawable/user2" />
</RelativeLayout>
By placing the TextView block above the ImageView, it ensures that the image view overlaps the TextView. Now, based on your requirements and position, use the following commands from the link :-
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You can align left right, top and bottom. Use negative values to navigate the ImageView, if ur using align bottom and stuff.. This will make it to overlap. Please let me know if this was helpful
Is there any specific reason for Linear Layout?

You can do this easily using RelativeLayout . You can have an ImageView overlapping TextView Unless there is a specific reason for using LinearLayout .

If you really (really) need to use LinearLayout, you can subclass TextView and override onDraw to draw your image.

In all your xml files, should define the background color for it, it will solve the problem :
Add this android:background="#android:color/black" in to the View tag you defined.

How to create layout like this?

I have a horizontal LinearLayout, inside which I have 2 TextViews. Let's say that the LinearLayout's width is 320px. If the TextViews don't fit into the LinearLayout (they are together wider than 320px), I want to somehow achieve this:
The second TextView is fully displayed and is at the right edge of the LinearLayout
The first TextView is only shown partially, only first x characters are visible
What I mean:
[TextView1|TextView2_________________________] // this is normal
[VeryVeryL...|VeryVeryLongTextView2] // VeryVeryLongTextView1 is not fully visible

To get the effect you're requesting in the comments above, you could modify Mayra's solution to something like:
<LinearLayout ...>
<TextView android:layout_width="wrap_content"
android:maxWidth="20dp"
android:layout_height="wrap_content"/>
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
I think that will work. Weirdly, the maxWidth param is only present on a couple view classes, but TextView luckily is one of them. You'd think it'd be useful in more cases, so I'm not sure why it's not just available in the default view params.

Specify a specific width for your first textView (i.e, 20dp... note, it is better to use dp than hard coded pixels, to deal with multiple resolutions of devices), give your 2nd TextView a weight of 1. This tells it to take up the remaining space. For example:
<LinearLayout ...>
<TextView android:layout_width="20dp"
android:layout_height="wrap_content"/>
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>