I have a layout problem and don't know how to solve it.
I like to display a webview and 2 buttons on the screen.
I defined this with a LinearLayout containing the webview and another linearlayout, which holds the 2 buttons.
This looked very good so far. Since the newer devices have larger screensizes , my screen looks very ugly
because my buttons are too small.
The inner linearlayout which holds the 2 buttons is defined with layout_height="60px", which I guess is my problem.
How would you manage this to look good on any device ? Is there a possibility to define sizes depending on the screensize ?
Or should I set the height of my inner linearlayout at runtime as a factor of screenheigh ?
What is the best way to do this ?
regards
Screenshot showing my buttons are too small on HD screen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:id="#+id/textviewerlayout"
android:orientation="vertical">
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="60px"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:id="#+id/textviewerbuttonlayout"
android:orientation="horizontal">
<Button
android:id="#+id/vorher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:text="" />
<Button
android:id="#+id/nachher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:text="" />
</LinearLayout>
</LinearLayout>
Rather then using px, use dp. This will use density-independent pixels which are calculated per device based on the screen size and resolution. Look here for more info. Because HD screens use higher density pixels, your buttons will appear smaller due to their hardcoded pixel size. Using dp (or dip) will make them approximately the same size across multiple devices.
Like Jorgan said use dp than the px.
Take a look if it this is what are looking for:
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textviewerbuttonlayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFFFFF"
android:orientation="horizontal" >
<Button
android:id="#+id/vorher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="" />
<Button
android:id="#+id/nachher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="" />
</LinearLayout>
Using weight to determine height is gonna make it look good in any size, but if you want to make a specific layout for tablet or land scape you should make it in theirs folders.
http://developer.android.com/guide/practices/screens_support.html
Check the above link under the topic Best practices
Here is a quick checklist about how you can ensure that your application displays properly on different screens:
Use wrap_content, fill_parent, or dp units when specifying dimensions in an XML layout file.
Do not use hard coded pixel values in your application code
You can use a single relative layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/button1"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="67dp"
android:text="Button" />
<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_marginRight="57dp"
android:text="Button" />
</RelativeLayout>
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>
Creating an application in portrait mode where I have to align Button on image based on top margin. I'm using dimens file in values-sw360dp which is looking proper in nexus 5 but the same values is not aligning the Buttons in nexus 4 as both of the devices using values-sw360dp folder for dimens file.
Can you please suggest the solution for this. Also can any one provide list of all possible values folder that should be integrated to support multiple screens
Following is the code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/bc_imgbc_logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/bc_logo"
android:orientation="horizontal"
android:weightSum="1"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/bc_img_margin_top">
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/signing_tab_btn"
android:text="SIGN IN"
android:textColor="#color/colorAccent" />
<Button
android:id="#+id/registration_btn"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout
In above code I need to align the LinearLayout on the ImageView so using android:layout_marginTop="#dimen/bc_img_margin_top"for setting margin.
I have the Image in <ImageView/> which i have to give height and width as match parent in order to maintain aspect ratio and occupy width of screen so this results in the image showing in the area i wanted top of screen but the <ImageView/> is occupying area of whole screen and I want to align the <LinearLayout/> having buttons on the bottom part of Image.
Following is the image in which the sign in button with yellow underline and register button in white text needs to be aligned on bottom most part of the image where image ends. and the blue area depicts the area occupied by which covers the whole device height.
you need to add some values by yourself like backgrounds and dimensions...
<?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"
android:background="#00FF00">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="#drawable/background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="horizontal"
android:layout_gravity="top"
android:weightSum="1"
>
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="SIGN IN"
android:textColor="#00FFFF" />
<Button
android:id="#+id/registration_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#00FFFF" />
</LinearLayout>
</FrameLayout>
Create this kind of value structre for different sizes
I am beginner and I what add a text that will change if it was seen in a smaller mobile
I pasted here
<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="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
In the picture, I want it to look like Pic1 and Pic2, the problem is, Im making it like Pic3 and I don't want that!
Please update your xml.
<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="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
Main problem is your textView's width is `"fill_parent". Your texts fill screen because of that.
The problem here is the way you have setup your layout is not the right solution if you wan't to have different layouts for different screens. Your outermost view is a Relative layout with width and height set to fill the screen (that's what fill parent does). Now inside that Relative Layout you have a LinearLayout with width and height set to match its parent (RelativeLayout). So this is also filling your screen. Now inside that you have a text view with width and height set to fill it's parent (LinearLayout), and since LinearLayout is taking full screen, your TextView will fill the whole screen.
The best way to support smaller screen is that in your res directory create a layout-small folder and place the same xml layout file in there but change the dimensions of your textView. If you want the text to be as large as its size, you can do "wrap_content" for both width and height. You can also specify android:textSize in dp to play around with different font sizes.
Try using relative units. I really recommend you to read this:
Supporting Multiple Screens
To make a long story short, using "sp" units is the way to go. use the attribute
android:textSize="15sp"
replacing 15 by the size you think it is the most appropriate for your needs.
Try this:
<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="#1d72c3"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
I need to make below UI for my android app.
Specifications:
UI contains total 4 sections (1-4).
Component 1,2 & 4 must be of same size.
Component 3 must be twice the size of component 1.
But how can I calculate the exact dip size so that all the component are uniformly sized on different sized screens?
If my approach is wrong then please advice.
Thank You
If my approach is wrong then please advice.
Use a vertical LinearLayout and android:layout_weight on the children. If we pretend for a moment that the children are buttons, use:
<?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">
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="2"
android:text="2"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="3"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="4"/>
</LinearLayout>
The result is:
I need to create a basic browser for the android: a WebView a toolbar at the top with a back button, and a toolbar at the bottom with some more buttons.
What would be the best way to go about doing this?
This is what I have so far:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/browserBackButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back" />
<WebView
android:id="#+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/back" />
<ImageButton
android:id="#+id/forwardButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/forward" />
<ImageButton
android:id="#+id/reloadButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/reload" />
<ImageButton
android:id="#+id/browserButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/safari" />
</LinearLayout>
</LinearLayout>
The bottom LinearLayout of buttons doesn't show at all. Only the top back Button and the WebView.
LinearLayout is ok.
You should change the height of the WebView control and set the weight to 1
Do it so:
<WebView android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent"
or even so, as it is recommended by the Lint tool:
<WebView android:layout_height="0dip" android:layout_weight="1" android:layout_width="fill_parent"
The weight is important, it forces the view to fill the remaining space.
If it doesn't help, you can also try to set the height of the bottom panel to some constant value, or set the height of image buttons to wrap_content, then you can be sure that it will work.
Personally, I don't like doing nested LinearLayouts it can hinder performance when your layouts become more complex. It might not be a big deal for something small; but, it is still good practice to use RelativeLayouts.
Also, lose the xmlns:android="http://schemas.android.com/apk/res/android" in your second LinearLayout. You don't need it.
Hope this helps.