How can I adjust EditTexts and Buttons to fit any screen size for android ? I'm trying to put some transparent EditTexts and Buttons in certain positions to fit my background image, but when I change screen size every thing changes. Here are my background image and my XML code :
<?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"
android:background="#drawable/login_page"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10sp" >
<EditText
android:id="#+id/etLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10sp"
android:layout_marginTop="135sp"
android:background="#android:color/transparent"
android:hint="Login"
android:inputType="textCapWords"
android:padding="8sp" />
<EditText
android:id="#+id/etPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="0sp"
android:layout_marginTop="-3sp"
android:background="#android:color/transparent"
android:hint="Password"
android:inputType="textPassword"
android:padding="8sp" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12sp"
android:background="#android:color/transparent"
android:minHeight="40sp"
android:minWidth="500sp"
android:text="Login"
android:textColor="#08b0ef" />
</LinearLayout>
I tried other units like dp and dpi and dip but no one is giving the expected result.
Have you tried using "android:layout_weight" ?
I think what your talking about to set your Layout objects in a certain position relative to the background and once set, stay fixed proportionally so when the background stretches our contracts so do the buttons so they stay in the same position over the background?
If so (I could be way off),
setting the layout_weight attribute inside of each child object of the LinearLayout can let you position everything relative to the screen size so it automatically changes with each screen size. It will take a little trial and error to get the right percentages but should work.
Also consider creating multiple xml layout definitions for the major screen sizes so the OS automatically calls the one it needs for a particular screen with a resource qualifier, that way you know it will display in the right position. For example a xml called activity_main in R.layout is inflated by default but if you also create a activity_main in R.layout-land, this XML will only be inflated if the screen is in landscape mode. So you can set the sizes of your editText and Buttons for multiple screen size.
If you want to create only one file for all layout and trying to make your screen universal, you should try Linearlayout with weight property.
Instead of using sp or px, you should use pd for margin, padding or any other properties in your layout. dp will render differently as per screen resolution.
Related
<com.google.android.material.textview.MaterialTextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo" />
I am trying to create a MaterialTextView in my XML layout that will display text on a single line. Currently, the layout_width of this MaterialTextView is set to wrap_content, but I want it to continue expanding even if it extends beyond the screen boundaries.
The current result is that the MaterialTextView's width stops at the edge of the screen.
The desired result is for the MaterialTextView's width to continue expanding, regardless of the screen boundaries.
How can I achieve this using XML only?
Maybe using some parent view that actually extends on screen as you want regardless the screen boundaries.
This worked for me:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo" />
</HorizontalScrollView>
And for this particular case maybe you can disable the scroll if that doesn't fit your goal.
Preview XML:
Preview
I know this sounds simple but I wanted to change a button's font size to fill the Button .Even though the text doesn't take all the space inside the button when I decrease text height for example the Button's height decreases as well.Is there any way I can change The text-size so it fills that space inside the Button or do I have to just use an Image Button .
Here is the case :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/black"
android:id="#+id/led"
>
<Button
android:id="#+id/grow"
android:layout_width="match_parent"
android:layout_height="39dp"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:textSize="15dp"
android:background="#color/Lightbrown"
android:text="A▲"
android:textAllCaps="false"
/>
<Button
android:layout_width="match_parent"
android:layout_height="39dp"
android:text="A▼"
android:textAllCaps="false"
android:id="#+id/shrink"
android:background="#color/Lightbrown"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:padding="0dp"
android:textSize="10dp"
/>
See I used my Linearlayout as a background for my Buttons the second button's size changes with its font size I just want its size to remain the same as the first Button but with a smaller textsize.
Update
Your second button is not actually smaller, it is just aligned in a way you wouldn't necessarily expect.
Horizontal LinearLayouts with TextView (or subclass, which Button is) children will "baseline align" the children. That means they will make sure that the bottom edge of all the text in the row is at the same height. Since your second button uses smaller text, the text bottom would be higher up inside the button, so the LinearLayout forces the whole button down to accomodate.
Add this attribute to your LinearLayout:
android:baselineAligned="false"
Original
First, I assume you're using android:layout_height="wrap_content". If you don't want your button's height to scale with font size, you'll have to change this to some fixed value (or match_parent if you want it to be the same size as its parent).
As for why the text "doesn't take up all the space", that's because Buttons have padding built into them automatically. You can remove this padding by defining android:padding="0dp"
However, you'll soon notice that the button looks really bad if you give it no padding and too-large text. How to solve that is really up to the requirements of your design.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center_horizontal"
android:padding="0dp"
android:textSize="36sp"
android:text="Hello world"/>
</FrameLayout>
Use a fixed size instead of wrap_content for your button.
f that doesn't work for your design, consider overlaying a TextView on top of your Button (with ConstraintLayout or FrameLayout or RelativeLayout). After that, you can set the TextView's focusable, focusableInTouchMode, and clickable properties to false so that it doesn't intercept your Button's clicks.
I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.
For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.
I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout
Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>
You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>
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
I'm trying to make a widget that would be 4x1.
I set the provider as follow
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="294dp"
android:minHeight="72dp"
android:updatePeriodMillis="0"
android:initialLayout="#layout/widgetlayout"></appwidget-provider>
and the widget layout is as follow
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="320dp"
android:layout_height="100dp"
android:background="#drawable/widgetframe">
<Button android:id="#+id/butscan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me" />
<Button android:id="#+id/butenable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="On/Off"
android:paddingRight="5dip"/>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="4dip"
android:includeFontPadding="false"
android:id="#+id/lblcurrent"
android:text="Test"/></LinearLayout>
Now when i try this on the emulator, i get only the middle of the layer shown on the home screen. The background image is the 4x1 portait image from the SDK (320x100).
What am i missing?
Your layout width and height for the LinearLayout should probably be fill_parent.
You buttons do not have any resources for graphics but I assume that you are assigning something like drawables or bitmaps in code, otherwise they might not show. I have never created a button without an image, so I do not know how it would act.
I am suprised that your 'Test' text is not showing, but it could be diplaying outside the size of your widget since your background is bigger thatn the widget itself. Again, try fill_parent instead of 320dp and 100dp (BTW, I have never used 'dp' only 'sp').
Your TextView is taking over the layout due to fill_parent.
You should probably add layout_weight=1 to it, so it only scales to the available space.