Well I know about the guidelines of android design but sometimes that wont help you in designing.
Specifically if your given design in no way near to android native design but it is more near to web design .
Well here is my picture which can give you the idea of my problem.
Now this is a layout of the Dialog , which looks good in the LandScape mode , but it screwd up in portrait mode some times some views gets chopped off or out of screen .
Question:?
How can this can be handle in best way my not manipulating the design guide lines?
How can it looks same for each mode?
what is best way of designing to look same on each mode and on all devices ? in sense that it gets wider in wider screen and come near in small screens?
Final Question ?
Isnt it good to not to use the TextView to show labes i.e in my case it is displaying please select amount and each radio button has text which shows amount , is there any way to show the text label on the block level ? just look in the picture below?
in this case you should use linear layout with weights. It automatically adjusts to available dimensions. Here is a sample
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"></RelativeLayout>
</LinearLayout>
You can see more details here
Related
I am very new to this forum and really need help in something I got stuck in during developing the app.
This is the image I am using as my background (I named it SampleBG in xml):
https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png
Basically, this is what I want my design to look like:
https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png
And for smaller devices, it automatically resizes and looks like this:
[i.gyazo.com/f4278339cc8f246187c011474796a12c.png]
And when I switch to a tablet device, it automatically looks like this:
[i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]
And the above is exactly what I want it to look like. The wooden signs are in the same position for all sizes...
But the problem is:
I want the wooden signs to be clickable, because they are meant to be buttons.
So, I tried to use a button widget and made it transparent and placed it over the wooden signs... it worked but it only worked for that particular size I designed it for (designed it for Nexus 5 to be specific).... However, when I switched to the Nexus One layout, or Nexus 9 layout, etc, the buttons weren't placed correctly over the wooden signs and thus didn't work.
I want a way to make the wooden signs clickable and and the buttons to be fixed with the signs for all device sizes/etc, and at the same time.
I would prefer an xml solution but a programmatic solution is nice too.
Here's the layout code right now, it just using the background image right now....
`<?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:background="#drawable/sampleBG">
</RelativeLayout>`
NOTE:
I have tried using the door image as the background only and then adding the wooden signs manually by using the ImageButton widgets, but the wooden signs were being placed differently for different screens and it looked odd, so therefore I fixed the wooden signs with the background (in Photoshop).. now I just want the signs to be clickable.
This is a sample code that you can use, in order to achieve this:
<?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:background="#mipmap/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.test.androidtestapp.MainActivity">
<ImageButton
android:id="#+id/equationsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Button"
android:onClick="equationsButtonClick" />
<ImageButton
android:id="#+id/equationsOfTheWeekButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Of The Week Button"
android:onClick="equationsOfTheWeekButtonClick" />
<ImageButton
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Settings Button"
android:onClick="SettingsButtonClick" />
</RelativeLayout>
You need to slice your image and then just change the background attributes in the code above. When you achieve that, you can change the background to a selector where you can change the image depending on the different states -> when it's clicked, focused, normal; that would make it more user friendly.
The wooden signs should NOT be on the background image.
Instead, make a real background image (ie. with only the "door" background) and make separate images with the signs.
Then use these images to build your buttons.
Edit: I did read your note about the fact that you tried that, but you should definitively go this way. Another advantage is that you'll be able to easily make the buttons reacting to the user click, with "onPress" states, which would be impossible (or at least difficult and ugly) with a single background image.
You can separate wood pics that you want to be button and give them as a background for buttons. For example, you named the wooden pics as 'wood1.png' , 'wood2.png' and 'wood3.png' and by this sample code you can set them for background image for buttons :
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wood1"
/>
Or you can design your app by your own solution that described but you should create your app design by different layout for different size device :
layout-large
layout-small
layout-normal
layout-xlarge
layout-xxlarge
you can search about autoLayout design in android app and find your solution better..
The texts can be entered into them . Only these two text widgets are possible in the given activity. I would want to know the structure , I would have to employ to get result as such.
I am still in learning phase.
There's a lot of ways how to achieve that. I suggest you to start with reading this thoroughly to learn how to build layouts on Android.
In general, you can add spacing among views by adding some margin and/or padding.
If you want to replicate the particular design quickly, do this:
Have vertical LinearLayout as your root layout (with gray background).
Add two CardViews (one for each box). That will add the
background and spacing.
Add other views to those CardViews.
To give you something to work on
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> //Elements inside this will be added vertically on the screen
<EditText
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
android:hint="First edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:hint="Second edittext"/>
</LinearLayout>
This is the basic structure on the image you showed. Expirement with it. Add your desired borders by using shapes and etc.
Want to make space background to my activity and begin to rotate it slowly, but i stuck with that:
screenshot (http://postimg.org/)
The effect I need need I can get if add in XML file
android:scaleY="2"
android:scaleX="2"
but it will not work, android scale pic down when app start.
Guys, really need your help, I in android for 4 day and have bad english
----ADDED---
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/backgroundd"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
I have not tried this, and I am not sure it is the best solution, but could you set a negative android:layout_marginon the image?
android:layout_margin="-100dp"
See here for more: How to get a view larger than its parent?
Also, posting your full XML could help us know more about how you are setting up the layout.
I have an activity with four buttons, when i play it on the emulator everything is OK, but when i test it on my mobile the buttons grow bigger or actually the background or the screen gets smaller but the buttons stay the same, so it looks bigger.
Can i make the buttons adapt with the screen the same way the background of the activist do?
Here is my xml file
<?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:background="#drawable/mainn"
android:gravity="top" >
<Button
android:id="#+id/b_labor"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="114dp"
android:background="#drawable/labb" />
<Button
android:id="#+id/b_mosul"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_labor"
android:layout_alignLeft="#+id/b_labor"
android:layout_marginBottom="32dp"
android:background="#drawable/ninaa" />
<Button
android:id="#+id/b_trafic"
style="#style/Theme.Transparent"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_mosul"
android:layout_alignLeft="#+id/b_mosul"
android:layout_marginBottom="28dp"
android:background="#drawable/traficc" />
<Button
android:id="#+id/b_nati"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_trafic"
android:layout_alignLeft="#+id/b_trafic"
android:layout_marginBottom="34dp"
android:background="#drawable/natiii"
/>
I think you are new to Android so you need to learn several things before creating UI elements on android devices. UI is not simple to create you should understand different concepts to create complex GUI in Android. The main problem in your above case is each device have different resolutions and if you Hard code your button then it will not adapt according to your device resolution and screen size. So before creating any UI element you need to keep some of the points in your mind:
Never try to hard code anything specially GUI parameters because these can change according to devices.
Always create and update your GUI from UIThread only.
Use asynchronous tasks, services and threads to perform heavy tasks and background tasks.
Always try to keep UI thread with minimum load.
To learn more about GUI characteristics try to explore LayoutParams for different layouts and views.
There are lot more thing you need to learn. According to me while creation of GUI you should start from Relative layouts and try not to use Absolute layout ever.
You can check below links for some help:
https://stackoverflow.com/questions/2992754/ui-design-tips-and-tutorials-for-android
http://mobile.smashingmagazine.com/2012/07/26/android-design-tips/
As we all are aware of different screen sizes of android devices , We should check for the alignment of buttons in different devices , For start check this link Developer.google
There is stackoverflow answers , that will help you
screen size vs button position
There are two numbers constantly displayed in my UI. I need the user to be able to specify those numbers. In a desktop app I simply use 2 spinbuttons, and can beat it (I guess). However, there are problems with this in Android (I am targeting Android 3-based tablets).
First of all, I've tried NumberPicker widget, but it simply does not show itself properly (I've asked a question about it, but no response so far).
Then I've tried some 3rd-party numberpicker implementations one cand find on the Web, but for various reason didn't like neither of them. Some of them are too large to fit the side panel I'm squeezing controls into, some are just ugly (and too small, probably), and all of them automatically grab input focus causing the keyboard to show every time I open this side panel.
There is another option - only show the uneditable label with a number on the panel, and show popup window with some numberpickers in it. Apart from me not knowing how to implement such a popup (just learning), how do I decorate the label so that the user understands he can tap it to edit?
Perhaps, there are better solutions for this problem? I took a look at some apps from Google Market, and they all seem to either use huge NumberPickers at the center of the screen (and I need as much of the screen as possible clear), or a popup with the same huge Numberpickers I don't particularly like.
Can you suggest anything else? Thanks in advance!
There are two different issues in your question:
For the number picker for eaxmple in my case I have created a simple tool. You can just put a button with the text "-" then a textview and then a button with "+". You put it in a linear layout and t can be vertical or horizontal. If you want it you can make it very small. For example here is what I have wrote but you can try playing with the options to see which is better for you.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical" android:id="#+id/linearLayout1"
android:layout_width="wrap_content" android:layout_weight="1"
android:layout_height="wrap_content">
<Button android:id="#+id/button22" android:layout_gravity="center"
android:layout_weight="1" android:text="+" android:gravity="center"
android:layout_width="30dip" android:layout_height="30dip"></Button>
<Button android:id="#+id/button11"
android:layout_gravity="center"
android:layout_weight="1" android:text="-"
android:gravity="center" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_height="30dip" android:layout_width="30dip"></Button>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" android:orientation="vertical">
<Button android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="30dip"
android:text="0" android:id="#+id/quantidad"></Button>
</LinearLayout>
then you can add onClick listeners on the buttons and setup to increase or decrase the text displayed in the text view.
As for the keyboard well if you use that example you not need it but if you use an edittext then you can setup an option for the keyboard to be hidden in the manifest: you can see the option here http://developer.android.com/guide/topics/manifest/activity-element.html