CODEWITHSUNDEEP
android
Craig Nordquist
Craig Nordquist

Reputation: 73

How to ensure that layout looks the same no matter what the screen size is

What is the proper way to ensure that the screens look similar in mdpi, hdpi, xdpi, xxdpi.

I know that I am supposed to use "dp", and use asset studio for images but when I run my app on the emulator for a hdpi it still looks like shit.

I have researched a bit and found that I am supposed to make multiple layout folders? layout-small, layout-large, ect.

Also, I have found that I can make different dimension folders.

Here is some code from one of my activities:

<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.nordquistproductions.getcrazy_sociables.MainActivity"
android:background="@drawable/background"
android:onClick="onButtonClick">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/AppName"
    android:layout_centerHorizontal="true"
    android:textColor="#000000"
    android:textStyle="bold|italic"
    android:textSize="65sp"
    android:layout_marginTop="10dp"
    android:id="@+id/textView" />

<Button
    android:id="@+id/playbutton"

    android:text="✓"
    android:textColor="#000011"
    android:textSize="40sp"

    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/buttonshape"
    android:shadowColor="#000011"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="5"
    android:clickable="true"
    android:onClick="onButtonClick"
    android:layout_above="@+id/otherappsbutton"
    android:layout_centerHorizontal="true" />

<Button

    android:id="@+id/otherappsbutton"
    android:text="Other\nDrinking\nApps"
    android:textColor="#000011"
    android:textSize="12sp"

    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/buttonshape"
    android:shadowColor="#ffffff"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="5"
    android:clickable="true"
    android:onClick="onButtonClick"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sociables"
    android:textColor="#000000"
    android:textStyle="bold|italic"
    android:textSize="55sp"
    android:id="@+id/sociables"
    android:layout_below="@+id/textView"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="Play"
    android:id="@+id/Playtext"
    android:layout_below="@+id/playbutton"
    android:layout_centerHorizontal="true" />

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleType="centerInside"
    android:id="@+id/imageView2"
    android:background="@drawable/penguinicon"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

Which is the correct technique?

Thanks for your help

Upvotes: 1

Views: 90

Answers (3)

Arshad
Arshad

Reputation: 1260

Here is a git library for android, which provides auto scalable dimensions You can use it for your height and width of widgets which will auto resize the widgets/layouts based on the screen size

https://github.com/intuit/sdp

Upvotes: 1

Isaac Urbina
Isaac Urbina

Reputation: 1313

What you want to achieve is achievable with the following tags

android:layout_width="match_parent"
android:layout_height="match_parent"

If still with that you cannot see the screen always using the whole size of the screen 

android:fillViewport="true"

If you could provide screenshots of what exactly you want to achieve we could help you more. Kind regards!

Upvotes: 0

Stampede10343
Stampede10343

Reputation: 854

Check out Support Different Screen Sizes

Define looking like shit? Are your drawables pixalated? Views to big? You can do a lot with RelativeLayout and wrap_content when you can use them. I've found that This is a good utility to generate drawables and different assets so that they look good on different displays and densities.

Upvotes: 0

Related Questions