Layout views with dynamic width - android

I have a layout with two children one after another, like this:
|<view1><text1> |
<view1> may change it's width. So, I want it increases while both views stay on the screen:
|<really_wide_view1><text1> |
But when there is no more space at right, it stops:
|<reeeeeeeeeeeally_wide_vi...><text1>|
Is there easy way to do this?
Now I try to use this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00aa00" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="loooooooooooooooooooooooooooooooooooong text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFaa0000"
android:minWidth="30dp"
android:singleLine="true"
android:text="test" />
</LinearLayout>
But result is the same:

I am able to solve your problem using the following code (a modified version of yours):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FF00aa00" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:background="#FFaa0000"
android:text="testtest" />
</LinearLayout>
Here is a screenshot of the same:
Let me know if the above piece of code solves the problem.

Try to give both views inside the RelativeLayout and make the views layout width and as a wrap_content and give orientation as horizontal. I think it will solve your problem.

Here is solution with TableLayout, but it looks dirty.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="0" >
<TableRow>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
It works for any length of both text views.

Related

Content inside linear layout is not showing

Im trying to generate a table layout inside a linear layout and anything I put inside the second layout does not shows up. I'm trying to do something like this:
https://www.dropbox.com/s/gnk3plt0ci3d2u8/tabla.png?dl=0
http://pastebin.com/USMrxJSn
The width and height property that you have set to the inner Linear Layout causes the problem for you. Actually the values are shown but are not visible to you.
I would recommend you to use weightsem property to control the width of the layout.
Try the code below and I hope that should work for you.
Code..
<LinearLayout 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"
android:orientation="vertical"
tools:context=".LinearLayout" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100" >
<ImageView
android:id="#+id/profile_picture"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:padding="15dp"
android:src="#drawable/ic_launcher" />
<TableLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:padding="20dp" >
<TableRow>
<TextView android:text="Emma Watson" />
</TableRow>
<TableRow>
<TextView android:text="Calorias" />
</TableRow>
<TableRow>
<TextView android:text="CO2" />
</TableRow>
<TableRow>
<TextView android:text="Distancia" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>

How to add space between two textviews

I am new to android development and I was just wondering how can I add space between two TextViews? Any help would be appreciated.
The code I have written so far
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/lbl_group_coworkers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coworkers" />
<TextView
android:id="#id/lbl_group_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Family"/>
</LinearLayout>
You can use android:layout_marginTop="value"
like this
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/lbl_group_coworkers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coworkers" />
<TextView
android:id="#id/lbl_group_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Family"/>
</LinearLayout>
you can have margin between two textview.
add top margin to the second textview
like this
<TextView
android:id="#id/lbl_group_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Family"/>
Just replace <LinearLayout> </LinearLayout>
with <RelativeLayout> </RelativeLayout>
then go in graphical layout and adjust space as you like.
add margin left right top bottom
android:layout_marginLeft="10dp"
try adding margin
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/lbl_group_coworkers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coworkers"
android:layout_margin="10dp"/>
<TextView
android:id="#+id/lbl_group"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Family"/>
</LinearLayout>
You can use
android:layout_margin="5dp"
or
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
But before you ask a lot more such questions, I'd suggest to read through the android dev guides ( http://developer.android.com/guide/components/fundamentals.html )
Good Luck and have fun developing...
You can use either padding or margin depending on what you need, here is a link of a guy who gives a good explanation between the two that will help you decide on which one you'd like to use: android margin vs padding
add android:layout_marginRight="..." to the first textView
set margin property in TextView...
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
and if all side set space then...
android:layout_margin="20dp"
Use GridLayout instead of LinearLayout
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_gravity="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_gravity="right" />
</GridLayout>
<?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="match_parent"
android:background="#drawable/custom_border"
>
<TextView
android:text="#string/textView_reference_number"
style="#style/CustomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView_refernce_number_label"
/>
<TextView
android:text="Reference Number Value"
style="#style/CustomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView_refernce_number"
android:layout_marginTop="10dp"/>
</LinearLayout>
android:layout_marginTop XML attribute is used to specify extra space on the top side of this view. Thus android:layout_marginTop="10dp" on 2nd textView is specifying 10 dp of space between it and above view. #UDI Please refer below link for more details over the same https://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams.html

Need xml layout for the below screen

I am working on creating a page with a layout with header "Account Information" (ref.. image). Followed by a table and i need to populate the table dynamically after fetching from server but not able to do so. Below is the .xml file and attached is the image:
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#layout/header_gradient" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="0.20"
android:gravity="center_horizontal"
android:padding="15dp"
android:text="#string/my_account_header_text"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<TextView
android:id="#+id/my_acc_component"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:text="#string/my_account_component"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
<TextView
android:id="#+id/my_acc_details"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/my_acc_component"
android:text="#string/my_account_details"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
This may not be your issue, since I don't know what the problem is yet, but there is an issue that I see. When using weight in a LinearLayout with a vertical orientation your height should be 0dp. Similarly, if it is a horizontal orientation then width should be 0dp. So for example you would change your layouts to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff" >
and
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
Also, this is definitely not whatever your problem is but fill_parent is deprecated and match_parent should be used instead.
*Actually, there is a problem with the weight property... if you are working with weight then you better use weight_sum property in the LinearLayout and give your textView or other view an percentage depending on your giver weight_sum value in the parent layout...
However,I think what you are looking for is something like this:*
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|top"
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:background="#drawable/image" // if you want your title/header to be upon the image. Or just create another ImageView for that image
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_component"
android:text="your text"
android:textSize="your Size"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_details"
android:text="your text"
android:textSize="your Size"
/>
</LinearLayout>
</RelativeLayout>

ListView inside LinearLayout breaking out (Android)

Been struggling with this for a while now. I have a layout XML consisting of various LinearLayouts, with separate weighting. The end result looks like this..
Dont mind the colors, its just to see the break points..Anyway, below the Terminal/Origin etc LinearLayout is a ListView which is populated using a custom adapter. The data loads fine, but then the listView "breaks out" of the LinearLayout, and takes up most of the page
(Dont mind the colors, its just to see the break points..)
ie. it flows over the View above and below.
My XML is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:ignore="HardcodedText" >
<RelativeLayout
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#FF0000"
android:gravity="right" >
<Button
android:id="#+id/update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:onClick="getFlightInfo"
android:text="Refresh" />
</RelativeLayout>
<LinearLayout
android:id="#+id/table_header"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.4"
android:background="#FFFFFF"
android:weightSum="1" >
<TextView
android:id="#+id/header_cell1"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_1_weight"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="12dp"
android:text="#string/table_header_terminal"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell2"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_2_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_origin"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell3"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_3_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_flight"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell4"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_4_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_scheduled"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell5"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_5_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_status"
android:textSize="11dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/table_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FFFFFF"
android:orientation="vertical" >
<ListView
android:id="#+id/list_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00FF00" />
</LinearLayout>
I may be missing something glaring, but for the life of me, I cant see it. Can anyone help?
Thanks a million..
This is because you have kept LinearLayout's height(the one wrapping listview) "wrap_content".Fixing its size to some dip would solve your problem.
Also make listview's height "fill_parent" then.
EDIT :
try this way:
...
<ListView
android:id="#+id/list_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
in upper two layouts,you user 0.2 and 0.4 as weight but in lower two layouts,you users 3 and 1...try it former way and see,if it can help you.also try making height of LinearLayout(the one wrapping listview) to 0dip.
Maybe it is late, but I could help someone.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Content 1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#00ff00">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Content 2" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayout2"
android:layout_below="#id/linearLayout1"
android:background="#00f0f0"></ListView>
Result:
Ok.. after consulting this post I came up with a fix
Remove the LinearLayout outside the ListView, its superfluous.
Add a height of '0px' (which I've found around the web) to the ListView ensures it obeys the android:weight parameter properly.
Hope this helps.
Remove the weight of id/filter.
Let the ListView have a weight of 1 with fill_parent height.
Remove the listView's immediate parent.
One other thing you missed, is to set the weightSum=sum_of all_child_weight in your root. That should fix the problem.

relative layout issues/android

I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?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="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.
Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.
You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="#+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html
A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>

Categories

Resources