I am an Android Newbie trying to use my VB experience (8yrs ago) and design a UI. I am trying to create a checkers board which in VB would be a form on which I add multiple resizable panel widgets contiguously as needed in multiple rows. Since these are panels I can either add a small image (coin) on it (with the panel as background) or even add another small panel with a color that I can make visible and invisible to represent the coins. I know describing a VB UI is bad but VB is meant to make form designs easy and it really does and that is the only language I can think in for UI.
I notice that android SDK does not nearly have enough widgets for me to use. The best I could think of is using a TableLayout with multiple rows. The thing I don't get is what do I use to represent a square? Is there something analogous to a VB panel widget? I don't want to use an image because I want the board to be auto adjust to the screen dimensions.
Could some one help me with some hints?
You could define the layout in XML using a horizontal LinearLayout and fill it with 8 ImageViews (or any other container that can show an image/color) and copy it 7 times in a vertical LinearLayout, similar to this:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView android:id="#+id/square_1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- Set image or background here --> />
<!-- Repeat the ImageView 7 times and change the id for every ImageView
you create -->
</LinearLayout>
<!-- Reapeat the LinearLayout 7 times too -->
</LinearLayout>
This will create 8 rows with 8 squares in each and all the squares will have the same size thanks to the weight property which indicates that they should all get equal space.
To use Java code to change image/background, you will have to use:
ImageView square_1 = (ImageView)findViewById(R.id.square_1);
square_1.setBackground(Color.yellow);
Read more in the Android SDK Reference here:
ImageView: http://developer.android.com/reference/android/widget/ImageView.html
LinearLayout: http://developer.android.com/reference/android/widget/LinearLayout.html
Hope this helps you along the way!
Related
I am trying to achieve the list of buttons for "account, privacy, security etc" like in the image. I have tried radio buttons so far but cant set their background color and they do not last from left side to right side. Any suggestions?
You may use buttons, but you need to set the attribute android:layout_width="match_parent" for them to span the whole width of the activity.
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Account"/>
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.
I am trying to have an image be fitted, and have a layout below it with some black background and whit text. My problem is that the layout ends up leaving space between the image and the text itself, and I don't understand why:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="15dp"
android:layout_below="#+id/image" >
<TextView
style="#style/text_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Couple more elements -->
</RelativeLayout>
</RelativeLayout>
I would want this second RelativeLayout of 15dp touch the bottom of the image, but unless I change the image height to something small, it leaves some space. This layout specifies how to display an image + some text below it, but I have a total of 4 images that use this layout to get loaded on the screen, in a 2x2 display. (Each image takes 25% of the screen).
Any idea how to make the RelativeLayout align exactly with the bottom of the image please?
I do not fully understand your question though I think you might have a look at the launcher layout for my Newspaper Puzzles app...
http://code.google.com/p/newspaper-puzzles/source/browse/np/res/layout/launcher_layout.xml
or perhaps from the Open Sudoku Game look at the number pad layout found here:
http://code.google.com/p/newspaper-puzzles/source/browse/np/res/layout/s_im_numpad.xml
Use the ADT tools to get the right layout is probably best if possible but I know sometimes it is difficult to use to get specific results I still recommend using the xml tools included in the Android Development Tools.
http://developer.android.com/tools/help/adt.html#graphical-editor
I would recomend using a compound drawable if you're trying to put text directly below an ImageView.
See the following question for more details: How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView
I need to put a vertical scroll bar in a home screen widget, and after searching many times, I can't find a convenient solution that works on API3 and above!
I tried many solutions:
- using bitmap created at run-time, but on some displays it never reach 100%
- a patch9 bitmap, but the scroll bar display gets completely messed up when the progress is near 0.
- using the addView() with 100 existing layout and it works great, except it's only available since API7!
- including all 100 layouts and showing only one at a time, work fine, but what a mess to include those in my 8 different widget layouts!
I tried to use the weight programmatically but it's not possible either, any other solution to resize a view based on a %?
Here is one progress bar layout I currently use:
<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:layout_weight="11" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView android:src="#drawable/scale"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="89" />
</LinearLayout>
Only solution I found so far is to have all the possible progress levels ready to use in various Xml layout files.
On Android API < 7, all those need to be included in a single xml layout and shown/hidden at run-time, while on Android API >= 7, one can actually use addRemoteView() to include the desired layout in a much more efficient way!
You should use ScrollView! You must place this within a layout. By default, scrollview is for Vertical Scroll. If you want horizontal scroll you must specify HorizontalScrollView. Hope this helps
I have a background in iPhone development, which may be a cause of some of my confusion with Android, which I am very new at developing.
My question is this: How to I create two TextViews, and specify their exact location on screen? For example, on the iPhone, I would create a UILabel, generate a rectangular frame that specified the label's size and position, and then set this rectangle to the frame property of the UILabel.
If you can help me understand the similarities with Objective C and iOS' UILabel, that would be most helpful.
On Android, we don't use absolute screen positions. This is highly discouraged. It's pretty understandable that you think this way if you are coming from iOS. But you need to revise your habits.
Instead of absolute positions, we use layouts, such as LinearLayout, RelativeLayout or FrameLayout. All of these allow you to arrange your views dynamically. And in many cases, it will automagically adapt to the screen size, which vary a lot from device to device.
Actually, there's nothing exotic about dynamic layouts. Many major UI toolkits, such as GTK, or Qt, work similarly. Pixel position are a bad idea in my opinion, except maybe in the Apple world, where the OS and the hardware are tightly coupled, but this is an exception actually.
So, in your case, all that you need is to put your text views into the appropriate layout. Please read the documentation and tutorials about the different types of layouts mentioned above to decide which one is best. The question is how you want your views to be placed relatively to each other.
Create a basic Android project in eclipse. You will be having a main.xml layout file in your project. You can open it in Eclipse using Ctrl+Shift+r and keying in main.xml
copy paste this in your xml after clearing its content.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:text="TextView One"
android:layout_height="fill_parent"
android:layout_weight="1"></TextView>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:text="TextView Two"
android:layout_height="fill_parent"
android:layout_weight="1"></TextView>
</LinearLayout>