I want to have two buttons at the top of my program taking users to different activities. I'm having a lot of trouble with the formatting.
How can I make it so that the buttons will stretch proportionally based on the screen size? Right now, they will look OK for one screen size, then I will switch to a different one and it will appear all smushed or stretched. I've tried all of the different ScaleTypes and none seem to make a difference. I also went though and proportionally saved all of the images to the correct sizes regardimg xhdpi, hdpi, etc using Shubhayu's answer.
Here's my code so far:
<LinearLayout 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:background="#drawable/brushed_metal_background_dark"
tools:context=".HomeActivity" >
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/incident_bar2"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:scaleType="center" />
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/operationalperiod_bar2"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:scaleType="fitCenter" />
Change android:background to android:src that will keep the aspect ratio. Use android:scaleType="centerInside" to fit whole image inside button area and optionally use android:adjustViewBounds=true to remove empty spaces. Example:
<ImageButton
android:id="#+id/incidentsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Incidents"
android:onClick="chooseIncident"
android:src="#drawable/incident_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
<ImageButton
android:id="#+id/operationalPeriodsSelect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="Operational Periods"
android:onClick="chooseOperationalPeriod"
android:src="#drawable/operationalperiod_bar2"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
I am guessing that you are trying to size the buttons evenly on the top of the screen. If that's the case then you should set android:layout_width="0dp".
Just use android:layout_width = "wrap_content"
Related
I've an imageview with an icon on background, instead of generating all diferent sizes of icons for diferent sizes of screen i'm using only a big one and resizing it to fit the size I want.
If I set the layout_height to any value android automatically resize the width to keep aspect ratio (what is good) but the placeholder keeps the original width and the new resized icon is centered in the space it was supposed to fit
To demonstrate the situation i took this print
both left and right icons have the same dimension in original file
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:foregroundGravity="left"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
setting only the imageview height and is it possible to make it resizes keeping gravity on left? (as in the print bellow)
It is quite simple.
Set your parent layout height as desired and its children height to "match_parent"
You can use "dimen.xml" files to control different sized screen dimensions, for now i have put a static value of "64dp" android:layout_height="64dp"
<RelativeLayout
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>
The answer was pretty easy... there is an property on ImageView that tells android how to deal when it needs to scale the image:
android:scaleType
so setting it properly i've
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb"
/>
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitEnd"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_right_thumb" />
In this way, instead of fitting the icon at the center of the spaceholder, it's is going to adjust to the edges
I am trying to create a custom top view using anImageView where buttons stays always at the same position and scale in proportion of the resolution of the device. I have been trying to put my elements inside a RelativeLayout using margins without any success the button always move from it position and its not scaling.
How could achieve this?
This is the example I am trying to get for all resolutions:
and here my XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:srcCompat="#drawable/settings_red_btn"
android:id="#+id/settings_btn"
android:contentDescription="settings btn"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="9dp"
android:layout_marginTop="11dp"
android:layout_width="43dp"
android:layout_height="43dp" />
<ImageView
android:layout_width="match_parent"
app:srcCompat="#drawable/top"
android:id="#+id/imageView17"
android:scaleType="fitCenter"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:adjustViewBounds="true" />
</RelativeLayout>
You have 2 options here :
You need to have the same padding right in the images themselves resources settings_red_btn & top. That way, you set to them alignParentRight = true, and they will align with the same padding.
You need to specify padding right for imageView17, according to screen resolutions. This is done by defining dimens.xml file on all resolutions. There are many blogs and stackoverflow hits on this. You can start with : http://android4beginners.com/2013/07/appendix-c-everything-about-sizes-and-dimensions-in-android/
that is my problem in relative-layout:
i have some image views that some part of each imageview is out of
display with negative margin.
i design this layout in a display dimension that shown in left side
and that is OK.
but in other display demensions some parts of views that i dont want
to be shown will be shown [like right image]. (or in smaller
displays some parts not shown).
so. i want just wanted box of layout will be visible in different
display sizes and be scaled according to display dimensions.
Sorry i know the problem is involved ;)
i need just visible part of layout scaled in various display sizes, also want views be separate to animate them.
that is one arrows sample code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="4000dp"
android:layout_height="300dp"
android:rotation="15"
android:src="#drawable/rectangle"
android:layout_row="0"
android:layout_column="0"
android:id="#+id/img_rct_header"
android:layout_marginBottom="108dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-160dp"
android:layout_marginRight="-120dp"
android:clipChildren="false"
android:scaleType="fitXY" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="135dp"
android:rotation="195"
android:src="#drawable/arrow_tall"
android:id="#+id/img_arw_in_sore"
android:scaleType="fitXY"
android:layout_marginTop="815dp"
android:clipChildren="false"
android:layout_marginRight="-8450dp"
android:layout_marginLeft="25dp"
android:visibility="gone" />
<ImageView
android:layout_width="500dp"
android:layout_height="150dp"
android:rotation="195"
android:src="#drawable/arrow_svg"
android:id="#+id/img_arw_in_tafsir"
android:scaleType="fitXY"
android:layout_marginBottom="-50dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="161dp"
android:layout_marginTop="360dp"
android:layout_marginRight="-1150dp"
android:clipChildren="false"/>
<ImageView
android:layout_width="500dp"
android:layout_height="150dp"
android:rotation="195"
android:src="#drawable/arrow_svg"
android:scaleType="fitXY"
android:id="#+id/img_arw_out_tafsir"
android:layout_marginBottom="0dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-272dp"
android:layout_marginTop="240dp"
android:layout_marginRight="55dp"
android:clipChildren="false"/>
<ImageView
android:layout_width="4000dp"
android:layout_height="320dp"
android:rotation="15"
android:src="#drawable/rectangle"
android:layout_row="0"
android:layout_column="0"
android:id="#+id/img_rct_footer"
android:layout_marginBottom="-800dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-100dp"
android:layout_marginTop="550dp"
android:layout_marginRight="-120dp"
android:clipChildren="false"
android:scaleType="fitXY" />
</RelativeLayout>
thanks for your help ;)
Your layout is pretty complex. If all you want is to have this as a background that will look the same in different screen sizes, I'd suggest that you draw that background separately, save it as a high quality png, and then put it in one ImageView, without all the hassle of margins and rotation.
You must set the background of layout to that picture in order not to show it in dp.
The dp size is like the pixel of screen and its getting smaller and bigger in other devices try using the value match_parent instead of 4000dp
The best way is to use apps like picsart or picsay. Just put all the pictures in one picture edit the picture then make that the background of the whole layout with these values
layout_width="match_parent"
layout_height="match_parent"
but if you want to animate them you must add the layout to another layout
and give them layout_weight
im sorry this is a noob question but i suck at layouting. How would i make a layout that positions the flashlight_button so it would preserve the ratio between imageviews on top and bottom.
It looks okay on nexus s (800x480), thats what i want
...image ...
but obviously when i switch to galaxy nexus (1280 x 720), it moves the middle button a bit to the top, like this (so it doesnt preserve the ratio between top and bottom margins as designed on nexus s)
...image...
The layout is here:
<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:background="#drawable/background"
android:padding="20dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/ad_button"
android:layout_centerHorizontal="true"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
so it just anchors the top and bottom imageviews to parent edges, and the middle button is just pushed down using layout_maginBottom. I am providing scaled images for different densities and obviously density pixels to express size, so as it seems it just not enough on a bigger screen.
Whats the correct way to do this? Different .xml files or .. ?
//Sorry i cant still post images, hope you can imagine it.
Have you considered placing your flashlight image according to the parent's center?
So for now you are pushing flashlight image down (according to the top image position). Would it be more accurate to make flashlight image center-aligned and give it some bottom margin (to push it a bit higher according to your design).
I have a linear layout with 4 images with horizontal orientation. My problem is that the first image is cropped and i cant see both of them in my galaxy s,only in some emulators..any help please?this is my linear layout code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_new_3"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn2"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn3"
/>
</LinearLayout>
this is what i want
and this is what i get
#Jamo: image1:
image2,3,4:
Your containing layout is fill_parent, meaning it's restricted to the width of its parent (probably the whole screen). Each ImageButton is set to width wrap_content, meaning it just fits the width of its content. If the widths of the backgrounds of the images you're using sum up to more than the total parent width, you're going to have problems. This seems to be what's happening. You can't fit more pixels into a screen than what you have.
Update:
With your provided graphics, the "hello" image is 138px and the star is 60px. 138 + 60 * 3 = 318. If your screen is 480px wide (I think the Galaxy S is 480 wide) then you should be able to fit. If you put these into the default or mdpi folder (and the Galaxy S is hdpi) then these will be scaled to 1.5x that, which is 477px. That should still fit.
The only way I know to create something similiar is to use RelativeLayout like this:
<RelativeLayout android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageView android:layout_alignParentRight="true"
android:id="#+id/iv4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv4"
android:id="#+id/iv3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv3"
android:id="#+id/iv2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv2"
android:id="#+id/iv1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#drawable/icon"/>
</RelativeLayout>
We chatted about this in a previous question. Please post the whole layout file. The layout_weight won't do much, as hinted at in other posts, if the total width is being constrained by whatever is the parent of the outer LinearLayout.
Also, some thoughts.
You have "fill_parent" for the ImageView heights. I think those should be "wrap_content". You're setting the images with 'background' rather than 'src', which is kind of weird.
Also, that first image should be in another layout container, to allow stretching that doesn't screw up the 'hello'.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_new_3"
android:layout_gravity="center"
/>
</LinearLayout>
Not 100% sure on that being exactly what you want, but the ultimate goal would be to stretch the first image without shearing it in any way.