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.
Related
So I have 3 vertical aligned TextViews. The second one has a larger font size.
Now, if the second TextView holds a string starting with e.g. a 'B' it looks like the View is indented:
Here's my XML layout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView style="#style/TextAppearance.LabelSmall"
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1" />
<TextView style="#style/TextAppearance.LabelBig"
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B TextView2" />
<TextView style="#style/TextAppearance.LabelSmall"
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView3" />
</LinearLayout>
And here's the corresponding styles.xml file:
<resources>
<style name="TextAppearance.LabelBig" parent="TextAppearance.MaterialComponents.Headline3">
<item name="fontFamily">#font/opensans_regular</item>
<item name="android:fontFamily">#font/opensans_regular</item>
<item name="android:textSize">48sp</item>
</style>
<style name="TextAppearance.LabelSmall" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">#font/opensans_regular</item>
<item name="android:fontFamily">#font/opensans_regular</item>
<item name="android:textSize">16sp</item>
</style>
</ressources>
Is there any way to make these TextViews look equally indented?
Thanks for your help.
You don't need to use three textviews for single line text, just go for the spannable.
Find some info here: https://medium.com/androiddevelopers/spantastic-text-styling-with-spans-17b0c16b4568
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
If coloumn 3 has large text, column 2 disappears. Column 2 also disappears if I set android:stretchColumns="2,3". I'd like to set a minWidths to column 2. But this attribute is getting ignored.
I'm helping myself right now by setting android:stretchColumns="3" and android:shrinkColumns="3" and applying a maxWidth to the TextView on position 2. This almost does the job, but minWidth would be more the solution.
<TableLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:shrinkColumns="2,3"
android:stretchColumns="3" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="#string/id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="#string/person_id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
</TableRow>
<!-- I skipped the other rows -->
</TableLayout>
This is the used style, if you wonder:
<style name="overlay_content">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
Update:
As the answers came I found out more about my requirements which I summed up in this comment: How to shrink a TableLayout column to a minWidth?
Seems like this might be the practical workaround you need, so moving my comment to answer. Maybe this can be improved though, essentially be dilligent about setting these weights to suit your app
How about setting weight per column instead of android:shrinkColumns and android:stretchColumns . So for column 1 you could set 0.2 weight, 0.3 for column 2 and 0.5 for column 3 and so on
How to shrink a TableLayout column to a minWidth?
Actually it is simple, just TextView layout_width="wrap_content" can do
that, the reason not working in your style is that 'wrap_content' should
not work together with TextView 'ellipsize', they are conflict. So you need
one seperate syle 'overlay_slide' for the column that has long text.
So use 'overlay_content' for columns those have short text, use
'overlay_slide' for columns that have long text.
Besides I suppose the 'ellipsize' in your style is not working because
seems two items missing:
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
finally in the column that has long text, you also need:
android:layout_weight="1"
to use all rest of space for 'ellipsize'.
Remove android:shrinkColumns="2,3" android:stretchColumns="3" from TableLayout
Solution working styles and layout:
//remove 'ecllipze' related items from 'overlay_content'
<style name="overlay_content">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
</style>
//remove 'android:layout_width' from 'overlay_slide'
<style name="overlay_slide">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
<item name="android:ellipsize">marquee</item>
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:singleLine">true</item>
</style>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="#string/id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"/>
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="#string/person_id_label"
android:textStyle="bold"/>
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_slide"
android:layout_weight="1"
android:layout_marginLeft="4dp" />
</TableRow>
</TableLayout>
Screenshot from my testing: (Portrait and Landscape)
My test long text column is text 'Column 1 ... Column 8'
You cannot change the width of a column that way. The width is only defined by the widest row in that column. If you have no display there, there will be no width. You can adjust this by adjusting the textview for that row.
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"
android:minEms="4" <!-- You can use either of these -->
android:minWidth="40dp" />
The trade-off here is that you might run out of room and your other columns will run off the end, but you can adjust your text size to correct that, even if you have to overwrite your style with android:textSize="10dp"
This code appears to be working for me, but I also changed your TableLayout width from "0dp" to "match_parent".
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:shrinkColumns="3"
android:stretchColumns="*" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"
/>
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="person_id_label"
android:textSize="10dp"
android:textStyle="bold"
android:minEms="4"
android:minWidth="40dp" />
<!-- You can use either of these -->
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
</TableRow>
<!-- I skipped the other rows -->
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>
I have a LinearLayout which contains an ImageButton, and underneath that, a TextView as a label. I would like to have the TextView to be centered, and to have it wrapped to the width of the ImageButton it is underneath.
EDIT: I should probably put the code I'm currently using. Here's the LinearLayout with Button and TextView
<LinearLayout
android:id="#+id/contestLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/contestButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/contestsbtnimg"
android:layout_weight="1">
</ImageButton>
<TextView
android:id="#+id/contestLabel"
style="#style/MainMenuStyle"
android:text="#string/contests">
</TextView>
</LinearLayout>
And here's the relevant style declaration for the TextView:
<style name="MainMenuStyle" parent="android:style/TextAppearance">
<item name="android:textColor">#000000</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:textSize">12sp</item>
<item name="android:singleLine">false</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
What I want is for the ImageButton to be on top of the LinearLayout, with the TextView acting as a label underneath, and wrapping its text to a second line if it would be wider than the button.
You should at least try to find a solution yourself.
Or give some explanation why (and what) your own findings were.
Something like this should do the trick:
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="..."/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="...."/>
</LinearLayout>