2

This seems like a very basic question but I can't seem to figure it out. I have done quite a bit of reading on how to make android scalable to big and small screens.

I have an app that is designed for a tablet and works great on there. However, while I am working on the mobile(phone) version I want to ensure it will at least look "ok" if someone opens it on a phone.

Everyone scales great besides the buttons.... I just can't seem to get the buttons to scale.

They look great on the Tab...but on the phone, they take up the whole screen.

Thank you for the help.

Here is the code:

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_landscape"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_menu_plus_landscape"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="38dp"
        android:layout_marginTop="200dp"
        android:background="@layout/button_main_selector"
        android:padding="40dp"
        android:text="@string/main_start_list"
        android:textColor="@color/white"
        android:textSize="30dp"
        android:typeface="sans"/>


    <Button
        android:id="@+id/button_emulator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/adview"
        android:layout_alignLeft="@+id/button_list"
        android:layout_alignRight="@+id/button_list"
        android:layout_marginBottom="168dp"
        android:background="@layout/button_main_selector"
        android:padding="40dp"
        android:text="@string/main_start_emulator"
        android:textColor="@color/white"
        android:textSize="30dp"
        android:typeface="sans" />

</RelativeLayout>

layout/button_main_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Focused-->
    <item   android:state_focused="true"
            android:state_pressed="false"
            android:drawable="@drawable/main_buttons_selected"
            />
<!-- Button Focused Pressed-->
    <item   android:state_focused="true"
            android:state_pressed="true"
             android:drawable="@drawable/main_buttons_selected"
            />
<!-- Button Pressed-->
    <item   android:state_focused="false"
            android:state_pressed="true"
            android:drawable="@drawable/main_buttons_selected"
            />
<!-- Button Default Image-->
    <item   android:drawable="@drawable/main_buttons"/>

</selector>

drawable-hdpi/main_buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#71bbe3"/> 
    <corners
     android:bottomRightRadius="10dp"
     android:bottomLeftRadius="10dp"
      android:topLeftRadius="10dp"
      android:topRightRadius="10dp"/>
</shape>

I have also tried putting my button files into just "drawable" and it does not seem to help. Any suggestions? (NOTE: my buttons are just solid color, no images)

res/drawable/main_buttons.xml

res/drawable/main_buttons_selected.xml

res/drawable/button_main_selector.xml
AlexIIP
  • 2,461
  • 5
  • 29
  • 44
  • do you have different sizes for your button backgrounds? – omi0301 Oct 15 '12 at 05:07
  • I only use a solid color, no images. – AlexIIP Oct 15 '12 at 05:29
  • hi, can u please give your complete design for this file so that i can trace what is wrong? as this is relative layout and @+id/adview does't exists in code provided by u. – Chanchal Shelar Oct 15 '12 at 05:46
  • I am sorry, its just another small view sitting on the very bottom of the page. Its irrelevant to the problem, so I did not want to clutter my question. You can remove layout_above and say layout_alightParentBottom = "true". I am not so concerned with the position as with the scaling issue. – AlexIIP Oct 15 '12 at 05:50

4 Answers4

0

You can refer:

Android: Button image drawable scalable for other screen sizes?

http://www.pixate.com/blog/2012/06/30/android/

http://www.netmagazine.com/tutorials/user-interface-design-android-apps

Community
  • 1
  • 1
kittu88
  • 2,451
  • 5
  • 40
  • 80
0

With the informations you had given I predict the problem is,You had only given the button in Hdpi. So when you run the app in a phone the buttons are taken from the hdpi which make the looks in phone weird. This can be solved by just giving the button in drawable or ldpi. It will fit the Phone screen.This may be your problem.

Sreedev
  • 6,563
  • 5
  • 43
  • 66
  • What exactly should I put into drawable, the selector? I tried that in that prevents me from inflating the buttons? Or if I put main_button and main_button_selected into drawable, nothing changes...and they are just solid color. – AlexIIP Oct 15 '12 at 05:38
0

you just need to put your both xml in drawable

by creating a folder named drawable in res of project

res/drawable/main_buttons.xml

res/drawable/button_main_selector.xml
raghav chopra
  • 827
  • 3
  • 9
  • 25
  • If I put the button_main_selector from layout to drawable my buttons fail to load. And when I put other two: main_buttons and main_buttons_selected into drawable... nothing changes. – AlexIIP Oct 15 '12 at 05:25
0

i have seen your code,first of all i will tell you,you should post image that what kind of view you want to have,secound thig is that you have given

android:layout_marginRight="38dp"

android:layout_marginTop="200dp"

in your first button code, & in your secound button u have given margin like this

android:layout_marginBottom="168dp"

and every thing else is depends on layout that what kind of design you want to implement.

my suggestion to you is never give margin specially from left aur right direction.because for example if you give margin from left to 50px than it looks ok in normal device,while not look well in high resolution devices beacuse it will take 50px in any resolution device.instead of margin use this kind of syntax android:alignParentLeft=true and always have a habit of using such kind of syntax inside ur relative layout.with ssuch syntaxes your elements will be always at the position in which you get desired..goto the android developer site and check what is a difference between linear and relative layout and what is different properties of linear and relative layout study all properties like a meaning of fill_parent,wrap_content & match_parent than 100% you will get solution.if you have any query than join with me here https://chat.stackoverflow.com/rooms/13436/smart-phones-developer you can ask me your issue here.and i will suggest you to post your image

Thanks Aamirkhan I.

Community
  • 1
  • 1
Aamirkhan
  • 5,746
  • 10
  • 47
  • 74
  • Good suggestion. But it does not address my current issue. I will do more reading later as I may have some misunderstandings on the relative layout. But my buttons should scale nonetheless. – AlexIIP Oct 15 '12 at 05:45