I want to create simple UI for chess game in Android.
I want to adjust the screen to all kinds of mobiles.
I make a TableLayout with Table Row , each Row contain 8 Linear Layout that contain the View
for the players , my problem is that i make the width and the height of each linear layout in specific size (40 dp width and height), what is the best teqhniques to make the width and height right , here is the layout in xml file i described one row here ,
<?xml version="1.0"?>
-<TableLayout android:id="#+id/tableLayout" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
-<RelativeLayout android:layout_height="120dp" android:layout_width="120dp" android:background="#android:color/white">
<TextView android:id="#+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="TextView" android:layout_marginTop="24dp" android:layout_marginLeft="33dp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"/>
</RelativeLayout>
-<TableRow android:id="#+id/tableRow0" android:layout_height="wrap_content" android:layout_width="wrap_content">
<LinearLayout android:id="#+id/n00" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/white" android:orientation="horizontal"/>
<LinearLayout android:id="#+id/n01" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/black" android:orientation="horizontal"> </LinearLayout>
<LinearLayout android:id="#+id/n02" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/white" android:orientation="horizontal"/>
<LinearLayout android:id="#+id/n03" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/black" android:orientation="horizontal"> </LinearLayout>
<LinearLayout android:id="#+id/n04" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/white" android:orientation="horizontal"/>
<LinearLayout android:id="#+id/n05" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/black" android:orientation="horizontal"> </LinearLayout>
<LinearLayout android:id="#+id/n06" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/white" android:orientation="horizontal"/>
<LinearLayout android:id="#+id/n07" android:layout_height="40dp" android:layout_width="40dp" android:background="#android:color/black" android:orientation="horizontal"> </LinearLayout>
</TableRow>
If I were developing a chess UI, I would not use frame layouts, but look into using a SurfaceView, and drawing onto a canvas.
Every View has a canvas, which is the what is actually drawn to the screen. If you create your own, you will be able to get much better control and render speeds, and you can just create the checkerboard with a simple look in your Java Code.
Might I suggest a different way to create your chess layout?
Consider a vertical LinearLayout (this will make your rows) containing horizontal linear (your columns). And then in each horizontal LinearLayout, have eight Buttons/ImageButtons. Here's an open source implementation of such a layout.
Now the question is how to correctly space these out (this should be applicable to your orignal layout if you want to keep it). There are two main ways we could do this:
Make the chess board fit on the screen, no scrolling needed.
Make the chess board a minimum width/height, scrolling may be necessary.
To accomplish the former, your outer layout should have match_parent for both width and height. Your inner layouts should match_parent for the width and wrap_content for height. Then your individual cells should have a weight attribute of 1. There are limitations to this approach, like how you won't be able to have any views to the side of the chess board (above and below should have space though).
To accomplish the latter (this is what you were asking for), the width and height attributes of your outer and inner layouts should be wrap_content. I also suggest you embed your structure in a ScrollView in case it expands past the screen.
Related
I am using Xamarin Android, and I have a list view with row views that have the following content in them:
All of these views are wrapped in a PercentRelativeLayout, because I want to keep the widths proportional. So the issue I'm running into is that since the two layouts on the left are left empty and filled at runtime (there is absolutely no way around this) their height is measured out to 0, which then sets the Rowview height to 0, and that then sets the controls layout off to the right to have a height of 0, which then stretches to the size of the largest control inside of it (ex:)
I have tried:
Using layout weights and a height of 0 to allow the layout itself to stretch to fill the parent
Using layout weights on the controls themselves within the layout
Scrapping a layout altogether, and simply wrapping the image buttons in the PercentRelativeLayout, and using layout positions to position them properly
Using percentage based layout widths and heights within the children to fill the height (this only seems to work for the width, but not height)
Adding dummy views as padding to push the controls layout into position
Adding percentage based margins to the layout itself, the children, the padding dummy views, and every combination of those
Not one single thing I have tried has had any effect, the only thing that affects the height of the linear layout is simply hard-coding the height.
My question then is how can I tell this layout to occupy the full height of the rowview once everything has been measured? (Please let me know if you have any other questions to help address this, I'm happy to oblige)
EDIT #1: Here is my xml for the rowview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="400dp"
android:layout_height="match_parent"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:paddingTop="10dp"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="match_parent"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_below="#id/LeadTagLayout"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"
android:background="#drawable/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"
android:background="#drawable/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
I've played a bit with your code, and the result seems good.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a test"/>
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_marginTop="5dp"
android:layout_below="#id/LeadTagLayout">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
Let me know if this works for you at runtime (i've removed some background drawable files which you didn't provided to test this XML).
I've added a TextView inside the RelativeLayout to test his height
I've created a notification using RemoteViews with a custom layout. The layout structure is as below.
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingTop="8.0dip" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:divider="?android:listDivider"
android:dividerPadding="12.0dip"
android:gravity="center_vertical"
android:layout_gravity="center"
android:orientation="horizontal"
android:showDividers="middle|beginning" >
</LinearLayout>
</LinearLayout>
The effect of it all appears only in a fraction of the notification height, and not in the full height of the notification. E.g. check-out the buttons in the screenshot at http://i57.tinypic.com/14dzo9i.png (the middle notification is the focus of the question), which are in the last child of the parent LinearLayout, and should be all vertically centre-aligned.
My question is very similar to Height of notification incorrect "match_parent", but since there isn't a real answer present there, I'm asking this. The answer on that question does refer to a way to dynamically figure out the notification height. If that is the solution to use, I'd like to know how to use the height obtained from there to dynamically set the height of the remote view, since I don't see a height setter on the remote views object.
Please note that the height of the image is fine when I use a relative layout instead. Relative layout still has two problems: 1. the buttons are still not vertically centre-aligned and 2. I can only wrap content or fill parent, not divide the available space into the two children linear layouts. Screenshot: http://i59.tinypic.com/o1000j.png
Seems to be working on changing android:layout_height="wrap_content" to android:layout_height="match_parent" for the views within. Somehow missed it earlier, interesting though the behaviour for this combination of values.
Change your Layout to RelativeLayout and use param android:toLeftOf="#+id/...", android:toRightOf="#+id/..." to align your subView in layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/image1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Hi I have found weird behaviour when trying to implement the following layout on android.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_margin="20dp"
android:textColor="#android:color/black"
android:lineSpacingMultiplier="1.1" />
</LinearLayout>
</LinearLayout>
This piece of layout is supposed to generate a textview on the right that takes up 75% of the screen. But for some reason the height of the Textview is calculated as if the weight of its parent is 0. The text inside the view seems to wrap perfectly, but not the view itself.
Is this normal behaviour or how can I get the textview to display the correct height?
Firstly please indent your code properly so it is easy to read. You can do that automagically in the XML editor by pressing Ctrl + Shift + F.
Secondly if you want the LinearLayouts to be 25% wide and 75% wide but fill the whole height of the screen then you need
android:layout_height="match_parent"
Thirdly, if you want the TextView to take up 75% of the screen, then why not just assign the weight directly to that and not have it wrapped in another LinearLayout?
Lastly, with weights you dont need to make the children weights add to 1. Having
android:layout_weight="1"
and
android:layout_weight="3"
is also ok.
First time asking a question, so please be gentle. :)
I'm trying to create a nested layout of ImageViews inside a LinearLayout. The parent LinearLayout needs to match the root view's width but have it's height determined by the 2 ImageView components it holds.
The 2 ImageView components need to be equally weighted for width (i.e. 50%) within the LinearLayout parent and have retain their proportional height.
However, whilst the width of the ImageViews are calculating correctly and the height of the image itself is correct, the height of the parent LinearLayout is not.
Below is the XML code I am using, apologies but I do not currently have enough reputation points to post images, which could make this difficult.
XML Code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:background="#drawable/container_dropshadow"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="2" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:padding="5dp"
android:src="#drawable/barcode" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:padding="5dp"
android:src="#drawable/barcode" />
</LinearLayout>
</LinearLayout>
This is what I am getting
Any help would be greatly appreciated, apologies for any failing in etiquette,
Danny
You should add the following line for each ImageView:
android:adjustViewBounds="true"
For more info about the xml attribute see here
I have an Android application that goes about like this:
<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:orientation="vertical">
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.90" >
<Button
android:id="#+id/button_1_of_10"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/text_0x1701" />
<Button
android:id="#+id/button_2_of_10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/button_1_of_10"
android:layout_below="#+id/button_1_of_10"/>
<!--Another 8 buttons-->
<RelativeLayout
android:id="#+id/contentpane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button_1_of_10" >
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/actionbuttonslayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.10">
</RelativeLayout>
</LinearLayout>
I need the 10 buttons to fill up the entire height from the top to the footer (the 0.1 weighted RelativeLayout), while all the buttons keep an equal height. However, I want to know whether there is a kind of equivalent to the layout_weight from LinearLayout, but for RelativeLayouts, as it's not performant to have nested weights in LinearLayouts. I'm not really looking for other solutions, because I still have some thing to try, but I want to know whether or not this is possible?
My question, just to be clear, is: Is it possible to have an amount of Buttons with an equal height in a RelativeLayout and at the same time fill up all the available space?
To use weight you need to use a LinearLayout, just make a linear layout with the buttons take the space you want and then on each button inside have android:layout_height="0dp" and also a android:layout_weight="1"
You don't need to sum all the weights to 1, just think of items with the same weight have the same size