Supporting Multiple Screens -tablet with low resolution support - android

I already read the developer guide & also refer many SO questions.
but I'm still not sure what is the proper way.
I am develop the application only for Tablet.
I have the following folders,
layout
layout-large
layout-xlarge
Also In the manifest file, I have definied the followings,
<supports-screens
android:largeScreens="true"
android:anyDensity="true" />
If screen resolution greater than 800 * 480 -> application working properlly
My problem,
I tested the same application in china based device with 503 * 320 resolution,
It doesn`t works properly.
Please, tell me how to solve this issue.Thanks.
Update:
Tablet with high resolution,
Tablet with low resolution,
home.xml
<?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="#color/layout_light_background">
<Button
android:id="#+id/btn_dine_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/dineIn"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_delivery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="90dp"
android:layout_toLeftOf="#+id/textView"
android:layout_toStartOf="#+id/textView"
android:background="#color/orange"
android:padding="20dp"
android:text="#string/delivery"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_collection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_delivery"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:background="#color/orange"
android:padding="20dp"
android:text="#string/collection"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_previous_orders"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn_delivery"
android:layout_alignLeft="#+id/btn_delivery"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/btn_delivery"
android:layout_alignStart="#+id/btn_delivery"
android:layout_marginBottom="71dp"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/previousOrders"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_delivery"
android:layout_centerHorizontal="true"
android:text=" " />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/sampleRestaurantName"
android:textSize="#dimen/restaurantNameFontSize"
android:textStyle="bold" />
<Button
android:id="#+id/btnAssignDriver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn_collection"
android:layout_alignRight="#+id/btn_collection"
android:layout_alignTop="#+id/btn_previous_orders"
android:layout_toRightOf="#+id/textView"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/assignDriver"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
Currently all of the three folders contains same xml file..
layout/home.xml title is Normal
& layout-large/home.xml title is MyRestaurant

I believe I just found it.
Font size from device to device differs for devices with different resolutions when setting text appearance.
android:textAppearance="?android:attr/textAppearanceLarge"
Since previous orders is a long sentence it didn't fit in its button. because its button width equals to the delivery button width. and because left and right padding is so large 100dp the space left for text is small. thats why the button increased its height cause height is wrap content.

Since your app. doesn't support language directions. you don't have to include the attributes with end and start.
Those will affect the layout appearance if device language direction is different than you expected. which is the language you tested your app on. "English"
Remove everything that have the words end and start in it as:
android:layout_toEndOf="#+id/textView"
android:layout_marginStart="40dp"
and others. do that and check the results.

Related

Why does this android app does not display in full view in smaller screen device?

I'm using Relative Layout and I set the width and length to match_parent. It displays fine in Redmi k30 but in Pixel XL it only display up-to Delete Record, it does not display View All Record and scrolling also does not work.
I'm new to android and just starting layout designs, please advice. Thank you!
It should display like this:
But on Pixel XL the last button is missing:
XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#2196F3"
android:padding="10dp"
tools:context=".RUDActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Please enter product ID to retrieve"
android:textColor="#37474F"
android:textSize="24dp" />
<EditText
android:id="#+id/prodId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtTitle"
android:hint="Product ID"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/prodId"
android:layout_marginTop="30dp"
android:hint="Name"
android:textColor="#37474F"
android:inputType="textPersonName"
android:textSize="24dp" />
<EditText
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:hint="Description"
android:textColor="#37474F"
android:inputType="text"
android:textSize="24dp" />
<EditText
android:id="#+id/price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/description"
android:hint="Price"
android:textColor="#37474F"
android:inputType="numberDecimal"
android:textSize="24dp" />
<EditText
android:id="#+id/quantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/price"
android:hint="Quantity"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<Button
android:id="#+id/btnSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/quantity"
android:layout_marginTop="30dp"
android:text="Search Data"
android:textSize="24dp" />
<Button
android:id="#+id/btnView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnDelete"
android:layout_marginTop="30dp"
android:text="View All Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnUpdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnSearch"
android:layout_marginTop="30dp"
android:text="Update Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnUpdate"
android:layout_marginTop="30dp"
android:text="Delete Record"
android:textSize="24dp" />
Welcome to android..
Think of arranging 15 people in 5 rows of 3 in a dark room.
If you have to make them look the same whatever the dimensions of the room might be then the space cannot be the same.
Redmi and Pixel XL are high density and long devices.
You can use this library Intuit SDK library for the dimensions. This library helps to automatically scale depending on the screen size.
Going forward However you have to use ConstraintLayout with matchConstraints and come up with a design idea that makes it look the same in most devices.
For eg: Making the upper form 1 section and the lower buttons another.
And instead of following a top-down approach make the form part stick to the top and the buttons part to the bottom.
For the scroll you have to use a ScrollView and wrap your layouts within it , Here is a good Stackover FLow Question to get started

Android Studio Layout changes on real device

I have a problem with the layout on the Android Studio. The Editor (XML file) and Emulator (Nexus 10) shows the layout right. But if I run the app on my Huawei Mediaped M5, the layout changes and everything is mixed.
The Emulator and my device have the same Resolution(2560*1600).
The XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<Button
android:id="#+id/button_fahrzeugsimulation"
android:layout_width="461dp"
android:layout_height="203dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
android:background="#android:color/holo_blue_dark"
android:text="Fahrzeugsimulation"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_uebungen"
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/button_fahrzeugsimulation"
android:layout_marginBottom="106dp"
android:background="#android:color/holo_blue_dark"
android:text="Übungen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Weiterbildungsangebot"
android:layout_width="wrap_content"
android:layout_height="207dp"
android:layout_alignBottom="#+id/button_fahrzeugsimulation"
android:layout_alignParentEnd="true"
android:layout_marginEnd="107dp"
android:background="#android:color/holo_blue_dark"
android:text="Weiterbildungsangebot"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Unterlagen"
android:layout_width="498dp"
android:layout_height="185dp"
android:layout_alignStart="#+id/button_Weiterbildungsangebot"
android:layout_alignTop="#+id/button_uebungen"
android:layout_marginStart="-6dp"
android:layout_marginTop="-2dp"
android:background="#android:color/holo_blue_dark"
android:text="Unterlagen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView_eMobility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="eMobility"
android:textColor="#android:color/holo_blue_dark"
android:textStyle="bold"
android:textSize="64sp" />
<TextView
android:id="#+id/textView_Lab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView_eMobility"
android:layout_toEndOf="#+id/textView_eMobility"
android:text="Lab"
android:textColor="#android:color/holo_red_light"
android:textStyle="bold"
android:textSize="52sp" />
I think the problem is that the screen width of real device is not the same of the emulator, so you need
to create different layouts to support design for your screen width and height and in each layout,
change views dimensions to fit the screen..
this documentation would help : https://developer.android.com/training/multiscreen/screensizes
The device which your testing resolution is different from which you are trying to test on device(Huawei Mediaped M5)
So you are facing the issue.Even you are using marginstart in your layout.There are some static values which will vary with devices.
like this values:
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
device screen sizes check below link which shows nexus10 and Huawei Mediaped M5
screen size is different

How to make android layout scalable for different screen size?

I found a lot of question were asked on supporting different screen size where the screen size are varies from Tablet to phone and etc. I am writing my first android application and when I am looking at the layout in different phone, All of them are not relatively scalable to screen.
I am pasting a small RelativeLayout code here to understand how to make it proper scalable in less changes. I also followed the android official doc and learn two things
drawable images for different screen
use sp for mentioning text size and for rest of them use dp
But it's not helping me
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="#ffd5d6d6">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="#ffffffff"
android:elevation="#dimen/abc_action_bar_default_height_material">
<ImageView
android:id="#+id/back"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/profileDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Test"
android:textColor="#ff3c3f41"
android:textSize="15dp" />
<ImageView
android:id="#+id/flag"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignWithParentIfMissing="false"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="#drawable/temp_ic_share" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="52dp">
<TextView
android:id="#+id/roommate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Who are you?"
android:textColor="#ff3c3f41"
android:textSize="18dp" />
<Button
android:id="#+id/foodie"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="60dp"
android:layout_height="38dp"
android:layout_alignParentStart="false"
android:layout_marginLeft="56dp"
android:layout_marginTop="80dp"
android:background="#fa6425"
android:text="Foodie"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button4"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#+id/foodie"
android:background="#fa6425"
android:text="Beach bum"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button5"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_alignTop="#+id/button4"
android:layout_marginLeft="15dp"
android:layout_toEndOf="#+id/button4"
android:background="#fa6425"
android:text="Tree hugger"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
</RelativeLayout>
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#fa6425"
android:text="Send"
android:textColor="#fff4f4f4" />
</RelativeLayout>
As you can see that I am including two Parallel RelativeLayout in one main RelativeLayout. here the views on three different size:
nexus one
nexus 5
nexus 6
Best alignment is in Nexus 5 screen. Do I need to create different layout folder i.e. hdpi, mdpi and etc? If I am not wrong then I don't need to because my application is going to run only on phone devices (in portrait mode only).
How can I make scalable screen layouts. Any help would be appreciable :)
If you want to force all the views to have the same ration on screen the only way is to give it a size dynamically after you calculated the ratio between the desired pixels and the screen density, which is not really a solution, What you need to understand is when working with various screen sizes, each one suppose to behave differently, a Tablet screen is expected to be bigger and thus having more room for elements to show up on screen, a phone screen is smaller and less elements should be showed on screen, you need to adjust your view to support all of these screens and the proper way is to write a different layout for tablets and phones, or even different layout by screen dpi.
I am pretty new, I am using Android Studio, is that what you are using? First thing first, if you always want you activity to be in portrait mode, use this code in your manifest, you have to add the code to each activity you want to stay in portrait mode. If you don't, and you don't add code to handle the switch in screen orientation, the phone will likely crash.
<activity
android:name=".TitleActivity"
android:label="#string/title_activity"
android:screenOrientation="portrait" >
</activity>
Instead of a relative view, Try the Linear Layout.
You would have your Main Layout, with a few nested Linear Layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/example">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Title Here"
android:id="#+id/Title"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:layout_marginBottom="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_weight="1"
android:layout_marginRight="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:background="#drawable/test"
android:layout_margin="50dp" />
</LinearLayout>
This layout has A title Above the three buttons, Then three buttons, then an image view below, it scales from 3.7 to 7.0. Larger than 7, I would make another layout.
You need an image named test in your drawable file.
use this Library will help you to set a Responsive scalable Views for all the devices Layouts
https://github.com/intuit/sdp
irs really easy and simpl just replace.
android:layout_width="50dp"
android:layout_height="60dp"
with.
android:layout_width="50sdp"
android:layout_height="60sdp"
and for textView
android:textSize="60ssp"
instead of. sp

Relative layout on different devices

I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....
Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.

Trying to understand Android layouts, image sizes and relations

I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)
Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.
DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!
check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>

Categories

Resources