I added support screen for different sizes for the devices but when i test it it seems that the buttons are a bit up,not like in the preview(I have the same phone as the preview).
Here's the layout for my phone specs:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#drawable/backgroundapp"
android:orientation="vertical">
<ImageButton
android:id="#+id/btnSwitch"
android:layout_width="110dp"
android:layout_height="120dp"
android:src="#drawable/poweroffline"
android:background="#null"
android:contentDescription="#null"
android:layout_marginTop="64dp"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:clickable="false" />
<ImageButton
android:id="#+id/FlashBlinkButton"
android:layout_width="75dp"
android:layout_height="100dp"
android:src="#drawable/blinkoffline"
android:background="#null"
android:contentDescription="#null"
android:scaleType="fitCenter"
android:layout_below="#+id/btnSwitch"
android:layout_alignLeft="#+id/AlarmButton"
android:layout_alignStart="#+id/AlarmButton"
android:layout_marginTop="12dp" />
<ImageButton
android:layout_width="75dp"
android:layout_height="60dp"
android:id="#+id/AlarmButton"
android:src="#drawable/alarmoffline"
android:background="#null"
android:contentDescription="#null"
android:scaleType="fitXY"
android:layout_marginTop="19dp"
android:layout_below="#+id/FlashBlinkButton"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I also have another device where it's like the other one a bit up even when i put the configuration qualifiers .
You will never achieve a fool-proof layout with this techique. Try adding the background of the button (the embossed circles) to the ImageButtons instead, they will move together with the buttons and nothing will be off-center.
Related
I have seen a few similar questions, but they want the things to show up, I want to hide them.
Basically I have a bunch of elements in my RelativeLayout and when the activity shows, the keyboard pops up, since I have an editText, and the elements that are aligned in the Bottom go up along the keyboard, I don't want that, I want them to stay hidden, any idea how can I achieve this?
This is the xml of my Activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#drawable/bg"
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"
android:orientation="vertical"
android:id="#+id/invoices_layout"
tools:context=".NavManager">
<RelativeLayout
android:id="#+id/mcr_bar_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="visible">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="15dp"
android:text="Agregar Productos"
android:textColor="#android:color/white"
android:textSize="34sp" />
<TextView
android:id="#+id/textGrid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:text="Grupo MkTech Solutions"
android:textColor="#android:color/white"
android:textSize="15sp" />
<EditText
android:id="#+id/txtproducto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="0dp"
android:layout_marginTop="92dp"
android:layout_marginEnd="0dp"
android:hint="Ej: Refresco Natural"
android:inputType="text"
android:textColor="#color/white"
android:textSize="15sp"
app:backgroundTint="#color/white" />
<ImageButton
android:id="#+id/btnbuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/txtproducto"
android:layout_alignEnd="#+id/txtproducto"
android:layout_marginTop="4dp"
android:layout_marginEnd="0dp"
android:onClick="onClickSwitch"
app:srcCompat="#drawable/research" />
<TextView
android:id="#+id/txttotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="10dp"
android:textColor="#color/WhiteBgText"
android:textSize="15sp" />
<ImageButton
android:id="#+id/btnlimpiarcarro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="onClickCleanCart"
android:padding="10dp"
app:srcCompat="#drawable/quit" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="150dp"
android:layout_marginBottom="50dp"
android:fillViewport="true">
<TableLayout
android:id="#+id/tableInvoices"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:stretchColumns="*"></TableLayout>
</ScrollView>
</RelativeLayout>
</LinearLayout>
The last two elements before the scrollview are the ones that need to stay hidden.
add the following to your activity in the manifest:
android:windowSoftInputMode="adjustPan"
from the API:
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
By my understanding of your question you do not want the keyboard to push the UI elements at the bottom of your layout.
To achieve this all you need to do is put the following line into your manifest activity tag:
android:windowSoftInputMode="adjustNothing"
I have just done some image editing of my application so now i want to make it fit for every device by scaling them into different sizes.
I have found a site where i put an image then it scales it to different screen densities so when i put in into my project it does not adapt to the screen.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#drawable/backgroundapp"
android:orientation="vertical">
<ImageButton
android:id="#+id/btnSwitch"
android:layout_width="105dp"
android:layout_height="105dp"
android:src="#drawable/poweroffline"
android:background="#null"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="65dp" />
<ImageButton
android:id="#+id/FlashBlinkButton"
android:layout_width="75dp"
android:layout_height="75dp"
android:src="#drawable/blinkoffline"
android:background="#null"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/btnSwitch"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"/>
<ImageButton
android:layout_width="65dp"
android:layout_height="70dp"
android:id="#+id/AlarmButton"
android:src="#drawable/alarmoffline"
android:background="#null"
android:layout_centerHorizontal="true"
android:layout_below="#id/FlashBlinkButton"
android:layout_marginTop="30dp"/>
</RelativeLayout>
EDIT: It automatically goes for the mdpi folder.
You can try set android:scaleType
For example :
<ImageButton
android:id="#+id/FlashBlinkButton"
android:layout_width="75dp"
android:layout_height="75dp"
android:src="#drawable/blinkoffline"
android:background="#null"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/btnSwitch"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:scaleType="fitXY" />
You can see different variations in this docs
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I have to turn my Unit Converter App into fragments and have it working. Everything compiles so I am able to run it in the virtual machine. The only problem is that all of the xml visuals are stacked on top of each other. I will provide code and a picture of what it looks like in my virtual machine. Please help me fix my issue so that they are not stacked on top of each other.
content_unit_converter.xml
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"/>
</RelativeLayout>
fragment_unit_converter.xml
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/TemperatureEditText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/radioGroup">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From Celsius to Farenheit"
android:id="#+id/toFarenheitRadioButton"
android:checked="true" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From Farenheit to Celsius"
android:id="#+id/toCelsiusRadioButton"
android:checked="false" />
</RadioGroup>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:id="#+id/convertButton"
android:layout_below="#+id/radioGroup"
android:layout_centerHorizontal="true"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:spinnerMode="dropdown"
android:layout_below="#+id/LengthEditText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignRight="#+id/LengthEditText"
android:layout_alignEnd="#+id/LengthEditText"
android:entries ="#array/length"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CONVERT"
android:id="#+id/convertLength"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_below="#+id/AreaEditText"
android:layout_centerHorizontal="true"
android:entries ="#array/area"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:id="#+id/convertArea"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
fragment_unit_converter_display.xml
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.plamen.unitconverter.UnitConverterActivity"
tools:showIn="#layout/activity_unit_converter">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/TemperatureEditText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:hint="Enter Temperature" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/LengthEditText"
android:hint="Enter Length"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/AreaEditText"
android:layout_below="#+id/convertLength"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:hint="Enter Area" />
</RelativeLayout>
This is what it looks like when I run it in the Virtual Machine
This is what it looks like after I tried android: layout_below
It is also duplicated which I do not know why.
In general, whenever you use relative layout you must specify where things go. In Linear layout adding a new thing places it below/next to the previous element (depending on your orientation), but in Relative layout this doesn't happen.
So you have this:
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"
/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"
/>
In here you're just displaying 2 fragments but without saying where which one goes first.
You could add this line, or a similar:
android:layout_below="#id/unitconverterfragment"
So now you'll have this:
<fragment
android:id="#+id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterFragment"
/>
<fragment
android:id="#+id/unitcoverterdisplay"
android:layout_below="#id/unitconverterfragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.plamen.unitconverter.UnitConverterDisplay"
/>
You can place it below, to the right, left, on top, etc...
I am tying to create a UI like the image below.
This is how it SHOULD look like: (Screen shot from my app using Nexsus 5):
And this is how it look like on a Nexsus S device (4 inch):
Someone have an idea why the diffrences happen? This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2e2e2e"
tools:context=".MainActivity"
android:id="#+id/viewew">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="9"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginBottom="0dp"
android:layout_weight="8"
android:gravity="center_vertical"
>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/www"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
</LinearLayout>
<View
android:id="#+id/idd"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_alignParentBottom="true"
android:layout_weight="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text="Doesn't belong here?"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<include layout="#layout/buttons" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text=" here?"
android:paddingBottom="15dp"
android:layout_alignParentBottom="true"
android:textColor="#f7f7f7"
android:id="#+id/tDoesntBelongHere"
/>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rotation_degrees="15.5"
android:layout_above="#+id/eee"
tools:context=".MyActivity" />
</RelativeLayout>
On android studio you have to set the screen size for different devices.
your buttons have this:
android:layout_width="90dp"
android:layout_height="90dp"
So whichever screen you are using the size will always be 90dp.
In android studio you can create more xml pages for same page: one for portrait, for landscape, ecc ecc and also one for small-big-xxl ecc screen.
Have a look at this link from android developer site.
Hope it help :)
EDIT:
At the moment i don't have Android studio in the pc i'm working on, so i try to explain a possible solution.
Instead of setting height and width, set margins:
You can anchor all from botside, adding in your TextView android:layout_alignParentBottom="true" (and a margin-bottom if you want). Then keep your view with a static height of 400dp like now, then anchor it to the top of the TextView by android:layout_above="#id/TextViewId (it doesn't have id, add it)
Now you have to do the same with your LinearLayout: use android:layout_above="#id/idd and removing the the static size. At this point you can just let your buttons to set height equals to the LinearLayout's height (obiouvsly you can set margin top-bot in buttons).
Sorry if my english is not that good, i hope u got the solution
I am adding a ScrollView and several TextView together. I am populating data using a web service (php/mysql data from server). Everything is fine except one issue. When user scrolls the page/activity, the scroll is not as smooth as a listview.
I am posting my xml here:
<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="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:focusable="true"
android:id="#+id/scrolFullText"
tools:context=".FullText" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/HEAD"
android:text="#string/HEAD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#color/blue"
/>
<TextView
android:id="#+id/WRITER"
android:text="#string/WRITER"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/darkgreen"
/>
<TextView
android:id="#+id/CATEGORY"
android:text="#string/CATEGORY"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="6dp"
/>
<TextView
android:id="#+id/TEXT"
android:text="#string/TEXT"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="6dp"
/>
</LinearLayout>
</ScrollView>
How can I make my scroll a little smoother?
The scroll may be not smooth because some background job is being processed, you may test your app on multiple devices.
By the way I guess the ScrollView height should be match_parent