I am trying to make empty lines within android. This is what I have been doing:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="\n\n"
I want to know if there is a better way? Thanks
Use Space or View to add a specific amount of space. For 30 vertical density pixels:
<Space
android:layout_width="1dp"
android:layout_height="30dp"/>
If you need a flexible space-filler, use View between items in a LinearLayout:
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
or
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="1"/>
This works for most layouts for API 14 & later, except widgets (use FrameLayout instead).
[Updated 9/2014 to use Space. Hat tip to #Sean]
If you don't need the gap to be exactly 2 lines high, you can add an empty view like this:
<View
android:layout_width="fill_parent"
android:layout_height="30dp">
</View>
View if you need change background color , Space if not .
that dosent mean you have to change view background .
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/YOUR_BACKGROUND">
</View>
or Space
<Space
android:layout_width="match_parent"
android:layout_height="20dp"
/>
An updated Answer: Since API 14, you can use "Space" View, as described in the documentation.
Space is a lightweight View subclass that may be used to create gaps between components in general purpose layouts.
if you want to give the space between layout .this is the way to use space. if you remove margin it will not appear.use of text inside space to appear is not a good approach.
hope that helps.
<Space
android:layout_width="match_content"
android:layout_height="wrap_content"
android:layout_margin="2sp" />
<View
android:layout_width="fill_parent"
android:layout_height="30dp"
android:background="#80000000">
</View>
I strongly disagree with CaspNZ's approach.
First of all, this invisible view will be measured because it is "fill_parent". Android will try to calculate the right width of it. Instead, a small constant number (1dp) is recommended here.
Secondly, View should be replaced by a simpler class Space, a class dedicated to create empty spaces between UI component for fastest speed.
try this
in layout.xml :
<TextView
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/empty_spaces" />
in strings.xml :
<string name="empty_spaces">\t\t</string>
it worked for me
This can by be achieved by using space or view.
Space is lightweight but not much flexible.
View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is more customizable, you can add background, draw shapes like space.
Implementing Space :
(Eg: Space For 20 vertical and 10 horizontal density pixels)
<Space
android:layout_width="10dp"
android:layout_height="20dp"/>
Implementing View :
(Eg: View For 20 vertical and 10 horizontal density pixels including a background color)
<View
android:layout_width="10dp"
android:layout_height="20dp"
android:background="#color/bg_color"/>
Space for string formatting using HTML entity:
for non-breakable whitespace.
for regular space.
Just add weightSum tag to linearlayout to 1 and for the corresponding view beneath it give layout_weight as .9 it will create a space between the views. You can experiment with the values to get appropriate value for you.
Agree with all the answers......also,
<TextView android:text=""
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_weight="2" />
should work :) I am just messing with others as TextView is my favourite (waste of memory though!)
The previous answers didn't work in my case. However, creating an empty item in the menu does.
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
...
<item />
...
</menu>
there is a better way to do this
just use the code below and change according to what you want the size of the blank area
<Space
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_column="0"
android:layout_row="10" />
if you are using with the grid layoout then only use
android:layout_row="10" />
Below is the simple way to create blank line with line size.
Here we can adjust size of the blank line.
Try this one.
<TextView
android:id="#id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="5dp"/>
Related
I found that I'm using a View to make the space in my layouts and I thought to replace it with a Space.
So I asked myself if is there any gain to replace View with Space to make the space.
Space using the View widget :
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
Space using the Space widget:
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
So... is there any gain to use the Space view instead of the View for spacing in a layout?
For the most part, they're exactly the same. A Space sets its visibility to View#INVISIBLE by default so drawing operations are skipped. Other than that, there isn't much of a difference.
I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.
For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.
I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout
Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>
You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>
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 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.
I try to set a view to the right of a first view and bottom align them inside a RelativeLayout.
The following code looks to me like it should work.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#999999"
android:padding="10dp" >
<View
android:id="#+id/v1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#FFFFFF" />
<View
android:id="#+id/v2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="#id/v1"
android:layout_toRightOf="#id/v1"
android:background="#FF0000" />
</RelativeLayout>
But the result is not really what i've expected.
What is the problem here?
Just to be clear what i expect: both cubes should be bottom aligned against each other and the red cube should be to the right of the white one (outside).
Edit:
I have found the problem. it's not this layout, but the parent list, where it is included (it's a propriety HorizontalListView). it seems to resize its child views somehow and that causes the problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#999999"
android:padding="10dp" >
<View
android:id="#+id/v1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#FFFFFF" />
<View
android:id="#+id/v2"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FF0000"
android:layout_alignBottom="#+id/v1"
android:layout_alignBaseline="#+id/v1"
android:layout_alignRight="#+id/v1"/>
</RelativeLayout>
Am I right? ;)
It worked for me. My guess is that the sp for whatever you are testing on is scaling down from the default sp=dp. This would make your dp padding push the block over, which it already might since the amount of available space between the grey and white blocks is:
(300-200)/2 - 10 = 40
and your red block is 50.
If you want more consistent results use dp since sp will scale based on preferences and is usually used for text scaling.
Do not use sp as the unit. Try instead to use dp (device pixels). This would take the device into consideration. In your case, the images are not scaled properly and hence this result. You could also set the gravity on the view v2. Something like :
android:gravity="botton|right"
Or you could also try setting the baseline to something like :
android:layout_alignBaseline="#+id/v1"
and set the alignRight to something like :
android:layout_alignRight="#+id/v1"