I'm facing a strange issue in my project when creating a simple xml design as follow:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FF0000"
android:layout_marginLeft="30dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="left|center_vertical"/>
Now see the difference, this is the view in 4.2.2 :
And this one in 2.3.3:
Would appreciate if someone can help me with it. thanks
It works, if you change it to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:background="#FF0000"
android:orientation="vertical" >
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="New Button" />
</LinearLayout>
(I think I know why it behaves like this, let me just check something. I'll add an explanation later on)
I have faced the same issue, in my case I had something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/match"
android:background="#color/light"
android:orientation="vertical"
android:layout_margin="#dimen/lateral_margin" >
<ImageView
android:id="#+id/full_screen_image"
style="#style/match_width"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_weight="2"
android:contentDescription="#string/image_content_description"/>
<TextView
android:id="#+id/barcode_number"
style="#style/match_width"
android:gravity="center"
android:textColor="#color/dark_text"
android:textSize="30sp"
android:visibility="gone" />
</LinearLayout>
My problem was solved changing
android:layout_margin="#dimen/lateral_margin" >
with:
android:padding="#dimen/lateral_margin" >
It seems androids 2.3.3 and lower were computing the margin differently than android 4 and greater. Now all of them behave the same way.
In your case, maybe setting the black layouts margin as padding could help.
Related
I've been trying to recreate this layout in Android Studio (API 19) without success.
I added at the top part of the image what I need without texts on it, the part below has some explanations.
Every time I tried (no matter LinearLayout or GridLayout), the text in the middle broke the design if it is long or if I do not set real DP size (like using wrap_content), if the text has a fixed size I must adapt it to every screen size on both, vertical and horizontal, which I don't want, because I must update a lot of files it every time I make changes on layouts, and if it has wrap_content and the text is long the switch goes off of the screen.
I made this "design" with Photoshop of what I need to recreate on Android Studio on a layout (xml only, not programmatically), if possible I'd like LinearLayout or GridLayout or both, I don't care how much sub-layouts are needed.
Additional: If someone knows how to get that switch style for older versions of Android, it'd be really good to get the same style on that too, but is not necessary.
Please help me, I really can't make it, thanks a lot.
With a Relative Layout this kind of design wont be a problem.
You will need to use the properties android:layout_alignParentRight and android:layout_alignParentLeft.
Your center textview will use android:layout_toRightOf and ndroid:layout_toLeftOf.
More informations : Relative layout documentation
Use following XML as your layout codes, this is exactly what you want on your designs
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/icon_paypal"
android:layout_margin="16dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/switchlayout"
android:layout_toRightOf="#+id/image"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 1"
android:textColor="#000"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 2"
android:textColor="#ccc"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/switchlayout"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:paddingLeft="16dp"
android:gravity="center"
android:layout_height="72dp">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Use Follow XML code. it will fit in any screen
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/app_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<Switch
android:layout_width="40dp"
android:layout_height="wrap_content" />
</LinearLayout>
I am working on a project and I have run into some problems. I haven't worked with the layouts very much so I don't know if this is possible or not.
In the picture I have added the project mock-up. For the lower screen resolution it looks fine, but when I put the app on 5 inch device, this orange area is too high and I wanted to know if it is possible somehow to get that area centered.
The orange area is a LinearLayout and everything is wrapped inside LinearLayout. Hope you understand what I mean I what I am asking.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom"
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
This is code for the mock-up. For the project it's pretty much the same
Try this !
I tried putting Linear layout inside a relative layout and defining its gravity. I checked it on various resolution.Give it a try
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff0000"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="76dp"
android:background="#175797"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject" />
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#00FFFF"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Send" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFA500"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
you can try #g00dy answer or else
You have to create separate layout for phablet (i.e. 5 inch devices)
Here in this link they had explain how we can put our tablets layouts...
On android developer site they have had explain how android manage layouts for different screen sizes check this link
May be try android:layout_gravity="center" that should do the trick :)
Also in addition, you can add android:layout_centerInParent="true" and take a look at this thread as well.
for giving the compatibility of xml for all android devices and tablets, please use the Relative Layout as a parent view and set the component according to your requirement.
please follow this link for more reference: http://developer.android.com/reference/android/widget/RelativeLayout.html
When I render a large Webview on android 4.1, the webview loads correctly, but also popsout of the layout. Here's an example:
As you can see in the top left corner, there's a white space, that shouldn't be there. If I tap with my finger it, it disappears...
I've tried to invalidate & requestLayout the top level container of this contentView, but it's still happening.
As I said in title, this is only happening in 4.0.4 devices (I know that 4.1 are ok.)
Do you guys know what else could I try?
Thanks.
Edit
That blank rectangle, is somehow over the menubar. Maybe invalidating menu will solve it?
I've tried: this.invalidateOptionsMenu(); and still the same issue.
Edit2:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerTotaApp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="horizontal" >
<View
android:id="#+id/rightshadow"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/contentContainer"
android:background="#drawable/shadow_right" />
<RelativeLayout
android:id="#+id/bgImageSliderContainer"
android:layout_width="700dp"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#000000" >
</RelativeLayout>
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<LinearLayout
android:id="#+id/containerRightOptional"
android:layout_width="680dp"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/navigationContainer"
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#393939" >
<LinearLayout
android:id="#+id/containerTopMenu"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/companybg"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textEntradaMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="COMPANY"
android:textSize="32sp" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/containerTopMenu">
<LinearLayout
android:id="#+id/containerEntradesMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/contentContainer"
android:layout_width="600dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/navigationContainer"
android:background="#ffffff">
<LinearLayout
android:id="#+id/titleContentContainer"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#EBEBEB">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:onClick="toggleMenu"
android:src="#drawable/vista2_cerca" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp" />
</LinearLayout>
<View
android:id="#+id/separadortop"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/titleContentContainer"
android:background="#cecece"
android:visibility="gone" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/separadortop"
android:visibility="gone" />
<View
android:id="#+id/separadortop2"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/spinner1"
android:background="#cecece" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/separadortop2"
android:background="#ffffff" >
<LinearLayout
android:id="#+id/variableContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The webviews are added dynamically to VariableContent
Granted that I can't pinpoint exactly what the source of your problem is, you can give disabling the hardware acceleration a try:
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
There are also other "interesting" options that you might try to switch on and off:
webv.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
(I know that caching shouldn't be related to your problem, but turning caching off fixed the most curious glitches in my webview, so you probably want to try yourself) and
web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
No offense to the developers Team, but WebViews on Android are quite a mess, and here are a couple of links to back this statement up:
hardware accelerated webview slide-in animation flickering on ICS
webview goes blank when loading url in android ics
WebView, showing blank in ICS
which might also be useful to you.
Let us know if you find some solution anyway
Hope this helps
I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />
Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)
Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<RelativeLayout 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:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>
I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.
What I'm Trying to do
At the moment I'm creating a design for my Activity, which has different kind of "boxes" in it. Every of those "boxes", has diffrent informations in it. I created the design by hand on a piece of paper, but I won't get the idea down in my .xml!!
Question
On the bottom of this post you'll find a copyed "box" which I'd like to create for my app. Please help me to realize this, because I really don't get how to do this in my XML! I'm working with Android 4.0 (ICS).
Something like this should work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/box_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Box Title" />
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/box_content_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hans Max" />
<TextView
android:id="#+id/box_content_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Maxiburger 12" />
<TextView
android:id="#+id/box_content_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8002, Muster" />
</LinearLayout>
<ImageButton
android:id="#+id/box_button"
android:layout_weight="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>
I give you the pseudo layout:
<RelativeLayout>
<TextView
full width
id:infobox/>
<Button
layoutParentRight
below infobox/>
<TextView
layout_below infobox
toLeftOf button/>
// repeat the textView above and always below the previous one
</RelativeLayout>
With LinearLayouts:
<LinearLayout>
<TextView infobox/>
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<Button/>
</LinearLayout>
</LinearLayout>
As you see it is much more complex and bloated. As I always get confused by horizontal/vertical orientation I leave this to you to find out :)
Just experiment and if you can't get it to work, update your answer with the layout you tried.