I am solving a problem with image and text in one scroll view. The main problem is, that I get different image height from server side . But the place with image should be all the time same.
Now the height of image place is dynamic. The text should be scrollable with the image.
Is there any possibility how to make the image height static?
Thank you!
EDIT
<?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="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/article_gallery"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/article_image_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />
<ImageView
android:id="#+id/article_image"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<ImageView
android:id="#+id/article_image_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_p" />
</LinearLayout>
<TextView
android:id="#+id/image_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/tran_dark_gray"
android:gravity="center"
android:padding="#dimen/size_8"
android:textAppearance="#style/xsmallLight" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="6"
android:background="#color/opaq_light"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/size_16" >
<TextView
android:id="#+id/article_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/size_12"
android:textAppearance="#style/normalBold" />
<TextView
android:id="#+id/article_body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/xsmall" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>
If you declare the ImageView with a fixed width and height it will remain static all the time.
Try something like:
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
Put this ImageView inside a ScrollView and ofcourse put your TextView inside the same ScrollView.
you can use layout weights for your linearlayout. Set the width to 0 and let the weight determine actual size. Setting weight to 0.33 each gives each images 1/3 of the screen.
Or you could set one to 0.5 and the others to 0.25 each or whatever makes sense for your app.
Set the 3 images as:
<ImageView
android:id="#+id/article_image_back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />
Related
This is not working on my phone but I can see it in the Android Studio Design mode window. I need to place a LinearLayout or any view actually just below the listView. But I can't see it, only the listView fitting the whole height
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/local_detalle_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="android.buendia.cl.pritz.fragments.locales.LocalDetalleFragment">
<view
android:id="#+id/banner"
class="com.android.volley.toolbox.NetworkImageView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:scaleType="centerCrop"
app:srcCompat="?android:attr/textSelectHandleLeft" />
<TextView
android:id="#+id/current_category"
style="#style/current_category"
android:layout_below="#+id/banner"
android:text="TextView" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/current_category">
<ListView
android:id="#+id/list_view_local_detalle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<LinearLayout
android:id="#+id/cart_bar"
style="#style/cart_bar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/cart_status"
style="#style/cart_bar_status"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:text="TextView" />
<Button
android:id="#+id/cart_next"
style="#style/cart_bar_next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/cart_bar_next_button_text" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Set android:layout_below="#+id/list_view_local_detalle" for LinearLayout
Note : If you'r using weight for vertical linear layout then height must be 0 dp and if using for horizontal linear layout then width must be 0dp.
I am trying to create a layout that would always display 2 images, splitting the screen length equally into half, leaving no whitespace on screen (even if the images are center cropped).
So far I have the following code, but this leaves a lot of empty white space at the bottom of the screen. The reason I use "RelativeLayout" within the "LinearLayout" is because I want my text1 view to come at the lower portion of my image 1 (overlapping the image1).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:padding="5dp"
android:textColor="#fff" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
</RelativeLayout>
You are hardcoding the height to 230dp for each layout which could be causing the problem. In the Linear layout you should use weights to distribute the screen area equally.
Use android:layout_weight="1" in both the relative layouts
Check here for more information
Android: 2 relative layout divided in half screen
The layout you are describing is a simple, weighted LinearLayout. Simply add the following attribute to your LinearLayout:
android:weightSum="2"
Then for each RelativeLayout, change the height attribute to:
android:layout_height="0px"
And add the following attribute to the same RelativeLayouts:
android:layout_weight="1"
try to use the frame layout if you want to overlap the textview on image view and use layout weight on the frame layout
Sample code for layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center_vertical|bottom"
android:padding="5dp"
android:textColor="#android:color/black" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
</FrameLayout>
Im trying to create a stampcard system on my application but when its coming to laying out the stamps (they wil be invisable untill requested and shoud be spaced evenly in 2xrows of 3),
I cant get the view to sit right, I want the stamps to appear evenly over an Image view but it just wont happen, I tried to get my linear layout that will hold the 2 rows to stretch to the relative view ( who's size is set by the stampcard ImageView) so i could space them out evenly using their weight but it wouldn't stretch it would allways wrap the content any help would be appreciated.
The layout xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/main_fragment_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/home_page_title"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#drawable/bottom_bar"
android:gravity="center_horizontal|fill_vertical"
android:text="#string/home_fragment_title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/stamp_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/home_page_title"
android:gravity="center" >
<ImageView
android:id="#+id/the_stamp_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/stamp_card" />
<LinearLayout
android:id="#id/row_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/scanBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stamp_card_layout"
android:background="#drawable/brown_btn"
android:text="Scan?"
android:textColor="#FFFFFF"
android:textSize="23sp"
android:textStyle="bold"
android:typeface="normal" />
</RelativeLayout>
The Result:
I don't know what to do as they have to be over the image and stay relative to the stampcard and the only way I know how was using a relative layout and it is being designed for api 8 so it has to be simple :/
thanks in advanced!
The solution I came to is to just have multiple Stampcard images each with a one more stamp than the last and to cycle though them.
In my android application i have to design an UI. I have to distribute area of scrollview(70%) and relativelayout(30%) within a linearlayout(100%). But in my code it changes its area with the change of button in scrollview and consume the area of relativelayout. Here is my code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/lastLayout"
android:layout_weight="70"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linear_layout_add"
android:background="#drawable/albumbackground"
android:padding="10dp"
>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_weight="30"
>
<ImageButton
android:id="#+id/albumAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="24dp"
android:layout_marginTop="10dp"
android:layout_toLeftOf="#+id/albumremove"
android:src="#drawable/add" />
<ImageButton
android:id="#+id/albumremove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="58dp"
android:src="#drawable/delete" />
</RelativeLayout>
when there few buttons then the UI shows like this
but when the no of button increase the UI shows like this
how can i keep the scrollview and relativelayout size constant? thanks...
Set android:layout_height="0dp" on both children of LinearLayout.
Weights are to fill unused space. If your children have size of 0 unused space will be divided like you want it.
I have a vertical LinearLayout containing an ImageView and a few other layouts and views.
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/main_search"
android:gravity="center"
android:textStyle="bold" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_city_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_city_prompt"
android:entries="#array/search_city_array" />
<Spinner
android:id="#+id/search_area_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_area_prompt"
android:entries="#array/search_area_array" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_rooms_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_rooms_prompt"
android:entries="#array/search_rooms_array" />
<Spinner
android:id="#+id/search_min_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_min_prompt"
android:entries="#array/search_min_array" />
<Spinner
android:id="#+id/search_max_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_max_prompt"
android:entries="#array/search_max_array" />
</LinearLayout>
<Button
android:id="#+id/saearch_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/search_button"
android:onClick="searchButton" />
</LinearLayout>
My problem is that when the activity is displayed, the ImageView has a padding at the top & bottom. I've confirmed it is the ImageView (by setting a background colour on the ImageView).
The image is 450x450px. Setting the height manually to 450px produces the desired effect (no padding), and setting it to 450dp produces the same effect as using wrap_content.
It seems that android is taking the height of the image (450px) and setting the height of the ImageView to the same value, but in dp.
Any ideas as to what I can do to fix this? I don't want to use absolute values as I'll be providing different images for different screen densities.
I had a simular issue and resolved it using android:adjustViewBounds="true" on the ImageView.
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />