I' have a view that contains several textViews an ImageView and a Button . Because on small screen devices (or in landscape mode on big ones ) not all are visible I use a Scroll as the parent of the whole hierarchy to allow the user to view all the information. The things are suck that the button must be at the buttom of the view . However on big screen device , where it remains enough space at the buttom , the button is put immediatelly below the last textview,and seems to occupy all the remaining space (resulting in an unnactractive view) . Trying to use android:allignParentButtom ="true" not only that it has no effect but it puts the button at top of the screen . Has anyone any ideea how could I accomplish what I described ?
here's the xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<RelativeLayout
android:id="#+id/gps_info_page1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/eStrUnknown">
</TextView>
<RelativeLayout
android:id="#+id/directions"
android:layout_centerHorizontal="true"
android:layout_below="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/itsDirectionValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_marginRight="2dip"
android:textSize="20sp">
</TextView>
<TextView
android:id="#+id/itsOrientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginLeft="2dip"
android:text="#string/eStrUnknown"
android:layout_toRightOf="#+id/itsDirectionValue">
</TextView>
</RelativeLayout>
<ImageView
android:id="#+id/itsImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/compass"
android:layout_below="#+id/directions"
android:layout_centerHorizontal="true">
</ImageView>
<RelativeLayout>
..."TextViews below the above image"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout
..."TextViews below the above"
</RelativeLayout>
<LinearLayout
android:id="#+id/div"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#+id/sunset_layout"
android:background="#F333">
</LinearLayout>
<Button //adding here android:alignParentBottom="true" has described above behavior
android:layout_marginBottom="3dip"
android:layout_marginTop="20dip"
android:id="#+id/done_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/eStrDone"
android:textSize="18sp"
android:layout_below="#+id/div"
android:layout_centerHorizontal="true">
</Button>
</RelativeLayout>
</ScrollView>
What you can do is change sizes depending on the screen programatically.
With this line you get the density of the screen:
scale = getResources().getDisplayMetrics().density;
and this this you get the size:
windowManager = getWindowManager();
display = windowManager.getDefaultDisplay();
screenWidth = display.getWidth();
screenHeight = display.getHeight();
and with this you can get is its on portarit or landscape:
Configuration conf = context.getResources().getConfiguration();
With all this info, you can modify the screen as you like.
Sometimes is necesary to do some calculations because not only density is different but size is different (like nexus one and droid)
Hope this helps.
Daniel
You could put your scrollview inside a linearlayout and set weight of the scrollview as 1
Related
I got following simple Layout. The problem can be reproduced in the android studio designer:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/x"
android:layout_toEndOf="#+id/x"
android:layout_centerVertical="true" />
</RelativeLayout>
This layout works fine if the text length of the textview is short. The checkbox is placed on the right of the textview. But if the text gets long and even wraps maybe, then the checkbox is pushed out of the view. It is not visible anymore. I would like that the checkbox is always visible on the right of the textview even, if it fills the whole width of the screen.
I tried to rewrite the layout with a LinearLayout which doesn't work either.
<?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="horizontal">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Do you know a trick to to achieve this with relative layout? I would somehow expect this behaviour from relative layout by default. Thanks ;)
This is working for me: make checkBox alignParentRight and make TextView toLeftOf it:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="This is very-very-very looooooooooooong stringgggg, very-very, long-long"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Edit. You can include this Relative Layout into other (parent) layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="this is veryyyyy yyyyyyyyyy yyyyyy yyy loooooo oooooooo ooon nnggggg gggg striiii iiiiin gggggg ggggg ggggggg ggg"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
It's also working. If you put android:gravity="left" into Relative layout, it will locate its content on the left side.
One way out would be to put the textview and checkbox in a linear layout with orientation horizontal. Set width of checkbox to be whatever you want (a constant) and the width of textbox to be 0dp and layout_weight of 1.
You should put the property layout_weight to make your views (TextView and Checkbox) have a deff space in the screen instead of use a hard value
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I guess the desired layout is not possible by default. I tried to do this using RelativeLayout, LinearLayout and TableLayout. It is technically understandable that the these layout do not support that behaviour. The relative layout would have to explicitly respect the case that an element on the left or right is minimal visible inside the parent even it is placed to left or right. Another solution would be if the table layout would allow a column to consume the rest of the space but respects min width of other columns as well.
For my case i wrote a workaround. I used the initial relative layout of my question but set a max width to the textview using following calculation:
DisplayMetrics displaymetrics = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int displayWidth = displaymetrics.widthPixels;
That guarantees the checkbox to be visible. I know the solution could be hardly possible in scenarios where the given layout is embedded in a more complex layout.
hi I am creating ListView with the two TextView in android.
The one contain the fix size and the other will occupied the remaining space of the screen.
The first which is fix size will display on the right side of the screen and other TextView will display data on the left of the screen.
How Can i do this?
isn't that ok?
<TextView
android:layout_height="wrap_content"
android:layout_width="480dp" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
Create a LinearLayout with horizontal orientation, and match_parent width.
Put both TextViews in it. For the first on, use android:layout_width and specify the value in dp if you want the buttons physical size to be the same on every screen, or in sp if you want it to scale according to screen resolution.
For the second TextView, use android:layout_width="match_parent".
Try this code...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="70dp" //Set the dimension
android:layout_height="wrap_content"
android:text="Text1" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text2" />
</LinearLayout>
Try this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tv1"
android:layout_height="wrap_content"
android:layout_width="100dp"
android:text="dfafa"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="dfafa"
android:layout_toRightOf="#+id/tv1"/>
</RelativeLayout>
I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.
add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.
You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".
You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).
I am trying to make a scroll view that has a nested relativeLayout view. The realative layout has a background image. When the realativeLayout is the only layout the background image is the size I want it to be.
When I add scroll view it makes the image bigger and I am not sure why and what properties I need to set to fix it.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background2"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/txtApplicationTitle"
android:text="My Application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="5dp"
android:textSize="15dp"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/txtAbout" />
<TextView android:id="#+id/txtPrivacyHeader"
android:layout_width="wrap_content"
android:text="#string/PrivacyHeader"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="21dp"
android:layout_marginTop="94dp" />
<TextView android:id="#+id/Privacy"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/Privacy"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/txtPrivacyHeader"
/>
</RelativeLayout>
</ScrollView>
// this is what I get (you can't tell but it is scrollable)
(source: gyazo.com)
// this how I want the SrcollView to look(this is the exact same code as above just without the ScrollView wrapping it)
(source: gyazo.com)
See how the top part has all of sudden grown so much.
Your ScrollView has its height set to wrap_content and your RelativeLayout has its height set to fill_parent. That means your ScrollView is going to expand to the entire view.
I have a relativelayout with an image, textview, image in that order. I have the left image with parent align left turned on. The right image has parent align right turned on. And the textview with align center parent turned on. The problem is that while everything is technically aligned correctly, the textview, while containing a value, has been reduced to basically a vertical line in the middle of the layout. Why isn't the textview keeping its width based on its content? Thank
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">
<RelativeLayout android:layout_height="match_parent"
android:id="#+id/RelativeLayout01" android:layout_width="fill_parent">
<ImageView android:layout_width="wrap_content" android:src="#drawable/icon"
android:layout_height="wrap_content" android:id="#+id/ImageView01"
android:layout_alignParentLeft="true"></ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/TextView01"
android:layout_centerInParent="true" android:layout_centerVertical="true"
android:text=" sdfsdf sdhfhskdhfkh hsdkfhksdhfh shdfkhsdkhfkjsdh fhskdfhksdhfjk sdfhsdkhfkjsdfhkhasdhfksa fsakhdfhsdfhkshdf skdhfkshdfk"
android:layout_toRightOf="#+id/ImageView01" android:layout_toLeftOf="#+id/ImageView02"></TextView>
<ImageView android:layout_width="wrap_content" android:src="#drawable/icon"
android:layout_height="wrap_content" android:id="#+id/ImageView02"
android:layout_alignParentRight="true"></ImageView>
</RelativeLayout>
</LinearLayout>
check the width of ur imageviews..set the width of those 3 things as 'wrap content'.