I have an activity that looks like this:
When I run the app on the emulator, the pushpin is not over the post-it note, so I know there will be problems with different sized screens. The post-it note and cork board are the background. How could I go about making it so that, on any sized screen, the pushpin will be at the correct location? It's currently a linear layout.
Best solution for you is use a RelativeLayout. I advise that your post-it note not be a part of the background but an own ImageView so that you may re-size it any time to fit any screens. And due to that you can then add this to your code for your cork.
<ImageView
android:id="#+id/cork"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignTop="#+id/postit_note"
/>
It will center the cork in the center and align it to the top of the post-it note.
You may view all the other attributes to help you with RelativeLayouts Here
Based on the above recommendation, do something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:src="#drawable/postit"/>
<ImageButton
android:id="#+id/angry_btn"
android:background="#drawable/pushpin"
android:layout_width="80dp"
android:layout_height="80dp"
android:shadowDx="0"
android:shadowDy="0"
android:layout_gravity="center"
android:shadowRadius="5"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
Note: You should make the brown part as the background for the outermost layout, and have a separate image for the post-it note, which you should set to the image view I have shown above.
Related
I am using ImageButton in my custom bottom navigation. And I have set icons of 32*32 size as src to them.
here is xml
<ImageButton
android:id="#+id/bottom_nav_profile"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_weight="1"
android:src="#drawable/btm_nav_user_act"
android:text="Profile"
android:adjustViewBounds="true"
android:scaleType="center"
android:background="#drawable/bottom_nav_bg"
android:textColor="#000"/>
When I view it on my phone they look pixelated. I'm fine them being smaller but I dont want them to be pixelated. How can I make adujustment so that they look sharper.
Here are the icons
It seems that your image is very small to begin with, you have 2 options:
Remove the hardcoded height (50dp), your original image may be smaller than this, forcing its height may be reducing its quality on certain devices.
Have the same drawable you're using but for different phone densities. I'm guessing you only have one version of your drawable image in the drawable folder, on certain phones with certain densities, this image may display badly (just as it may be displayed just fine on certain other phones).
Lets make custom Image Button with linear layout and imageview
<LinearLayout
android:id="#+id/id"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/btm_nav_user_act"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="#000"/>
</LinearLayout>
Now use linear layout as a button.
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
Starting in Android development, i wonder how to do this layout in XML (using Android Studio), targeting 4.x Android devices.
How to precisely position 4 buttons on a bitmap background? Should work despite bitmap scaling.
Scenario:
My application main screen should consist of 4 buttons placed on a bitmap. Button positioning should always look exactly like this, and the whole should scale up/down (proportional width/height) to match the screen space. A layout sketch:
Tried solutions:
4 Buttons in a GridLayout with background:
<GridLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:columnCount="2"
android:rowCount="2">
<Button android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button1" />
<Button android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button2" />
<Button android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button3" />
<Button android:id="#+id/button4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button4" />
</GridLayout>
4 Buttons in a GridLayout, above a ImageView in a RelativeLayout.
One ImageView with onTouch() that checks a colorcoded bitmap. (source here)
The only solution that worked ok regarding scaling is the onTouch(), but i'd rather keep using actual buttons so keyboard navigation and press/hover effects work as expected.
How is it possible to position buttons, to have them always match scale with the bitmap?
Thanks for any insights.
Due to the title this question looks like a dupe but i havent found any that demonstrate how this can be accomplished.
I had this problem and I mathed my way around it. It's pretty horrible but let's say that your background image is 500x500px and on an image like that your button is supposed to be at (100, 100) with a size of 50x50px relative to that background image. When you lay it out you have to get the size of the current device, let's say it's 700x800px in size (these devices most likely do not exist). In this case you would have to set the width of your button to (700/500)*50px and the height would be (800/500)*50px . The position of the button would then be at (700/500)*100 and (800/500)*100 .
You are pretty much scaling the button with the background image. Hopefully I'm making myself clear :)
you can try this, hope will help
<ImageButton
android:id="#+id/notificationform_btn_Approve"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/btn_approve"
android:onClick="btnApprove_Click" />
and take a look here
and why don't you use ImageButton instead:
<ImageButton android:src="#drawable/greybutton"
android:scaleType="fitCenter" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can adjust the scaling with the scaleType attribute. The only downside is you can't set any text.
good luck
I'm building a graph which consists of 2 images: 1 background image and one image containing the actual data points. The data points image show be aligned at the top of the background image.
The layout looks like this:
<RelativeLayout
android:id="#+id/graphImageWrap"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/graphImageBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
<ImageView
android:id="#+id/graphImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/graphImageBackground"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
</RelativeLayout>
This works well on a HDPI device:
But on a MDPI device it doesn't align properly:
I hope someone can explain what the problem is.
You may want to use a FrameLayout instead, and make sure the images are the same size.
I am trying to achieve something that on the face of it I thought would be easy but have researched loads and still struggling.
I am setting an ImageView that will act as a background where parts of the image are areas that buttons should sit on top. For example the background looks a bit like this:
This is set to fitCenter so that it scales with the correct aspect ratio on all screen types like this:
Now I am trying to place ImageButtons over the white areas like so:
I am trying this by aligning each Imagebutton to the top left of the background imageView and then setting margins to aset it in the right place. This works for some screen types, but when the background gets resized because the device is smaller than the background image for example I am finding that the buttons on top dont resize with it so I get the effect like the following:
Here is the type of layout I am trying (with just one button here):
<RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/outer" xmlns:tools="http://schemas.android.com/tools">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageView1" android:src="#drawable/no_pills_pane" android:scaleType="fitCenter" android:adjustViewBounds="true" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageButton1" android:src="#drawable/pill_pink" android:scaleType="fitXY" android:background="#null" android:layout_marginTop="50dp" android:layout_marginLeft="44dp" android:layout_alignTop="#id/imageView1" android:layout_alignLeft="#id/imageView1"/>
</RelativeLayout>
I'm sure there must be an easier way to go about this, any help would be greatly appreciated.
Thanks
Simon
If all you need is to center ImageButton within ImageView, simply set alignBottom, alignLeft, alignRight, alignTop to ImageView
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"