CODEWITHSUNDEEP
androidandroid-layout
Peleg Oren
Peleg Oren

Reputation: 17

Android app layout looks bad with hardcoded values

Playing around with a new app layout here. here's what I want it to look like (it looks like this in android studio):

I want to make the text look well regardless of device. Right now I'm using hardcoded values but don't know how to do it otherwise. Any resources/ code samples would be great.

here's my current code:

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="@+id/awesomelayout">

<ImageView
    android:id="@+id/iconimg"
    android:src="@drawable/ic_launcher"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />


<TextView android:text="Phone Optimizer" android:layout_width="wrap_content" android:layout_centerHorizontal="true"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:layout_alignParentTop="true"
    android:textSize="25dp" />





<ImageView
    android:id="@+id/safe"
    android:src="@drawable/sec"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:layout_below="@+id/lazyswipe"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="42dp" />
/>


<Button
    android:layout_width="100dp"
    android:layout_height="50dp"

    android:text="Scan Now"
    android:id="@+id/SecButton"
    android:onClick="secBtn"

    android:layout_gravity="right"
    android:layout_alignBottom="@+id/safe"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView android:text="360 Security" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/smltitle"
    android:textSize="30dp"


    android:layout_alignTop="@+id/safe"
    android:layout_toRightOf="@+id/safe"
    android:layout_toEndOf="@+id/safe" />

<TextView
    android:text="Scan for Viruses" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/smldsc"
    android:textSize="23dp"


    android:layout_below="@+id/smltitle"
    android:layout_alignLeft="@+id/smllazydsc"
    android:layout_alignStart="@+id/smllazydsc" />









<ImageView
    android:id="@+id/lazyswipe"
    android:src="@drawable/lz"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />
/>


<Button
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:text="Update Now"
    android:id="@+id/lazyBtn"
    android:onClick="lazyBtn"
    android:layout_gravity="right"
    android:layout_alignBottom="@+id/lazyswipe"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView android:text="LazySwipe" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/smllazytitle"
    android:textSize="30dp"
    android:layout_alignTop="@+id/lazyswipe"
    android:layout_alignRight="@+id/smltitle"
    android:layout_alignEnd="@+id/smltitle" />

<TextView
    android:text="Make phone 30% faster" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/smllazydsc"
    android:textSize="23dp"

    android:layout_below="@+id/smllazytitle"
    android:layout_alignLeft="@+id/smllazytitle"
    android:layout_alignStart="@+id/smllazytitle" />


<ImageView
    android:id="@+id/apus"
    android:src="@drawable/apus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:layout_below="@+id/iconimg"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />
/>


<Button
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:text="Speed Now"
    android:id="@+id/apusButton"
    android:onClick="apusBtn"
    android:layout_gravity="right"
    android:layout_alignBottom="@+id/apus"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView android:text="Apus Booster" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/apusTitle"
    android:textSize="30dp"
    android:layout_alignTop="@+id/apus"
    android:layout_alignLeft="@+id/apusdesc"
    android:layout_alignStart="@+id/apusdesc" />

<TextView
    android:text="Make phone 30% faster" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/apusdesc"
    android:textSize="23dp"

    android:layout_below="@+id/apusTitle"
    android:layout_alignLeft="@+id/smllazytitle"
    android:layout_alignStart="@+id/smllazytitle" />

Please give me any advice you have and I'll fix it :)

Upvotes: 1

Views: 2281

Answers (4)

Peleg Oren
Peleg Oren

Reputation: 17

Ok, so I fixed it myself, I'm sure I'm still using bad coding practices, but the layout looks good on the emulator and my own device. yay.!

Here's the code:

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:auto="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:id="@+id/awesomelayout">

    <ImageView
        android:id="@+id/iconimg"
        android:src="@drawable/ic_launcher"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />


    <TextView android:text="Phone Optimizer" android:layout_width="wrap_content" android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:id="@+id/title"
        android:layout_alignParentTop="true"
        android:textSize="25dp" />







    <ImageView
        android:id="@+id/apus"
        android:src="@drawable/apus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_below="@+id/iconimg"
        android:layout_marginTop="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />





    <TextView android:text="Apus Booster" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/apusTitle"
        android:textSize="30dp"
        android:layout_alignTop="@+id/apus"
        android:layout_alignLeft="@+id/apusdesc"
        android:layout_alignStart="@+id/apusdesc" />

    <TextView
        android:text="Make phone 30% faster" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/apusdesc"
        android:textSize="23dp"

        android:layout_below="@+id/apusTitle"
        android:layout_alignLeft="@+id/smllazytitle"
        android:layout_alignStart="@+id/smllazytitle" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Speed Now"
        android:id="@+id/apusButton"
        android:onClick="apusBtn"
        android:layout_gravity="right"
        android:layout_below="@+id/apusdesc"
        android:layout_alignParentRight="true"
         />







    <ImageView
        android:id="@+id/lazyswipe"
        android:src="@drawable/lz"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:layout_below="@+id/apus" />



    <TextView android:text="LazySwipe" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/smllazytitle"
        android:textSize="30dp"
        android:layout_alignTop="@+id/lazyswipe"
        android:layout_alignRight="@+id/smltitle"
        android:layout_alignEnd="@+id/smltitle" />

    <TextView
        android:text="Make phone 30% faster" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/smllazydsc"
        android:textSize="23dp"

        android:layout_below="@+id/smllazytitle"
        android:layout_alignLeft="@+id/smllazytitle"
        android:layout_alignStart="@+id/smllazytitle" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Update Now"
        android:id="@+id/lazyBtn"
        android:onClick="lazyBtn"
        android:layout_gravity="right"
        android:layout_below="@+id/smllazydsc"
        android:layout_alignParentRight="true"
         />




    <ImageView
        android:id="@+id/safe"
        android:src="@drawable/sec"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_below="@+id/lazyswipe"
        android:layout_marginTop="80dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
         />

    <TextView android:text="360 Security" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/smltitle"
        android:textSize="30dp"
        android:layout_alignTop="@+id/safe"
        android:layout_toRightOf="@+id/safe"
        android:layout_toEndOf="@+id/safe" />

    <TextView
        android:text="Scan for Viruses" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/secdesc"
        android:layout_below="@+id/smltitle"
        android:layout_alignLeft="@+id/smllazydsc"
        android:layout_alignStart="@+id/smllazydsc" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Scan Now"
        android:id="@+id/SecButton"
        android:onClick="secBtn"
        android:layout_below="@+id/secdesc"
        android:layout_gravity="right"
        android:layout_alignParentRight="true"
         />




</RelativeLayout>
</ScrollView>

Upvotes: 0

Klitos G.
Klitos G.

Reputation: 836

First of all I cannot see any image. is it uploaded?

What you are asking is a difficult question to answer and you have to make a lot of steps and tests to succeed As mentioned in another answer you can use dimens.xml for different devices. Also make sure that for your text size you use sp instead of dp. It takes into account the user preferences and theme on the device. All these are good but I would not start there.

Get rid of all your hardcoded values, use wrap_content and match_parent for views sizes and replace the text sizes with styles (Small, Medium, Large) like below

<TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/TextAppearance.DeviceDefault.Medium"
            android:text="@string/yourTextIdInStringsXml"
            android:layout_marginTop="5dip"
            android:layout_marginBottom="2dip"/>

As you can see I use hardcoded values only for small margins, that will probably will not cause any issue. You also have a Button with hardcoded size. Use wrap_content or match_parent and if you need to pair it with something else that needs to be bigger or smaller use nested LinearLayouts and the layout_weight attribute.

And Good Luck!!!

Upvotes: 0

user2604179
user2604179

Reputation:

Provide different sizes for different screen sizes in values > dimens.xml

enter image description here

Then set dimens instead of hard codes, for example: set android:layout_width="@dimens/btn_size" instead of android:layout_width="100dp"

You can do this for text sizes and so on.

You can also use nested layouts or wrap_content and match_parent to make your layout look good on every device.

Upvotes: 2

Kristiyan Varbanov
Kristiyan Varbanov

Reputation: 2509

Good practise is to move your hard code values into values->strings.xml and get string from there like this -> android:text="@string/yourStringVariableName"

Upvotes: 1

Related Questions