I have a GridLayout with seven ImageButtons. I want to have them in two equal rows in height and four equal columns in width, 4 buttons in the first row, and 3 buttons in the second row. Here is my problem... I want to have the last button to be spanned over two columns. I used some test images with greater dimensions than original button dimensions. Also, I made a XML file, as below, to be referenced for button styles.
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="ButtonStyle">
<item name="android:textColor">#00FF00</item>
<item name="android:typeface">monospace</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:background">#android:color/background_light</item>
<item name="android:layout_marginLeft">5dip</item>
<item name="android:layout_marginRight">5dip</item>
<item name="android:layout_marginTop">5dip</item>
<item name="android:layout_marginBottom">5dip</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_gravity">fill</item>
<item name="android:layout_columnWeight">20</item>
<item name="android:scaleType">fitXY</item>
</style>
</resources>
I have no problem in arranging them using the default layout_columnSpan for ImageButton7, that is 1. But, when I set layout_columnSpan to 2 for that ImageButton, the second row extends in height, giving the second view.
View when ImageButton7, layout_columnSpan=1
View when ImageButton7, layout_columnSpan=2
Here is my XAML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<GridLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayout1"
android:columnCount="4">
<ImageButton
android:src="#drawable/btn0"
android:id="#+id/imageButton1"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn1"
android:id="#+id/imageButton2"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn2"
android:id="#+id/imageButton3"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn3"
android:id="#+id/imageButton4"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn4"
android:id="#+id/imageButton5"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn5"
android:id="#+id/imageButton6"
style="#style/ButtonStyle" />
<ImageButton
android:src="#drawable/btn6"
android:id="#+id/imageButton7"
style="#style/ButtonStyle"
android:layout_columnSpan="2" />
</GridLayout>
</LinearLayout>
The goal is to have a view like the picture below. Any help would be appreciated.
The image button tries to keep aspect ratio of your image so when yoy span Button7 its width will extend and therefor its height extends to keeep the aspect ratio.
Then when height gets bigger all of the rows height gets bigger and this happens ;)
To solve your problem just make you button7 image in a way that its aspect ratio is suitable for two columns (like 2x width of now) and your problem will be solved ;)
Another to way to address your problem is to creat a 9patch image . Look this link:
https://developer.android.com/studio/write/draw9patch.html
9pAtch images are extendible and great things.
Why use GridLayout for that?
I would use LinearLayout with weights (in pseudo xml):
<Vertical LinearLayout>
<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
</Horizontal LinearLayout with weightsum=4>
<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 2/>
</Horizontal LinearLayout with weightsum=4>
</Vertical LinearLayout
Related
I've the following problem. I've a TableLayout and two TableRows. Both TableRows contain two ImageButton. When a button is clicked I want to fade out other three buttons and translate the clicked button at the center of the screen. When it is translated the top or bottom half disappeared like it's hidden by the other table row. I've tried to set transparent background of table rows, to set alpha=0, to change layout and also I've tried to use ScaleAnimation, but the problem doesn't disappear. How can i show the disappeared half? I post also the layout code and a link to the screen with the problem.
http://it.tinypic.com/r/1zejhir/5
`
<RelativeLayout
android:id="#+id/l34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<ImageButton
android:id="#+id/four"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top|right"
android:src="#drawable/unor"
android:alpha="0"
android:onClick="translate"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/three"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top|left"
android:src="#drawable/unor"
android:alpha="0"
android:onClick="translate"
android:layout_alignParentRight="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/l12"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/one"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top|right"
android:src="#drawable/unor"
android:alpha="0"
android:onClick="translate"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/two"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top|left"
android:src="#drawable/unor"
android:alpha="0"
android:onClick="translate"
android:layout_alignParentRight="true" />
</RelativeLayout>
</RelativeLayout>
`
The problem is that you want to use "space" from other viewgroups, your view is bound to the hosting viewgroup (eg tablerow). It doesn't have anything to do with the transparent background. The solution would be to have one viewgroup holding all your icons. For example use a RelativeLayout.
make transparent
in java code-> imagebtn.setBackgroundColor(Color.TRANSPARENT);
xml-> android:background="#android:color/transparent"
create modify the styles.xml file resource in values folder, with following code
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
in manifest.xml file add the below step to which activity make you as transparent.
android:theme="#style/Theme.Transparent"
Hi guys I want to resize an Image background of a Style, I have an Image View that uses the style and shows the background image
Style:
<style name="Background">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">#drawable/img_background</item>
</style>
So I have the "img_background", and it's size it's about 1920*1080, I want to resize it pefectly so it fits all devices sizes, How can make it resize automatically depending on the screen sizes?, Beacuse It doesn't work
It doesn't show the image properly is way off and is not resized properly to fit the screen.
I have a LinearLayout that has the style and then the Image view inside it. It doesn't fit the 1920*1080 properly, for example in a 800*480 resolution it is cropped off and not neatly resized
<LinearLayout
style="#style/Background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:contentDescription="#null"
android:layout_marginBottom="8dip"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dip"
android:layout_marginTop="8dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:paddingLeft="15dip"
android:src="#drawable/img_background"
/>
</LinearLayout>
Thanks
Change layout_width and layout_height your xml
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
Remove the style from the LinearLayout
Put this as your imageView:
<ImageView
android:contentDescription="#null"
android:layout_marginBottom="8dip"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dip"
android:layout_marginTop="8dip"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:clickable="false"
android:paddingLeft="15dip"
android:scaleType="centerInside"
android:src="#drawable/img_background" />
I m not satisfied with the result of my layout whenever I test it in landscape mode on different screen size devices.
In portrait I like the margin of the textview. Since my current image size of the imageview will not fill the full width of some devices out there in landscape there is some whitespace left and right to it, which is fine.
however, the margin of the textview should also take this whitespace into account and add it somehow. I know i can create a different xml style for landscape modes, but any fixed margin wont help here... thanks for any help in advance
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/start1_8" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
<style name="DescriptionTitle" parent="#android:style/TextAppearance">
<item name="android:textColor">#0099cc</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textSize">20sp</item>
<item name="android:layout_gravity">center_vertical|left</item>
<item name="android:gravity">top|left</item>
<item name="android:layout_marginLeft">15dp</item>
<item name="android:layout_marginRight">15dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
I would put it in a Relative Layout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/Untitled-1" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
</RelativeLayout>
Then it will be in the correct relative position regardless of view size or orientation.
resize the view in runtime and use(like screenwidth/4 ) a ratio hor image width and position.
use LayoutParams to do it.
I'm trying to create menu layout where I can place buttons in two colums with same width.
I don't want to stretch buttons to fill all screen (unless there are long lables).
I want all buttons to have same width - the width of the button with the longest label.
I'm trying two vertical linear layouts inside one horizontal linear layout.
All solutions that I found suggest to use same layout_weight for vertical linear layouts and layout_width=fill_parent for horizontal layout which is forcing buttons to occupy entire screen width.
Is there any common solution for my problem?
This is what I expect - https://dl.dropbox.com/u/2751770/android-layout1.PNG
This is how common solution looks like - https://dl.dropbox.com/u/2751770/android-layout2.PNG
And here is code which I'm using as a common solution:
<LinearLayout style="#style/menuLayout"
android:layout_width="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<Button style="#style/menuButton"
android:text="Title 1"/>
<Button style="#style/menuButton"
android:text="Title 2"/>
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<Button style="#style/menuButton"
android:text="Title 3"/>
<Button style="#style/menuButton"
android:text="Long title 4"/>
</LinearLayout>
</LinearLayout>
Styles:
<style name="menuLayout">
<item name="android:layout_gravity">center</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
</style>
<style name="menuButton">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:paddingLeft">30dp</item>
<item name="android:paddingRight">30dp</item>
<item name="android:layout_margin">5dp</item>
</style>
You are setting the width in the style "menu_layout" and also again in the second line of your code.Remove one of them. And try using android:weightSum="1" in the parent LinearLayout and then android:layout_weight="0.5" in each LinearLayout.
I'm trying to organize two TextViews to behave like that:
So, if there is enough space for both TextViews in line, android should place them in line.
If there is not enough space, the second TextView must be placed on the next line with right alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
</LinearLayout>
<style name="flightItem" parent="#android:style/TextAppearance">
<item name="android:textSize">14dip</item>
<item name="android:textColor">#color/flightItemFont</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textStyle">bold</item>
</style>
To accomplish what you are looking for you could change you're layout to a RelativeLayout and add android:layout_alignParentLeft="true" to your TextViews, however, this doesn't set these TextViews to act dynamically. Meaning if they can fit side-by-side then they should be in-line but the bottom TextView will still align to the right.
I don't think what you are looking for is technically possible. However this may be a good alternative:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
style="#style/flightItem" />
</RelativeLayout>