I put 2 buttons, with wrap_content size, but as device is bigger, buttons are upper, I cannot figure how to fix them, so on all devices to have the same position. Is there a solution not to cover the head of this guy, as example.
Layout.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="#drawable/background"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#drawable/custom_button2" />
</RelativeLayout>
//try like this below one
#remove the margin top 102dp
#don't use button background image use color with white stroke
#make your button width as match parent and minheight= 100dp as ur need.
#add android:gravity="center" to your parent 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"
android:gravity="center"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/holo_green_dark" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#android:color/holo_green_dark" />
</RelativeLayout>
Android is running on multiple devices with different screen resolutions, here is how to support them all: Supporting Multiple Screens
Basically we have following screens resolution:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
to support them all, in Res folder we have to create folders depending what screens we want to support.
layout-xlarge
layout-large
layout-normal
layout-small
after, copy the your final layout_file.xml to all of them, open it in Graphical mode, and rearrange the buttons to look good on the screen. Depending on the resolution screen android will choose layout which is closer to device resolution . Just test it on different devices, or virtual devices to make sure it looks good.
If you want all of your views to cover the whole screen of the device when the app is launched, you need LinearLayout's weight
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="vertical"
tools:context=".BasicScreenActivity">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:background="#drawable/custom_button2" />
</LinearLayout>
I usually have the weight total equal to 10 so its easier to compute and visualize the UI
Related
I am working on a project and I am trying to make the layout of the login screen. Layout Image
and here's my xml code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ngo.ravi.idi.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="30dp"
android:background="#color/colorPrimaryDark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="35sp"
android:textColor="#FFF"
android:text="#string/welcome"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/autour_one"
android:text="#string/descrip"
android:textColor="#fff"
android:textSize="15sp"/>
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="#string/learnMore"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:textColor="#fff"
android:background="#drawable/buttonstyle2"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/password" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_marginTop="20dp"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="#string/login"
android:background="#drawable/buttonstyle"/>
</LinearLayout>
I am facing a problem with its display. I am using emulator to check this app and I tried this in 4", 4.7", 5", 5.2", 6" display and it works fine with 5" and above but when I tried this with 4" and 4.7" I found that the text of this wouldn't scaling down. Is there any way to make this app to automatic scaling as per the device.
Thank in Advance
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
in gradle past this library :
dependencies {
implementation 'com.intuit.sdp:sdp-android:1.0.5'
implementation 'com.intuit.ssp:ssp-android:1.0.5'
}
If you want to use height, width, margin, padding etc then you use #dimen/_20sdp. (Take Size as per your requirement).
If you want to use TextSize then use #diment/_12ssp. (Take Size as per your requirement).
Please have a look below sample code:
<ImageView
android:id="#+id/img_companies"
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:src="#drawable/ic_companies"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
this way u can use fix size of height and width both side
UPDATE
sdp is used for same UI in Tablet and Mobile devices.
ssp is used for same TextSize for Tablet and Mobile devices.
also u can see this link for another example: https://github.com/intuit/sdp
hope it's useful for u
You have to create multiple Screen layout.
Reference :
https://developer.android.com/guide/practices/screens_support.html
https://stackoverflow.com/a/8256573/8448886
you should create layout layout like, for supporting all screens.
res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge
You can create multiple dimen files in diffrent size folders like this:
res/values-sw400p
res/values-sw600p
res/values-sw800p
and create dimen.xml in each folder.
and then make dimen item name same in each file but you can assign its values diffrent as per your requirment
example:
sw400p/ dimen.xml
textview_margin=10dp
sw600p/ dimen.xml
textview_margin=16dp
sw800p/ dimen.xml
textview_margin=20dp
I'm trying to create an app that is suitable for any kind of screen.
I created 4 different layout types ( layout - sw320dp , 480dp , 600dp , 720dp )
I am currently proceeding for "step " and I started to create the layout for devices that fall within sw-720dp then average for devices from 10 "
This is the activity_main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include layout="#layout/toolbar" />
<FrameLayout
android:layout_below="#+id/toolbar"
android:id="#+id/fragment_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:foreground="#drawable/shadow_toolbar"/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/nav_body_main" />
</android.support.v4.widget.DrawerLayout>
Then I designed the layout for a fragment ... and I added a button and the floating action button to insert ourselves as social references ( facebook twitter etc ) .
With the latter I gave the size in dp and increasingly distances dp in the one of the more
This is code.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingEnd="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<Button
android:id="#+id/button_vai_assistenza"
android:layout_width="540dp"
android:layout_height="65dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/custom_button"
android:text="INIZIA SUBITO!"
android:textColor="#drawable/custom_textcolor_button"
android:textSize="20dp" />
<TextView
android:id="#+id/textView_nome_app"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView_logo"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="20dp"
android:text="Assistenza Copyworld"
android:textColor="#000000"
android:textSize="35dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="30dp"
android:src="#drawable/logo_nav_grande" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView_copyright_benv"
android:layout_alignStart="#+id/textView_copyright_benv"
android:layout_below="#+id/button_vai_assistenza"
android:layout_marginTop="122dp"
android:text="www.copyworld.it"
android:textSize="25dp" />
<RelativeLayout
android:id="#+id/RelativeLayout_social"
android:layout_width="wrap_content"
android:layout_height="95dp"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="12dp"
android:orientation="horizontal">
<android.support.design.widget.FloatingActionButton
android:id="#+id/float_social_facebook"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="false"
android:src="#drawable/fb_icon_social"
app:backgroundTint="#drawable/custom_floating_action_button" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/float_social_twitter"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_toEndOf="#+id/float_social_facebook"
android:layout_toRightOf="#+id/float_social_facebook"
android:src="#drawable/tw_icon_social"
app:backgroundTint="#drawable/custom_floating_action_button" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/float_social_linkedin"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_toEndOf="#+id/float_social_twitter"
android:layout_toRightOf="#+id/float_social_twitter"
android:src="#drawable/li_icon_social"
app:backgroundTint="#drawable/custom_floating_action_button" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/float_social_youtube"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_toEndOf="#+id/float_social_linkedin"
android:layout_toRightOf="#+id/float_social_linkedin"
android:src="#drawable/yt_icon_social"
app:backgroundTint="#drawable/custom_floating_action_button" />
</RelativeLayout>
<TextView
android:id="#+id/textView_copyright_benv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="22dp"
android:text="Copyright © 2016 Copyworld srl " />
</RelativeLayout>
I then launched the app on the 3 tablet I have available .. (namely a galaxy tab 2 10.1, a galaxy tab A and galaxy tab E).
As soon as the app is open on the 3 devices I noticed this thing "abnormal" ...
The "social icons" and the TextView were at different distances between them ... (
in particular of the galaxy tab 2 10.1 and Galaxy Tab E,) while the Galaxy tab A icons and TextView are at the right distance as set in 'xml ...
How come the two devices distances not only equal to the right device ?? (The two devices have the text and view the icons at equal distances but different from the one on the Galaxy Tab A)
As for other components such as (image view with the app icon and the TextView with the name of the app) the dimensions and distances have been respected ...
How can I do to make everything in a "perfect adaptable layout" on all devices without each they assume proportions and distances different ??
I read the official guide to this topic, where he speaks of dp, its layout etc.
I leave the pictures attached of 3 devices.
You can use google library PercentRelativeLayout with this library you can set width and height of your views by percentage which is great because in all screen they look the same and of course it is not hard to code it. Here example:
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>
also add this line in your build.gradle
dependencies {
compile 'com.android.support:percent:23.2.0'
}
and official documentation by Google https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html
If you have some questions, feel free to ask.
Create three different Layouts Folder in your res folder for all devices and use the dimensions accordingly.
Generic Layout Folders
res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge
After you are done with making your Normal/Medium Layouts follow these steps:
Convert the Normal Dimensions for other Screen Sizes.
Copy your Normal Layout xml files in to other Folders.
Change the suffix of the dimensions used according to the folder that you are in
Resize the Image Resources in your drawable folder (Width and Height - Same technique as we used for converting the dimens) and put them in their respective drawable folder (drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xdpi and so on).
Then your Layouts should work on every device with correct positioning.
For converting Values
0.75 - ldpi (small) //mdpi dimens *0.75
1.0 - mdpi (normal) //First create these dimensions
1.5 - hdpi (large) //mdpi dimens *1.5
2.0 - xhdpi (xLarge) //mdpi dimens *2.0
For Example
android:layout_width="66dip" //in normal
android:layout_width="100dip"//in large 66*1.5=100(approx)
android:layout_width="52dip" //in small 66*0.75=52(approx)
Also new Qualifier has been introduced
- SmallestWidth
- AvailableScreenWidth
- AvailableScreenHeight
read more about it here https://developer.android.com/guide/practices/screens_support.html
I hope this helps.
I'm quiet a fresh starter with android and I'm trying to have a screen filled with 4 buttons below each other, I've made 3 different layout folders layout_normal, layout_large and layout_xlarge. for normal I've set width and height both to 120dp and for xlarge I've set them to 170dp both, resulting in a square shaped buttons. I've tested it on my LG-E975 and it was fine, I've teste on Samsung Galaxy tab 10.0 and it was also fine but then I've created some emulators for other devices to test and it was messed up, the fourth button is not in the screen, emulator only shows 3 buttons.
Emulator info:
target: Android 4.2.2
Skin: 320 x 480
hw.lcd.density: 160
Both my LG and emulator are considered Normal screen size as I checked.
I know there are alot of articles about this matter but I'd be thankful if someone explain it to me in an easy way to understand. Should drop using fixed sizes for my buttons?
EDIT: here is my xml for layout-normal
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.kaw.mp2.MainActivity"
android:background="#color/background_all" >
<Button
android:id="#+id/btn_main_aboutus"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_aboutus_text"
android:layout_centerHorizontal="true"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_contactus"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_contactus_text"
android:layout_below="#id/btn_main_aboutus"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_products"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_products_text"
android:layout_below="#id/btn_main_contactus"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
<Button
android:id="#+id/btn_main_news"
android:layout_width="120dp"
android:layout_height="120dp"
android:text="#string/btn_news_text"
android:layout_below="#id/btn_main_products"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:background="#color/background_btn"
android:textColor="#color/text_color_btn" />
</RelativeLayout>
I assume you want 4 buttons in a vertical row (horizontally centered). If I understood this correctly you should be using a LinearLayout, with which you can specify weight on the different components. Think of it as priority. If the buttons all have the same weight, they will all scale to fit the screen.
Change the RelativeLayout to a LinearLayout and add the property:
android:orientation="vertical"
The buttons should all have the same height, and
android:layout_centerHorizontal="true"
You can remove
android:layout_below="#id/btn_main_aboutus
Then add your margins and preferences as you wish.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
i have five buttons at the bottom of the screen in table layout in android.
i want to display all this buttons same (height should be look proper)in all the screen of android, the following is code in xml file for footer, but the problem is buttons height looks stretched in htc one and samsung s4. how to solve this issue.
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:background="#3F689C"
android:weightSum="5" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_home"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home" />
<Button
android:id="#+id/btn_contact_us"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/contact_us_1" />
<Button
android:id="#+id/btn_about_us"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/about_us_1" />
<Button
android:id="#+id/btn_notification"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/notification" />
<Button
android:id="#+id/btn_setting"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/setting" />
</TableRow>
</TableLayout>
Try this. You need to put the layout as a child of Relative Layout.
<?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:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/menu_layout" >
<android.support.v4.view.PagerTabStrip
android:id="#+id/interactive_title_tabs"
style="#style/PagerTitleStrip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#id/menu_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey_menu_backgroud"
android:orientation="horizontal" >
<Button
android:id="#+id/send_data_menu_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/custom_menu_button"
android:text="#string/send_data" />
<Button
android:id="#+id/sync_menu_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/custom_menu_button"
android:text="#string/check_for_cmd" />
<Button
android:id="#+id/apps_menu_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/custom_menu_button"
android:text="#string/app_store" />
</LinearLayout>
</RelativeLayout>
Use 9-patch images, so you can adjust the only areas of image which will be stretched or not.
Take a look at here for further information.
http://developer.android.com/tools/help/draw9patch.html
I think what you need is to create buttons to support multiple screen sizes.
Please go through this link which gives you enough information.
Normally android device screen is divided into four categories.
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
So if you want to design your app to support to all these screen sizes then you need four separate layout files.
That is
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
you can provide different width and height for different screens.
The appropriate layout will be selected automatically by android system.
Hope it helps.
I created a layout with the prebased (480x800) density. I have been using this since I started learning android (9 mths) and now it was time to test my app on other phones. I tested it on three phones with 480x800 resolution and was fine, until I tested it on one with 320x480 and 240x320. I have used px-s as width and height, paddingTop etc. everywhere.
I checked the app in the emulator (created different avd-s for different resolutions) and I cannot see the whole layout, as it is bigger than the screen (testing it only in eclipse). It has 4 images with "wrap_content" width and height settings.
So I checked the android documentation. I have not created other layouts or anything else, but replaced the px-s with dp-s. It is the same.
I created smaller buttons (see below) with 190x60px resolution and put them into the ldpi folder, but there was no big advance. Maybe because the textsizes of the textviews are the same and the 2 textviews takes 1/3 of the place of the display in case of the 240x320 resolution (while only 1/6 in case of the 480x800). (So the texts look huge in the small resolution compared to the large resolution)
Please tell me what should I do to make the layout look in this 320x480 resolution like in the 480x800.
Size of gradientbg: this is an .xml file for a shape, so no physical size.
Size of buttons (images): 380x150px hdpi (or 190x60px in ldpi folder)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/gradientbg"
>
<TextView
android:id="#+id/TextView00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#E30000"
android:textColor="#FFFFFF"
android:gravity="center_horizontal|center_vertical"
android:textSize="26dp"
android:height="40dp"
android:textStyle="bold"
android:text="Main menu"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:textSize="30dp"
android:textStyle="bold"
android:paddingTop="20dp"
android:layout_gravity="center_horizontal"
android:textColor="#FFB300"
/>
<Button android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
/>
<Button android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_2"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_3"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_4"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
</LinearLayout>
When you normally define layouts in dp units, you ensure that the layout stays the same on devices in the same density bucket. But when you try it on a tablet (xlarge) or a small screen, it won't scale right. This tool is made to have your app work with the whole range of devices (small/normal/large/xlarge). It scales your layout xml-files from the baseline density you were originally designing for.
http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html