Develop Reference

Two TextViews always on Screen

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"

Android - Layout not in uniform

I have a horizontal list of images in my android application. But the problem is some of the images seems to not follow the layout I've defined in my xml. Like this:
my layouts look like this:
mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_shop_list"
android:orientation="horizontal">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/shop_hlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollX="1dp"
android:scrollY="1dp"
android:overScrollMode="always" >
</com.devsmart.android.ui.HorizontalListView>
</LinearLayout>
then my listlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:translationY="200dp" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<ImageView
android:id="#+id/img"
android:clickable="true"
android:adjustViewBounds="true"
android:layout_width="360dp"
android:layout_height="360dp" />
<ProgressBar
android:id="#+id/img_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:translationY="150dp"
android:translationX="140dp" />
</FrameLayout>
<TextView
android:id="#+id/labelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#dc6800"
android:textSize="16sp"
android:textStyle="bold" />
<!-- Description label -->
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#acacac"
android:paddingBottom="2dip">
</TextView>
</LinearLayout>
My guess is that the size of my image is lesser than what my ImageView layout_width and height. Or I dont really know what causes this problem.
But any help will do, please. Thanks.
EDIT: What I really wanted is that if the image is like image 4 and image 5, it should not have those spaces. I've tried getting the size of the image from my ImageLoader then set the layout parameters height and width in there while images are loaded. But it looked worse.
Are there other ways in which i can dynamically adjust my ImageView if ever the images are like image 4 and 5?

If actually you want to make the image occupy the desired space
try adding this image View property to your ImageView
You can try others I usually use fitXY out of the predefined list you will get there in XML Layout
android:scaleType="fitXY"
so as to make this property work we also need
android:adjustViewBounds="true"
that you have already added in your case
If actually you want to avoid on blank spaces and let the image occupy as much space as it want
In my layout I am using two image views to show a demo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_numbers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/tv_numbers"
android:layout_below="#+id/tv_numbers"
android:layout_marginTop="5dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<ImageView
android:id="#+id/textView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:src="#drawable/desert"/>
<ImageView
android:id="#+id/textView2"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#drawable/desert"/>
</LinearLayout>
ImageView 1 is assigning image as Source using android:src="#drawable/desert"
and below is the result as you can notice that it is showing WhiteSpace arround it.
ImageView2 is assigning image as Background using android:background="#drawable/desert"
and below is the result as you can notice that it is showing no WhiteSpace arround it.
Or try using these attributes to make it possible
android:maxHeight=""
android:maxWidth=""
android:minHeight=""
android:minWidth=""

Problems Horizontal / Vertical Layout Android App

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

Views overlapping in app widget layout

I am building an app widget and the layout is going to have a View aligned at the bottom of the widget, to hold a TextView and a ImageView, then a View above it to hold the main text. The problem with what I have is that is seems the "top" View is overlapping with the bottom View:
UPDATE
Now I'm thinking the "top" view is not overlapping the bottom view, but that something is cutting off the top of the image. Here is another screenshot:
As you can see, the text is being cutoff at the top of the bottom view, but the image is getting cut of as well. Here is a screenshot with the image not being scaled to 18dp:
I'm extremely confused.
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widgetLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="#dimen/widget_margin">
<RelativeLayout
android:id="#+id/widgetBgLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/bg_widget"
>
<RelativeLayout
android:id="#+id/widgetStatusLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/widgetStatus"
style="#style/WidgetStatus"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/widgetIcon"
android:src="#drawable/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_above="#id/widgetStatusLayout"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/widgetTitle"
style="#style/WidgetTitle"
/>
<TextView
android:id="#+id/widgetText"
style="#style/WidgetText"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>

I figured it out. I had to set the height of the icon to a higher number (28dp). I don't think the icon is a true rectangle (I had someone else make the icons for me), which probably caused issues with the aspect ratio.

How to let the ImageView and the TextView the same height

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?