i'm struggling with a layout issue at the moment.
In fact i need 3 TextViews: one at the top, one in the middle, one at the bottom.
The middle one should fill the screen, the top & bottom one should only get as much space as they need for showing the text.
How to realize this layout?
You could also do this with a LinearLayout:
<?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="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:id="#+id/l1"
android:layout_height="fill_parent" android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_alignParentTop="true" android:id="#+id/textView1"
android:layout_height="wrap_content" android:text="TextView"
android:layout_alignParentLeft="true"></TextView>
<TextView android:layout_alignParentBottom="true"
android:layout_width="wrap_content" android:id="#+id/textView3"
android:layout_height="wrap_content" android:text="TextView"
></TextView>
<TextView android:layout_centerInParent="true"
android:layout_below="#id/textView1" android:gravity="center_vertical|center_horizontal"
android:layout_width="fill_parent" android:id="#+id/textView2"
android:layout_above ="#id/textView3" android:layout_height="fill_parent"
android:text="TextssssssssssssssssView"
android:layout_alignParentLeft="true" ></TextView>
</RelativeLayout>
Related
Sorry if my question sounds simple but I'm working on a simple layout for my list item and my intention align to textviews one on each end of the layout. My attempts are as below but the texviews are right next to each other. Any ideas where I'm going wrong?
<?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="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_alignRight="#+id/ll_finc_calctr_result_label"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Try this..
<?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="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="text left" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="text right" />
</LinearLayout>
Firstly, you need to remove the two properties of alignRight and toRightOf from the second linear layout:
<?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="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:text="ss"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sse"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Which will result in the second textview on right side.
And I would advise that you don't take two linear layout as both of them contain just a single textview:
Something like:
<?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:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ss" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="sse" />
</RelativeLayout>
Output:
The solution provided by Hariharan is excellent. Another option might be more useful if you need the textViews' width to actually be wrap_content (for instance if they have a background styling, etc.) You can achieve a more accurate behavior using a space:
<?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="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
I'm trying to implement a layout for a table-row. I have two TextViews which should be alligned to the left and one image that should be alligned to right.
Unfortunately my layout looks like this (everything is alligned to the left):
I'm fiddling with this for over an hour now and don't get it to work. What do I have to change to get the image alligned to the right?
This is my xml:
<?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="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
You can achieve the same in LinearLayout using weight but weight is only used in making complex layouts now to avoid usage of weight, I would suggest you to transform your UI in RelativeLayout. In this way, you can save a lot of extra lines of code.
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
You can do it by using RelativeLayout
<?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"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
or if you dont want to use RelativeLayout and want to stick with your LinearLayout then try giving weight to the first LinearLayout and layout_gravity="right|end" to the ImageView:
<?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="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="vertical"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Hope this works
Try using Relative layout as the root layout. In this case I think it will fix the issue.
To avoid using a RelativeLayout, you can use layout weights to set your second LinearLayout to use all the space available :
<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_weight="1"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical" >
Use a RelativeLayout on the parent and add the android:layout_alignParentRight="true" attribute to your image
so I have a problem position three items in the same line for my android app. At first let me show you a screenshot of what I have:
My problem here is that I'd like the two image button to be to the far left and far right of the line and for the Large Text to stay in Center.
I have tried Relative Layout without success, I also tried android:gravity for each item but it doesn't work either.
Here is the XML for my Layout:
<?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:background="#ffffff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/settings" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/black" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
Thanks in advance!
Please try with this code.
<?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:background="#ffffff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/settings" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/black"
android:gravity="center"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
I need to make a layout which is specific to webpage and it needs to look like a web article with an image and a text left to and under it. Look at the image.
As this is an easy thing to do in a web world, I am not sure how to do it in XML layout.
Obviously, the TextView must be on the left while the image is present, and after it reaches the bottom of the image, it has to stretch to the screen width. I tried this with two TextViews (one for left and another for bottom), but it just does not look right due to the text font size.
EDIT
I also tried to dinamically catch the height of image and then assign it to my TextView, and then make another TextView with the size of the screen under these two elements. This does not work as well as I cannot control the text that is not visible due to limited height of the first TextView.
If you haven't found the answer yet. Here is the same kind of question that is being answered.
How to align TextView around an ImageView?
The only thing what you might have to change in your case is to, make the alignment to be opposite way.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18.0sp"
android:id="#+id/message_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<ImageView
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/message_view"
android:id="#+id/icon" />
Taken from here,
http://dev.androidteam.ru/snippets/textview/leadingmarginspan2
check out this. it does same as you want
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_marginTop="5dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
use this way layout
<?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="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="21dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/imageView1"
android:layout_marginLeft="30dp"
android:textColor="#fff"
android:text="TextView" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:text="TextViewaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:layout_alignBottom="#+id/textView1"></TextView>
</RelativeLayout>
And add in code
TextView tv1=(TextView)findViewById(R.id.textView1);
tv1.setMaxHeight(maxHeight);
where maxHeight is dynamically get height of imageview
and than put condition to by getting height of textview1 to assign text to second textview
may it helps u
like this am I right?
I make a layout with this layout XML:
and i have a problem that in every screen (2.7in, 3.2in ,3.7in,4in .....) the 3 TextView are locate in a different position in the screen.
<?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:orientation="vertical" android:background="#drawable/profile2">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_gravity="top|center" android:layout_marginTop="-10dp"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_marginTop="315dp">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str_phone2"
android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="#color/black" android:textSize="15dp" android:layout_marginLeft="10dp" android:onClick="onClick2"/>
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:onClick="onClick1"
android:text="#string/str_phone"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:textSize="15dp" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:onClick="onClickEmail"
android:text="#string/str_email"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:textSize="15dp" android:layout_marginTop="19dp"/>
</LinearLayout>
use this code i had modify it as per your requirment..ans set images then see.
<?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:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"
android:textSize="15dp"
android:layout_marginLeft="10dp"
android:onClick="onClick2"/>
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:onClick="onClick1"
android:text="hello"
android:textSize="15dp" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickEmail"
android:text="Hello"
android:textSize="15dp" android:layout_marginTop="19dp"/>
</LinearLayout>
Ok, you only need one Root layout, so please remove the second xmlns:android definition.
Second, to display views next to each other, use a LinearLayout which is set to horizonatl. Then set your views to be layout_weight="1" and layout_width="fill_parent". This will make sure your TextViews are next to each other.
Then inside your root layout, just place the third TextView under the LinearLayout I just described.