I have a problem with the preview design on the Android Studio platform.
I will attach two photos:
Designer: here
My phone: here
The problem is that the preview on the Android Studio doesn't show the exact same thing as my phone.You can definitely see that the description field is not being shown on my phone.
The XML code-snippet is below:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/yoyaku_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/yoyakulogo2" />
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/yoyaku_image"
android:orientation="horizontal">
<TextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Phone number:" />
<TextView
android:id="#+id/actual_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="076767674764764" />
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_layout_1"
android:orientation="horizontal">
<TextView
android:id="#+id/location_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Location:" />
<TextView
android:id="#+id/location_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="74 rue des cascades 75020 Paris " />
</android.support.v7.widget.LinearLayoutCompat>
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/linear_layout_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_layout_2"
android:orientation="horizontal">
<TextView
android:id="#+id/description_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text="Description:" />
<TextView
android:id="#+id/description_view_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_marginTop="8dip"
android:text=" record storespecialized in Electronic Music based in Paris" />
</android.support.v7.widget.LinearLayoutCompat>
</RelativeLayout>
The problem can be solved using a ScrollView,but initially i did not want to use it.
What caused this?
The problem is that preview is just an estimate of what a layout will look like. Android phones come in a wide variety of sizes and the reason you needed to wrap your layout in a ScrollView is that your view content's height is larger than the height of the physical device. Now that's not necessarily a bad thing, but maybe you just don't want a ScrollView. To fix this, You could use something like ConstraintLayout and then setting up the correct constraints would allow you to resize the content to fit everything on any device's screen.
Google puts out a lot of great resources, here's a short training doc they have for ConstraintLayout: https://developer.android.com/training/constraint-layout/
Related
I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this code:
<?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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.
I'm trying to program an activity in android studio that will be, at least, similar in any device. In order to achieve this, I'm already using:
Constraint Layout;
Text size as sp and other sizes as dp;
Same resolution (1920x1080) in my android preview and my physical device.
But, I'm getting a different screen behavior in each screen, as you can see by the pics.
Major differences are:
Text size seems different even using "sp" unit to define it;
Phone have a line break but preview not;
Preview has a much larger blank space when compared to the phone.
What is happening? How could I prevent this behavior and design similar layouts for different phone screens?
xml file
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" >
<LinearLayout
android:background="#color/colorWhite"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="45dp"
android:layout_marginBottom="45dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<TextView
android:id="#+id/templatetv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
android:textColor="#color/colorPrimary"
android:textStyle="bold"
android:textSize="25sp"
android:layout_marginTop="30dp" />
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name: John Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Document number: XXX.XXX.XXX-XX"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Father name: John Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mother name: Eva Sample"
android:textSize="18sp"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/textview5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Birthdate: 01/01/1901"
android:textSize="18sp"
android:layout_marginTop="10dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Android Studio Screen Preview
Phone Screen
Try to remove this part, I think that can be the margin:
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" >
You need to define different layouts for different screens. Also, if you follow material design guidelines most of the problems will not arise. checkout the google material design documentation.
I have an app in relative layout, inside there is:
1) A vertical linear layout having a switch and 2 editText.
2) A horizontal linear layout below the vertical one with 2 buttons.
It is working fine on a galaxy A8 phone but the horizontal linear layout is overlapping on bottom editText on smaller screen phone.
I need some guidance on how to make it responsive without too much code changes as my interface design technique is pretty poor.
Thanks for your help.
I tried to convert it to Constraint-Layout but it makes my user interface worse. The app stopped responding from it.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:animateLayoutChanges="true"
android:clipChildren="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="French to English"
android:textSize="18sp"
android:checked="true"
android:thumbTint="#color/colorPrimary"
android:trackTint="#color/colorAccent" />
<EditText
android:id="#+id/pname"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginTop="15dp"
android:maxLength="100"
android:background="#drawable/rounded_border_edittext"
android:ems="15"
android:gravity="top"
android:hint="Enter your text to translate here..."
android:inputType="textMultiLine"
android:padding="10dp" />
<EditText
android:id="#+id/target"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginTop="30dp"
android:maxLength="100"
android:background="#drawable/rounded_border_edittext1"
android:ems="15"
android:gravity="top"
android:hint="Your translated text will appear here..."
android:inputType="textMultiLine"
android:padding="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:padding="15dp">
<Button
android:id="#+id/btnsave"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/btntranslate"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Translate" />
</LinearLayout>
</RelativeLayout>
try setting the height to 190dp for both EditTexts in the vertical LinearLayout
android:layout_height="190dp"
and also their margingTop value to 15dp
android:layout_marginTop="15dp"
which will fit the minimum screen size of an Android device which is 426x320
I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>
I have tested this app on mobile devices and the layout looks fine but when tested it on a 7 inch tablet the main activity is missing textViews and images,the rest of the activities are fine though.
Could someone show me how to fix this situation as I'm sure its a fairly simple fix.The layout for the activity is shown below.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<LinearLayout
android:id="#+id/llayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="271dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="0.68"
android:src="#drawable/mark3" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="#string/depth_"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/ductDepth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="#string/enter_duct_depth_mm"
android:inputType="numberDecimal"
android:singleLine="true" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="Duct Depth:"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/offDepth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:ems="10"
android:hint="#string/enter_offset_depth_mm"
android:inputType="numberDecimal"
android:singleLine="true" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Length:"
android:textColor="#90f030"
android:textSize="30sp" />
<EditText
android:id="#+id/offLength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="#string/enter_offset_length_mm"
android:inputType="numberDecimal"
android:singleLine="true" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!--
This title strip will display the currently visible page title, as well as the page
titles for adjacent pages.
-->
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
<ImageButton
android:id="#+id/calc"
android:layout_width="200dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/llayout"
android:background="#drawable/calcbttrans" />
</RelativeLayout>
</ScrollView>
what exactly is the problem? the stretched image at the bottom?
if so, it's probably because you've set it to an exact size without allowing it the freedom to keep its aspect ratio. a possible solution is using 9-patch image or an xml drawable, or just keep the aspect ratio of the current image.
btw, the action bar doesn't look well. have you considered using the support library or actionBarSherlock? google already has guidelines about native look and feel (for example here: http://developer.android.com/design/patterns/pure-android.html )
EDIT: it seems the problem is on the layouts .
looks like the viewPager is on top of all the layouts, while the imageButton is beneath the linearLayout, when you scroll all the way to the bottom (not a native android UX, btw).
just check the UI designer and the outline . it clearly shows the problem (i had to replace all images since i don't have them, but this isn't the important thing) :