How can I enlarge my activity when it is running on bigger screen? I have tried android:scaleType="fitXY" for my imageview but it doesn't work. I have tried plenty of code i researched but none of them work. When I run it on Samsung galaxy S2, it work perfectly. But when I tried it on galaxy note or galaxy S2, the UI is totally different. All imageview are small.
Here's the UI for S2:
Here's the UI for note and S3:
Here's the xml:
<?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="#drawable/background"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imageDesc"
android:src="#drawable/welcome" />
<Button
android:id="#+id/btnFinance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="240dp"
android:background="#drawable/btn_finance" />
<Button
android:id="#+id/btnHowtouse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="305dp"
android:background="#drawable/btn_howto" />
<Button
android:id="#+id/btnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="370dp"
android:background="#drawable/btn_settings" />
<Button
android:id="#+id/btnAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="435dp"
android:background="#drawable/btn_about" />
</RelativeLayout>
You can make different images and layouts for each resolution.
Use folders for the different image resolution like drawable-hdpi and drawable-xhdpi
I suggest to read here for more details: Supporting Multiple Screens
Related
I defined this 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">
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
<ImageView
android:id="#+id/ivData1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/ivSmartphone"
android:layout_centerHorizontal="true"
android:layout_marginTop="90dp"
android:src="#drawable/intro_data_1" />
<ImageView
android:id="#+id/ivData2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_2" />
<ImageView
android:id="#+id/ivData3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_3" />
<ImageView
android:id="#+id/ivData4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_4" />
</RelativeLayout>
It should looks like this one according to the android studio preview window:
On a Nexus5X it looks exactly like this, but on a Nexus5 i get
I thought Nexus5X and Nexus5 have the same density and take the images from the same xxhdpi directory? So what's missing?
Thanks in advance.
The size of the Nexus 5 is 360x640dp while the one of the Nexus 5X is 411x731dp while having the same density.
So when you define you layout like this
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
you're using the same image for every screen width without scaling. Instead you need to make sure to fit your images to the screen width.
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:scaleType="fitCentered"
android:src="#drawable/intro_smartphone_data" />
fitCentered might also upscale the image. If you're fine with a bigger spacing consider using centerInside instead.
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
I am a hobbiest app developer and I feel I have a good grasp on android basics but the main thing that I struggle at is app design. I understand how to develop for different screen sizes and densities. But the main thing I struggle at is each of the normal and other sizes cover such a range of sizes within their respective categories. I have been searching and searching and not been bale to find a solution.
The main issue I am having is when designing using eclipse, i make a design using nexus one at the design looks perfect for what I want when I swap to a smaller screen like 3.2 HVGA or even the nexus galaxy which are all normal sized images, the location of my images have moved. So what looked perfect for the nexus one looks awful on some other normal screen sizes.
What can be done to ensure if an image is directly next to another that it stays that way on a different screens. I will give an example of the current design I am working on and I hope somebody can explain what im doing wrong/how i can improve.
Nexus One Design:
3.2 HVGA:
the xml generated:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:orientation="vertical" >
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/i1"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/i2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/Button1"
android:layout_alignTop="#+id/Button1"
android:layout_marginLeft="106dp"
android:layout_marginTop="160dp"
android:background="#drawable/i3" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignRight="#+id/Button1"
android:layout_marginRight="112dp"
android:background="#drawable/i4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button3"
android:layout_alignLeft="#+id/button3"
android:background="#drawable/i5" />
</RelativeLayout>
Try adding another layout for side buttons to group them together, and then center that layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/i1"
android:text="Button" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="false"
android:layout_alignParentTop="true"
android:background="#drawable/i2"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i3"
android:layout_below="#+id/button1"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i4"
android:layout_below="#+id/button4"
android:layout_toRightOf="#+id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/i5"
android:layout_toRightOf="#+id/button2"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</RelativeLayout>
You need to create different images for each of the screen resolutions and put them into the respective drawable folder drawable--hdpi, drawable-mdpi, drawable-xhdpi, etc. Also be sure that you are using dp in your xml file, which it appears you are. Just be sure you always do so.
Designing for the different screens can be tricky because you have to essentially create the same image 4 or 5 times.
Also, make sure you are testing on actual handsets, because the emulator doesn't always give you an accurate layout.
Using the help of http://www.learn2crack.com/2014/06/android-sliding-navigation-drawer-example.html
I managed to get my navigation drawer working. I have also added a header to my Drawer. In my header, I have a Imageview, two TextView
The data is showing up properly, but for some reason the UI is different in each phone. The image is getting cut or the background image is showing up big.
Here is the screen shot of Galaxy Nexus and Nexus 5 I have tested:
Nexus 5
Galaxy Nexus
Here is the header XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayoutforImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".30"
android:padding="10dp" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/profilepic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutforText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight=".70"
android:orientation="vertical" >
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="Joe David"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="JoeDavidJoeDavi#joedavidjoedavid.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Can somebody help me fix this issue?
Thanks!
Update
As per advice from #Rohan Pawar and #westito I change the layout to relative The ImageView is not getting cut and text is coming out properly, but the background image is still a difference in Galaxy Nexus and Nexus 5. Please see my screenshot below.
Galaxy Nexus
Nexus 5
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:src="#drawable/profilepic" />
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Dushyant Prabhu"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textforprofile"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:text="developer#sybershocknetworks.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</RelativeLayout>
The problem is your layout. Instead of LinearLayouts, try using RelativeLayout. It is more efficient for this layout.
<RelativeLayout>
<ImageView id="#+id/image" />
<TextView layout_toRightOf="#+id/image" />
</RelativeLayout>
This is a "pseudo" sample. You can position your TextView next to ImageView
#TheDevMan i have both devices Nexus 5 and Galaxy nexus, i have tested out your code works on both device perfectly
Samsung Galaxy Nexus = 720 x 1280 pixels, 4.65 inches (~316 ppi pixel density)
LG Nexus 5= 1080 x 1920 pixels, 4.95 inches (~445 ppi pixel density)
but i dont have your background image to test
try this for your header & customize it as you want it will work for sure
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="12dp"
android:layout_marginBottom="7dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/image_header"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginTop="4dp"
android:background="#drawable/placeholder"
android:scaleType="fitXY" />
<TextView
android:id="#+id/nav_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="18dp"
android:text="Krunal Patel"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffff"
android:textSize="19dp" />
</LinearLayout>
</LinearLayout>
I have implemented layout folder from layout-small to layout-xlarge.
but for nexus one and nexus s play pause buttons are get arranged automatically and look differently and for galaxy nexus and samsung s3 buttons are get arranged differently But both are using same xml that default normal.. small and large and xlarge are working fine.
anybody knows how can i arrange item so it look same on both device...
I want it to look like this
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="#drawable/play_background"
android:orientation="vertical" >
<ImageView
android:id="#+id/ff"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="#drawable/test_play_image" />
<TextView
android:id="#+id/metadata"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/ff"
android:gravity="center"
android:text="WUMM - D Light "
android:textColor="#android:color/white"
android:textSize="18dp" />
<Button
android:id="#+id/like"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="default Like" />
<Button
android:id="#+id/play"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/metadata"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:background="#drawable/ch_play" />
<Button
android:id="#+id/back"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/play"
android:layout_alignBottom="#+id/play"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play"
android:background="#drawable/back" />
<Button
android:id="#+id/forward"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/play"
android:layout_alignBottom="#+id/play"
android:layout_marginLeft="40dp"
android:layout_toRightOf="#+id/play"
android:background="#drawable/forward" />
</RelativeLayout>
BUT IY LOOKs LIKE THIS on NEXUS ONE and S
Here is nexus one image
and here is galaxy nexus screen shot
First you go through this tutorial, Here, you can learn multiple screen sizes or resoultion support
Screen Support
Screen Size Support
Designing Images, Icon For Multiple Screen