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
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.
In my app, I have a couple rows of buttons that share a single background image when not pressed, but get an individual background image when pressed.
To clarify myself: the buttons share a parent with a big background image, so the shadows don't interfere. When I press on a button, the transparent background image of the pressed button changes to a version that's pressed down and is put over the background image of the parent. There is a margin on the buttons because the mutual background image has shadows that I don't want the buttons to be on top off.
The current code works great on most devices, but on a tablet the margins are off so the buttons are bigger than the other buttons when pressed.
I know there are different units of measure (dp, sp, pt, px, mm and im), but I can't seem to get one to work like I want it to.
<LinearLayout
android:id="#+id/LinearLayout_volume"
android:layout_width="match_parent"
android:layout_weight="0.2"
android:layout_height="0dp"
android:baselineAligned="true"
android:background="#drawable/knoppen">
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_VolDown"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:src="#drawable/voldown"
android:scaleType="fitCenter"
android:contentDescription="#string/description_volDown" />
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_Mute"
android:onClick="onUdpBtnClicked"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/mute"
android:scaleType="fitCenter"
android:padding="0dp"
android:contentDescription="#string/description_mute" />
<ImageButton
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:id="#+id/Btn_VolUp"
android:onClick="onUdpBtnClicked"
android:cropToPadding="false"
android:background="#drawable/mainbtn"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:scaleType="fitCenter"
android:src="#drawable/volup"
android:contentDescription="#string/description_volUp" />
</LinearLayout>
So to summarize: I have an image with a certain margin where I don't want anything on top off and I have a button where I have to specify that margin, but I need it to scale with the image
I hope I'm clear enough and thank you in advance
Well i'm not sure if its what u want but if what u mean with an image is ImageView then u can use a linear layout to make your other stuff boxed to stay below your ImageView so it wont ever get on top off that.
Or maybe you can use something like this too
LayoutParams params1 = (LayoutParams)twoLetter.getLayoutParams();//twoletter-imageview
params1.height = 70;
params1.setMargins(0, 210, 0, 0);//top margin -210 here
twoLetter.setLayoutParams(params1);//setting layout params
twoLetter.setImageResource(R.drawable.oo);
i'm not sure what you are trying so sorry for not being so helpful.
I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!
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.
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>