I'm trying to place two TextViews side by side such that both are always on the screen.
They should always stay next to each other, touching borders. But the text keeps changing dynamically, so even if the text in the first TV becomes too long, it should not push the second TV off the screen.
Here's the basic 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="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</LinearLayout>
This is what it looks like:
However, if the text becomes long, the second TextView gets pushed off the screen.
I even tried the same thing using RelativeLayout.
<?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:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</RelativeLayout>
Still the same problem, the second TextView just won't stay on the screen. I want the first textView to get ellipsized, or convert into two lines without pushing the second TextView off the screen. But I also don't want the second TextView to be stuck to the right of the screen (this can be done by giving the first TextView a weight of 1)
PS: For me, the background of the Views is immaterial, so even if I can manage this by latching the view onto the right side of the screen, it's perfectly fine.
For this, I've tried using weights on both views in LinearLayout, and layout_alignParentRight in RelativeLayout - but without any success.
Edit:
If i use weights on both layouts - this is what it looks like:
<?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:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:layout_weight="1"
android:text="Aaa" />
<TextView
android:id="#+id/b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bbfbd" />
</LinearLayout>
This is fine if the text is long, but with short text, it defeats the purpose.
With long text it works perfectly.
Solution:
The only solution I could figure out was to define the maxWidth property for the first TextView. This property is defined in dimens.xml, with a different value for different screen sizes.
main.xml
<?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/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:ellipsize="end"
android:maxLines="1"
android:maxWidth="#dimen/max_text_view_width"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="10dp"
android:maxLines="1"
android:text="Bbbbbbb" />
</LinearLayout>
dimens.xml
<resources>
<dimen name="max_text_view_width">300dp</dimen>
</resources>
The Output for this looks like this:
TextView has a property of maxWidth . you can set that
programmatically
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x; //width of the screen
int height = size.y; // height of the screen
textView1.setMaxWidth(width/2);
textView2.setMaxWidth(width/2); //disable this if you want to have the rest of the screen by second textView
Now, textView will initially have the minimum size and will grow to
the maximum of the half size of the screen. You can customize this
with condition to fullfill your needs.
If it is ok for the textviews to be static you can leave them in LinearLayout and assign weight=1 to each of them. That way they are always going to stay the same.
For a much better and flexible solution use Google's flexbox layout. It is an awesome library where you can do all kinds of stuff.
Enter the below code and the problem will be solved:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:scrollbars="vertical"
android:maxLines="2000"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:scrollbars="vertical"
android:layout_alignParentRight="true"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
</LinearLayout>
This will definately works :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Asssda" />
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bxdadsdc" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<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_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="wqkdnoqwndowqndowqowndowqndodnwqodnqow" />
<TextView
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Aaaaaaaaainqwdiwdiwdniwqndiwqiwndiwqndiwqdniqwnnwiqdwoqndqowqndolnqwdlnaa\nkpaaaa" />
</LinearLayout>
Its not exaclty the solution but you should use this approach of using weights in linear layouts.
What could work is setting the maxWidth for the first View. You could set the maxWidth using xml resources for multiple screen sizes.
android:maxWidth="#dimen/max_width"
Then you could set max_width in dimens.xml
Giving each view an equal weight would make them occupy half the screen. That is not what you're looking for, I guess.
I think the best option here is to programmatically calculate the screen width of the device and set the max width of the first textView as a percentage of the screen width.
What finally worked for me was to set the maxWidth for the first View.
I set the maxWidth in the dimens xml and overridded the value for multiple screen sizes. It was difficult testing it out on multiple screens, but that's what finally worked for me.
android:maxWidth="#dimen/max_width"
Related
My question is about building my own ImageButton.
I want to have all of things that have ImageButton, but i want to add some TextField on it.
So i want to create component which have:
Square size
Image on top with: 100% width, 80% height
TextField on bottom: 100% width, 20% height
All square "tile" must be clickable and working as normaly button
Something like this:
How to do that?
It will be very very nice when You can provide some code for this, but in minimum option I will be very grateful for some "todo list" in point what should i do step by step.
you can use the following layout: for 80% and 20% height use android:layout_weight attribute
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".80"
android:src="#mipmap/ic_launcher"
android:text="left" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".20"
android:gravity="center"
android:text="Sample Text" />
</LinearLayout>
Basically we are making a relative layout (parent) which will be our 'image button'. Xml code is below, for Java you just need to implement the setonclicklistener on this id.
<RelativeLayout
android:layout_width="wrap_content"
android:id="#+id/imageButton"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/page_image"
android:layout_marginRight="6dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_below="#id/page_image
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
i developed one of application and now am facing problem that it show perfectly in my nexus7 but when i viewing other device screens the text view not fitting
i want all the screen as same as nexus7. its anyone can know the better solution for this please. unfortunately i don't have enough reputation so i cant post any screenshot here this my xml code
<?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="match_parent"
android:layout_gravity="center"
android:background="#color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<ImageView
android:id="#+id/pointer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:src="#drawable/point" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<TextView
android:id="#+id/name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="97dp"
android:text="#string/numberusers"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:text="#string/number"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="355dp" >
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:clickable="false" >
</ListView>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I m Not Sure But Remove Relative Layout And Use Linear Layout Its More Better Than Relative
The two textViews that you have in your layout use android:layout_width="wrap_content".
Use android:layout_width="match_parent" in the one you want to fill the screen.
every children relative layout in your xml has height and width as match_parent. Do you need it? Because if first layout have height as match_arent than it will not leave space for others. Try using "wrap_content" as height for inner relative layouts.
If I got your question, you have to set the width of the textview as
android:layout_width="match_parent"
But in my opinion, the hole screen is wrong. Use a LinearLayout (vertical or horizontal) and place there your first two textviews. And if you want more accuracy use the gravity feature in each text view and of course set a layout_weight for each TextView and weightSum in the LinearLayout.
I want to use wrap_content on TextView where I keep only numbers (and coma), but I have noticed that this takes more space than needed (as if reserved space for letters).
Shown here:
image link http://img802.imageshack.us/img802/3784/wrap.jpg
Current situation - blue lines, desired - gray lines.
If it's not possible to do this with numbers and coma, maybe it is possible only with numbers?
This is my 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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp" >
<LinearLayout
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sampleText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/image" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:inputType="phone"
android:text="0,00"
android:textSize="50dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
For example, MyTextView works as I wrote. The thing is that I want to center vertical my image, but it's not properly centered due to fact MyTextView takes more space than needed.
Set android:includeFontPadding to false, it is true by default. It will reduce the padding significantly although it does not remove it completely. Be sure to test this on a real device, since it had no effect for me in the layout preview. Set a background color to see the difference.
<TextView
...
android:includeFontPadding="false" />
Try it using textView.setTextSize(15dp);
I am using numbers in textView. I didnt feel it as a big issue.
Set height and width of the textview as wrap_content.Like,
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
are you using a custom font? If so, one possibility is that the padding you see is built into the font.
You can add this to your TextView: android:inputType="phone"
I´m trying to code my first android-app. I read a lot, but I have problems with the layout.
What is wrong in both xml?
For a better understanding, I have made a picture:
My XML for main.xml
<?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="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot_again" />
</LinearLayout>
</LinearLayout>
for main.xml in the folder layout-land, If i switch to the landscape-Mode the app crashes:
<?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" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
</LinearLayout>
Okay, just looking at your XML, there are a few issues:
Portrait XML:
< ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
Here, you've set both a weight and a height - in a LinearLayout you can't have both. Either you set the height yourself, or you give it a height of 0dp and a weight, then let the LinearLayout assign the height. As for why it's rotated, the image itself might be rotated in your resources.
Horizontal XML:
Your root LinearLayout still needs to have a vertical orientation
Your ImageView needs to be declared above your Button
What's happening is that a) it's horizontal, b) your button is getting put on first, and c) your button has a android:layout_width="match_parent", which means the ImageView has nowhere to be put, as your Button is already taking up all of the space on screen (can you see why this is case?)
Make these changes, then update your question as appropriate, as I think that your problems will have changed
My layout have ImageView(iv) and TextView(tv).
I want to let the tv right of iv.
And the tv's height is same as iv's.
The tv Gravity set as CENTER_VERTICAL.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/iv"
android:text="TextView" android:gravity="center_vertical"/>
</RelativeLayout>
How to arrive the goal?
hi try this .....
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_title_home_demo" />
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/iv"
android:layout_alignTop="#+id/iv"
android:layout_toRightOf="#+id/iv"
android:gravity="center_vertical"
android:text="TextView" />
</RelativeLayout>
You have to set the textview property to android:layout_alignTop="#id/iv" and android:layout_alignBottom="#id/iv"
Well to get it to center vertically correct, you will need to remove the android:layout_alignParentTop="true" line from your TextView tag.
However, it sounds like you might be trying to make the text change its size to fit the entire height of the ImageView. This obviously won't solve that, but I wouldn't recommend doing that in the first place as it could result in some strange looking views.
You can use distinct sizes by using
android:layout_width="wrap_content"
and /or
android:height="300dp"
(same for height). Also check margins and paddings.
If you need to be more dynamic, you might consider android:layout_weight i.e. for letting 2 buttons have equal width and fill the horizontal space of the parent view you would set:
android:layout_height="wrap_content"
android_layout:weight="0.5".
you can follow this link: How to make two different layout to have same height?