In the UI for my application I have 5 ImageButton all is ok on the 3.7" screen but if I have a screen of 2.7", 3.0" or other my UI will not scale and it looks bad. It looks like this:
3,7"
2,7"
How do I make all have a nice look on all screens, just like on the screen 3.7"?
Code: main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/two"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:orientation="vertical"
android:scaleType="fitXY" >
<ImageButton
android:id="#+id/ibTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
</LinearLayout>
</RelativeLayout>
Use a RelativeLayout, and then place a LinearLayout with height wrap_content and put the buttons inside that LinearLayout. Also use dp instead of px for sizes.
P.S. If you post the code of your layout, we can help you better.
EDITED: Now that I can see your code I can show you want I meant with my answer:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/two"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:gravity="center"
android:layout_centerInParent="true" >
<ImageButton
android:id="#+id/ibTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
</LinearLayout>
</RelativeLayout>
Can you provide some code?
Maybe try add to in xml
android:scaleType="fitXY"
First make image for all
mdpi,hdpi,ldpi
as per their size.
take Lineatlayout in center for Buttons only.
then set property gravity="Center" ;
Make sure your are using dp insted of using 'px'..Its a common cause.
try this add in each imageview in xml
android:adjustViewBounds="true"
android:scaleType="centerCrop"
Related
The image is covering the textView and buttons(I cant even see them at all so I'm guessing they are behind the image). Image is attached. I want the textview and buttons to appear below the imageview. Below is my xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2" />
</LinearLayout>
You can change the main layout to RelativeLayout, set the ImageView at the top and wrap the views below the ImageView, inside a separate layout.
By setting android:layout_above="#+id/linear" for the ImageView, you will be sure that the ImageView will never cover the other views.
<?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:orientation="vertical">
<ImageView
android:id="#+id/imageView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linear"
android:layout_alignParentTop="true"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:gravity="center_horizontal">
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
</LinearLayout>
</RelativeLayout>
Try changing the parent layout to a RelativeView, or a ConstraintView. If you don't want to redo your positioning of your layout, you can wrap everything except the Image in a LinearLayout.
<RelativeView>
<ImageView>
<LinearLayout>
//...All your stuff
</LinearLayout>
<RelativeView>
This isn't one way of course, try to experiment. Feel free to ask if you still encounter problems.
I need to layout 2 images (longImg and shortImg) horizontally.
The longImg is too long to fit on screen, so really wanting to display a window of it, linked to a SeekBar where the user can scroll the part of the longImg. The container around the longImg must be at a fixed size so the shortImg is not nudged off screen.
What is the best way to do this?
So far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
</RelativeLayout>
It seems OK in Eclipse graphical layout, but when testing on device, I only get the long image.
How do you force the smallImg to be always present?
Thanks
Actually you using 'RelativeLayout' in that android:layout_weight="0.7" won't work unless its parent is Linear Layout. I have changed your xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
use This :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/short_image"
android:layout_weight="0.7"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
How do i align the arrows to be right above/below the numbers? Does each arrow need to have it's own linear layout? Is there a way to set this without setting a static amount of padding? I would like this to be generic enough to be used and show up properly on different devices...
I'm relatively new to android development - especially the UI portion of it... so any help would be appreciated!
What I See (Above)
What I Would Like To See (Above)
You can nest another LinearLayout (with orientation:vertical) inside your LinearLayout (with orientation:horizontal).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/one"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/two"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
</LinearLayout>
Note that nesting too many layouts inside a layout is discouraged. Reference:
http://developer.android.com/training/improving-layouts/optimizing-layout.html
But having 2 layout hierarchy is totally fine.
You need to nest two vertical LinearLayouts inside of your horizontal LinearLayout. Here's one where I do the same thing but I have empty Views on each side and one in the middle. You can take those out if you don't want them and obviously change your ids, backgrounds, and such
<LinearLayout
android:id="#+id/mpImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/mpLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/mpUpBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/UpArrow"
android:onClick="cycleUp"/>
<TextView
android:id="#+id/mpTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="breakfast"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black"/>
<ImageButton
android:id="#+id/mpDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/catLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/catUpBtn"
style="#style/UpArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleUp" />
<TextView
android:id="#+id/catTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beef"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black" />
<ImageButton
android:id="#+id/catDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
</LinearLayout>
You will notice I have also used weight and a 0dp for the width of the nested LinearLayouts and for the View to give them the separation I wanted and to look right on different screen sizes. You can change those depending on your needs.
You can have nested layouts. Be careful not to have too many, however two should be fine. Here is an example of what I think you are looking for. The arrows and text should be aligned thanks to RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_one"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_two"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/two"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
I have a lot of info to put on one xml page. Now i got what I want in the positions i want. However instead of fitting all my data on 3 key parts without running into each other, It keeps running into the next TextView. I was wondering how to have it auto adjust.
<?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:orientation="vertical" >
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/back" />
<TextView
android:id="#+id/makeup_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginTop="97dp"
android:text="#string/part_section_2" />
<TextView
android:id="#+id/part_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginLeft="19dp"
android:layout_marginTop="38dp"
android:text="put text here for info" />
<TextView
android:id="#+id/part_safety"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_makeup"
android:layout_below="#+id/safety_title"
android:layout_marginTop="28dp"
android:text="put text here for safety" />
<TextView
android:id="#+id/info_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="42dp"
android:text="#string/part_section_1" />
<TextView
android:id="#+id/part_makeup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_info"
android:layout_below="#+id/makeup_title"
android:layout_marginTop="33dp"
android:text="put text here for makeup" />
<TextView
android:id="#+id/safety_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/part_makeup"
android:layout_marginTop="48dp"
android:text="#string/part_section_3" />
<TextView
android:id="#+id/part_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textColor="#b70000"
android:textSize="16sp"
android:text="put text here for part title" />
</RelativeLayout>
would ScrollView work better? and how would switch this from this to ScrollView.
skin is 480x800
density is high(240)
Strings file - http://pastie.org/8534713
Changing to ScrollView (source):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- your Button and TextView widgets -->
</RelativeLayout>
</ScrollView>
Edit:
As well as that, try changing your back button XML to this:
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/part_safety"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/back" />
The problem was android:layout_alignParentBottom="true". The bottom ended up not going to the bottom of the page like you had before. The ScrollView cut back on the bottom of the layout.
I've got the following layout with one ImageView and 2 TextView, I would like them all to have the same height. However, the ImageView is always taking more than half of the screen. Any help is highly apreciated.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:src="#drawable/sprint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#555555"
android:text="#string/hello" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="#string/hello" />
</LinearLayout>
You will have to Set
android:layout_width="fill_parent" and android:layout_weight="1"
Following is the Link Which might Help You. LINK
try
android:layout_weight="1"
for all three, make sure that your image dimension is not bigger than you defined for its alloted space.
Try this few minor changes...
<ImageView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/sprinklicious" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#555555"
android:text="#string/hello" />
<TextView
android:layout_width="wrap_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="#string/hello" />
</LinearLayout>