I have a LinearLayout with an another Linearlayout inside. In the second LinearLayout I've got 3 ImageViews but they are all stretched as you can see in the picture.
Here is my xml code:
<?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="fill_parent"
android:layout_margin="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/contact_data"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/bubble"
android:gravity="center"
android:padding="10sp"
android:text="#string/contact_data"
android:textColor="#000000" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/phonenumber"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/phone"
android:clickable="true"
android:onClick="onClick" />
<ImageView
android:id="#+id/emailaddress"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/email"
android:clickable="true"
android:onClick="onClick" />
<ImageView
android:id="#+id/internetaddress"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/internet"
android:clickable="true"
android:onClick="onClick" />
</LinearLayout>
</LinearLayout>
What's the problem?
PS: I have 3 sizes of each picture: 32x32 in drawable-ldpi, 48x48 in drawable-mdpi and 64x64 in drawable-hdpi.
You're currently setting each ImageView's dimensions to android:layout_width="match_parent" and android:layout_height="fill_parent".
Are you sure that you don't want to be using wrap_content?
Also, note that fill_parent means the same things as match_parent, and has been deprecated since API level 8.
On further inspection, you're also setting the background of the ImageView's instead of the src, the latter of which will do a much better maintaining aspect ratios.
Related
I want to place a WebView in place of a "television's" display (as seen in the picture below). I want the "television" to be always fully visible on the tablet (it should scale the television as a whole).
I have 4 frames of the television.
Top and bottom frame:
don't have the same height
have the same width
Left and right frame:
don't have the same width
have the same height
Television must keep width/height ratio.
I have tried following layout, but it only works on large screen and it does not scale everything down on the smaller tablet screen sizes.
<?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"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<ImageView
android:src="#drawable/top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1">
<ImageView
android:src="#drawable/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3" />
<android.webkit.WebView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/webView1" />
<ImageView
android:src="#drawable/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4" />
</LinearLayout>
<ImageView
android:src="#drawable/bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2" />
</LinearLayout>
</LinearLayout>
Ok, so I recreated your layout with a flat hierarchy. Use this as a starting point. The only part not modeled is the AspectRatio, you'll have to deal with that.
<?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"
>
<ImageView
android:id="#+id/imageview_top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:background="#android:color/holo_blue_bright"
/>
<ImageView
android:id="#+id/imageview_start"
android:layout_width="50dp"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_below="#id/imageview_top"
android:background="#android:color/holo_blue_light"
/>
<ImageView
android:id="#+id/imageview_end"
android:layout_width="50dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_below="#id/imageview_top"
android:background="#android:color/holo_blue_light"
/>
<ImageView
android:id="#+id/imageview_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#id/imageview_start"
android:background="#android:color/holo_blue_bright"
/>
<android.webkit.WebView
android:id="#+id/webview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/imageview_bottom"
android:layout_below="#id/imageview_top"
android:layout_toEndOf="#id/imageview_start"
android:layout_toStartOf="#id/imageview_end"
android:background="#android:color/darker_gray"
/>
</RelativeLayout>
And the AspectRatio?
ConstraintLayout may probably help you there (more than RelativeLayout). Or you'll have to wrap the WebView in a custom ViewGroup that overrides onLayout/onMeasure and does the magic for you.
I have hardcoded the images height/width with random DPs but you could wrap content if you have images (I just used the background color so you need to specify a size or the image view will collapse to 0/0.
It looks like this:
I'm trying to build a RelativeLayout which distributes excess space between its children, much as shown here:
I've figured out how to center the red widget inside the blue one, but what I also want to do is distribute any excess vertical space evenly above, below, and between the blue and olive widgets. Currently, everything is bunched up at the top.
My XML looks roughly like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageButton android:id="#+id/blue_button"
android:src="#drawable/blue_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/red_box"
android:src="#drawable/red_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/blue_button"
android:layout_marginLeft="10dp"
android:layout_alignTop="#id/blue_button"
android:layout_alignBottom="#id/blue_button"
/>
<ImageButton
android:id="#+id/green_button"
android:src="#drawable/green_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/blue_button"
android:layout_weight="1"
/>
</RelativeLayout>
First, you are using layout_weight with RelativeLayout parent. It's useless because layout_weight works only with LinearLayout parent.
Actually I didn't understand your question (an image of wanted layout would be good) but I guess this will work for you:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:id="#+id/blueAndRedWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton android:id="#+id/blue_button"
android:src="#00CCFF"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_weight="1"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/red_box"
android:src="#ff0000"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/greenWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton
android:id="#+id/green_button"
android:src="#669900"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
I am developing an app which has a splash screen, you can see it in the picture below.
My problem is that I am needing to put a progress bar as you can see in the picture below without many layouts, because now I have eight layout in order to get this effect (layout-sw320dp, layout-sw320dp-land, layout-sw480dp, layout-sw480dp-land...600,720).
I was trying use relative layout and center horizontally the progress bar, but with different screen sizes the progress bar get other position vertically.
Could I solve it with less folders?
This is my layout file for 320dp:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp" />
</RelativeLayout>
I suggest you use just one layout file, let's say splash.xml. Put in a RelativeLayout your ImageView, with android:layout_centerInParent="true". Then your ProgressBar with android:below="#id/image" to put it relatively below the image. You can change the layout paddingBottom to adjust views in the center of the layout.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/padding_bottom">
<ImageView
android:id="#id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:minHeight="#dimen/progress_height"
android:minWidth="#dimen/progress_height" />
</RelativeLayout>
Now instead of having many layouts, you will keep the above layout, and create many values according to your screen sizes. Meaning :
values/dimens.xml
values-large/dimens.xml
values-land/dimens.xml
etc.
Thus, your view's layout won't change from a screen to another, only their size will !
Maybe 3 horizontal LinearLayout using layout_weight to center everything horizontaly with respect of the ratio, containing a vertical LinearLayout with centered gravity?
If you post your actual layout file, that could be easier to explain.
Edit:
Something like that: (you may have to play with the layout_weight values to get the size you want:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/splash_screen_land"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
I could solve it with weightSum, layout_weight properties which are very useful to imitate percentages.
This is my code with the problem solved:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:gravity="center_horizontal"
android:orientation="vertical" >
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_weight="100"
android:layout_width="match_parent"
android:layout_height="0dp" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="17"
android:gravity="center"
android:text="TextView"
android:textSize="20sp" />
</LinearLayout>
I hope this will be useful for someone else
I have the following for 3 Imagebuttons. The way the code stands below, the three buttons look the same.
Problems:
The image doesn't fill the size of the button completely
The resolution of the images are bad. I have the images saved in all res/drawable folders (drawable-hdpi, mdpi, etc). Images were loaded by "Android Icon Set" wizard.
Any ideas? I have been playing with padding and scaleType as I saw them as the solutions on other posts.
<?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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/abutton"
android:src="#drawable/a_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="5dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/button"
android:src="#drawable/b_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/cbutton"
android:src="#drawable/d_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>
Instead of assigning drawable to the android:src attribute assign it to android:background attribute of the ImageButton.
OR
You can try setting android:adjustViewBounds="true", this will make the ImageButton adjust its bounds to preserve the aspect ratio of its drawable
PS: If you set an image to be the background of your ImageButton, then the image will scale to whatever size the ImageButton is. Other than that, src is a foreground image and background is a background image.
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="horizontal" >
<!-- The two linear layouts will have equal widths. -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<!-- The two image button will fill the linear layout along width and have height 150dp -->
<ImageButton
android:id="#+id/abutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<ImageButton
android:id="#+id/cbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/dbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
</LinearLayout>
Hope this helps.
Try
by removing padding and set background as 'null'.
In case of resolution, I think it was taking low resolution image.
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:background="#null"
android:scaleType="fitXY"/>
I faced the same problem. No other worked for me. At last it was a simple issue. By default, padding is existing around ImageButton. so use:
<ImageButton>
...
android:padding="0dp"
...
</ImageButton>
It will fix the issue.
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" />