Newbie question here, but I'm struggling to find the answer.
When laying out components, clearly if android can fit all the components on the screen while respecting all the requested attributes (height, margin etc), then it will do that.
But what if there is not enough room on the screen for everything? I had thought that it would simply put what it could on the screen starting at 0,0, and then have horizontal or vertical scrollbars for the rest.
However, that's not what I'm seeing, but I can't figure out what I am seeing. For example, when I try to view the following layout on my phone, the text has disappeared off the top of the screen (I can get this by turning the phone to landscape mode where there is obviously less available height).
What gives? How is android determining how to lay out these components and where to place the centre of the screen?
Many thanks!
EDIT: It looks like the problem has to do with me using so many dp values that mean that there's no way for everything to fit on the screen. I've fixed my immediate problem by using layout 'weight' to scale my components proportionally to the screen rather than trying to specify absolute sizes. I'm still curious why the layout code would choose to push my text off the top though - perhaps it priortises dp values?
The layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="#string/TextView1Text2" />
<Button
android:id="#+id/button"
android:layout_width="200dp"
android:layout_height="150dp"
android:onClick="#string/Button1OnClick"
android:text="#string/Button1Text" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/bla"
app:srcCompat="#drawable/blank_1024_200" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
Objective: I am trying to make a MaterialCard with an Image inside it, as well as some text below the Image. This current layout will serve as a "menu" for the application, where the user can select where to navigate to.
Problem: The ImageView is appearing vertically centred in the MaterialCardView. I would like the ImageView to "stick" to the top of the MaterialCardView. There are large sections of MaterialCardView above and below the ImageView.
My XML Code:
<ScrollView
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:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".MainActivity"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true"
android:id="#+id/appBar">
<Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/design_default_color_primary_dark"
app:layout_scrollFlags="enterAlways">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/application_title"
android:textColor="#color/colorWhite"
android:textSize="24sp"/>
</Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:id="#+id/mealPlannerCardView"
android:contextClickable="true"
android:focusable="true"
app:cardBackgroundColor="#color/colorWhite">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:src="#drawable/wedding_dinner"
android:contentDescription="#string/wedding_background_cont_desc"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/mealPlannerTextView"
android:textColor="#color/design_default_color_primary_dark"/>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</ScrollView>
output
I tried to use layout_gravity="Top" but it made no difference.
EDIT
android:scaleType="fitStart" made the Image "stick" to the TOP of the MaterialCardView, but now very large space beneath the ImageView that requires scrolling to get to end.
Add the line below in your xml
android:layout_gravity="start|top"
See if this repositions the image for you. Worry about centring later if this works.
You might get the result you want by setting a scaleType for the image view.
Checkout this link: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide
It shows examples of each scaleType, it will help you to choose the right one to achieve the appearance you need.
This is happening because the Android framework is trying to maintain the aspect ratio in the face of your height and width constraints and default scale type.
There are more than one solutions to your problem and its for you to choose based on whose results are acceptable to you. All these solutions revolve around helping the framework with ImageView's aspect ratio. Let me try to put down the possible solutions that I can think of.
First solution can be as simple as changing the scale type on your ImageView as below:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/wedding_dinner"/>
That will take away the white spaces but crop your image.
A slight variation of the above, where you can define a fixed height of the image. This is a surprisingly widely used solution as it provides a certain
<ImageView
android:layout_width="match_parent"
android:layout_height="240dp"
android:scaleType="centerCrop"
android:src="#drawable/wedding_dinner"/>
Finally, a more elegant and better solution is to provide a fixed aspect ratio to your images using a ConstrainLayout.
I have created a layout and define following Xml in layout file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.kirmani.myapplication.MainActivity"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimary"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#color/colorPrimaryDark"
/>
<ImageView
android:layout_width="405dp"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
</LinearLayout>
This is filling my whole screen perfectly in Nexus 4 screen. but when i preview all screens, its giving very weird look in some screens.
I am using DP, it should maintain same display according all screens, but it is not working like that. Kindly guide me..
Actually dp maintains same display according all screens. It's because every device are not supposed to be same width in dp. Some devices has 480dp, some of them 360dp etc.
If you want to your image fit your width, you must use
<ImageView
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
do not use fixed dp.
EDIT:
If you want to height fill up, use this:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
/>
Your 3rd imageview width should be match parent. Like this
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
/>
instead of
<ImageView
android:layout_width="405dp"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
We are talking Android ABC here. You need to understand how this works instead of looking for concrete answers to concrete problems, as I already recommend you here.
Every device has an specific dimension in DPs. Nexus 4 is 384x640 but is the only one in your image with those dimensions. Please realize that is not that "is looking weird on some screens", in fact is gonna look weird on all screens that are not 384x640. For instance, the Nexus One in your image (which is 533dp x 320dp) is not working as expected, but is more difficult to realize because what is wrong is outside your view, but the views are bigger than the screen. Same with the Nexus S.
If you are trying to get a view from edge to edge (all the screen width), then use match_parent. Do not specify a size in DPs.
If you are trying to distribute views horizontally or vertically, please use an specific ViewGroup and/or weights, or you can use the Percent Support Library for doing things like this or this. Take a look at this tutorial for more.
Anyway, here you have your copy&paste code.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="#color/colorPrimaryDark"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.6"
android:background="#color/colorAccent"/>
</LinearLayout>
I am working on an app which must support all the sizes. Since the 1920x1080 is wider than 480x800, I am unable to give the best fit for both at same time for landscape view. Where as they lie under same dimension. There is no problem with the portrait view cause it has really a small amount of difference on portrait view but when turning it to landscape view the entire thing is not coming in the screen.
This is the view of 1920x1080.
This is the view of 480x800
Both these sizes are accessing their xml file from layout-sw320dp-land
I'm only facing this problem for hdp screens that is layout-sw320dp screens since it has a very small space to work with. And there is no such problem for higher screen sizes since we have enough space to decorate.
Can anyone help me to sort out this problem?
We have many questions and answers for this problem but I'm unable to get the perfect solution for this.
Thanks in advance.
In case the problem only happens in this screen consider using LinearLayout with weights, that will give you a responsive design that is independent from the screen size or resolution - instead it will render by percentage making the views take the same percentage of the screen no matter what the screen size is.
Attached is an XML sample for a weighted screen.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="90"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="90"
android:background="#8000ff00"
android:orientation="vertical" >
<!-- This is the green view -->
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="10"
android:background="#80ff0000"
android:orientation="vertical" >
<!-- This is the red view -->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#800000ff" >
<!-- This is the bottom blue view -->
</LinearLayout>
</LinearLayout>
This worked for me more than perfect. layout-sw320dp-land-hdpi and layout-sw320dpi-land-xhdpi
I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?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="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>
android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here
I've got a 4-item start screen in my app, which looks like the following:
What's important to me there:
- All items do have the same width (not regarding how much text is actually in it)
- Look the same on all devices (small-screen, mdpi, large-screen, etc.)
Im just wondering if there is a easy solution about this problem?
I've tried using 3 LinearLayouts but thats really awkward..
(1 presenting the layout root[vertical] and two which do each contain 2 buttons[horizonal]).
Making this layout ready for multiple screens would require a lot of fixed-width and fixed-margin hacking. Just like "button margin = 30dp on xlarge, 20 on large, 15 on normal,...".
My layout-xml:
<?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="fill_parent"
android:background="#drawable/background"
android:id="#+id/main_root"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_learn"
android:text="#string/mainBtn_learn"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_quiz"
android:text="#string/mainBtn_quiz"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_search"
android:text="#string/mainBtn_search"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_more"
android:text="#string/mainBtn_more"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
Is there a view which "auto-scales" these Buttons or still any other easier solution?
Edit:
So, in special, you need something like
button:
android:layout_width="15%" // 15% of screen width / height depending on the orientation
android:layout_marginBottom="10%" // see above
I'm pretty new to Android development but I can show you what worked for me in a similar case. I defined my layout as follows:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/outputText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="false" />
<Spinner
android:id="#+id/outputSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/OutputBaseOptionsPrompt" />
</LinearLayout>
I have a horizontal layout with two items. The LinearLayout has a width of "match_parent" so that it is as wide as the screen. Both items in the layout have the following:
android:layout_width="0dp"
android:layout_weight="1"
Since both items have a layout_weight of 1, they will be drawn at the same width. In this case, each item takes up half of the available space. If you change the weight of one of these items to "2" then it will be twice as wide as the item with a weight of "1".
Do you already have xml that makes it work on one screen size? If so post what you have so far.
I would suggest using a RelativeLayout for your root though. You can use the alignCenter attributes to float your children towards the middle. Then you just have to hard code the inner margins (how far apart you want the buttons) rather than the margin from yourself to the wall.
You could also avoid having to hard code the inner margin by making your own button 9 patch images. You can just add a border of transparent pixels in your image to represent the margin. You'll probably still want to supply an image for each density you wish to support though.
The solution is you dont use hardcoded values any where
Put three images with same name in hdpi mdpi and ldpi folders in drawables
an run the code