Android custom dialog linearlayout size same as dialogs bg image - android

I am creating a custom dialog as:
Dialog myDialog = new Dialog(context, R.style.Theme_Levels);
myDialog.setContentView(R.layout.levelselector);
myDialog.show();
Style used:
<style name="Theme.Levels" parent="#android:style/Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowBackground">#drawable/dlgbg</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Layout xml file:
<LinearLayout android:id="#+id/LevelSelector"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center_horizontal"
android:paddingBottom="50dip"
>
<Button android:text="Easy"
android:id="#+id/btn_Easy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I want the button to appear at bottom center of the dialog (50dip padding from bottom) but it appears at top left of the Dialog.
Thats because LinearLayout does not know the width/height of the dialog, which is the size of the background image I have used in style xml file.
Question: How do I know the width height of the dialog so that LinearLayout is of the same size as the Dialog size?

Here is how you can do this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LevelSelector"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:paddingBottom="50dip" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button android:text="Easy"
android:id="#+id/btn_Easy"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Change android:layout_gravity="bottom|center_horizontal" to android:gravity="bottom|center_horizontal".
android:layout_gravity is gravity of the layout itself w.r.t. its parent. android:gravity applies to its contents.

i had the same problem in my case i ended up using a RelativeLayout
here it is.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/body" android:layout_margin="20dip"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/dialog_bg"
>
<TextView android:id="#+id/message"
android:layout_alignParentTop="true"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_margin="10dip"
android:inputType="textMultiLine"
android:textColor="#color/table_text"
android:textScaleX=".95" android:textStyle="bold"
/>
<TextView android:id="#+id/dummy" android:layout_below="#id/message"
android:layout_width="fill_parent" android:layout_height="60dip"
android:visibility="invisible"
/>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="10dip" android:layout_below="#id/message"
android:layout_centerHorizontal="true" android:orientation="horizontal"
>
<ImageButton android:id="#+id/ok"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_alert" android:src="#drawable/btn_yes"
android:visibility="gone" android:layout_weight=".5"
/>
<ImageButton android:id="#+id/cancel"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_alert" android:src="#drawable/btn_no"
android:visibility="gone" android:layout_weight=".5"
/>
</LinearLayout>
</RelativeLayout>

Ok, I have found a way, not a clean way but works.
You need to add background in style.xml file
<item name="android:windowBackground">#drawable/levelselectbg</item>
AND also in you linearlayout:
android:background="#drawable/levelselectbg"
The first background is required to keep the dialog borderless (which I have specified in my style.xml in my question) and the linearlayout background is required to give size to the layout, now it knows its dimensions and places the button at bottom center with padding.
Hope this helps someone, if a better solution is available please share.

Related

Custom dialog becomes the size of the first control in android

I have the following layout for my custom log in dialog
<?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:padding="#dimen/padding_large">
<ImageButton android:src="#drawable/ic_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialog.login.settings"
android:padding="#dimen/margin_medium" />
<TextView android:text="#string/dialog.login.text.user_name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.user_name"
android:layout_width="match_parent"
android:gravity="center"
android:ems="20"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:text="#string/dialog.login.text.password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.password"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox android:id="#+id/dialog.login.show_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dialog.login.check.show_password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_margin="#dimen/margin_medium"
android:checked="false" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="#+id/dialog.login.cancel"
android:drawableStart="#drawable/ic_exit_black"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_medium"
android:text="#string/dialog.login.button.cancel" />
<Button android:id="#+id/dialog.login.connect"
android:text="#string/dialog.login.button.connect"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_marginStart="#dimen/margin_medium"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
when I create the dialog and setcontentview the width of the dialog becomes equal to that of the image button on the first row
if I remove that , it becomes the size of the EditText (dialog.login.user_name) whose ems is 20
when I make the dialog's constructor call the base dialog constructor with a theme of R.style.Theme.Material.Dialog it does get the correct (about 3/4 of the screen) but the problem is that it ignores my primary and accent colours (which is normal)
Is there a way to have the dialog have the Theme.Material.Dialog size but still keep my own primary/accent colours?
thanks in advance for any help you can provide
After a lot of searching it seems that the solution is to actually replace the dialogTheme attribute of my main theme, so the solution was:
<style name="app.theme"
parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
<item name="android:dialogTheme">#style/app.dialog</item>
......
</style>
<style name="app.dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary.dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>

Too long TextView makes other Views disappear

How to stop checkbox from disappearing in code below when text in the TextView is too long? I'm not interested in hardcoding max_width for the TextView and I want to display my whole text.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight="0"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="1"/>
</LinearLayout>
styles.xml
<style name="Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:padding">#dimen/margin</item>
<item name="android:textSize">#dimen/text</item>
<item name="android:textAlignment">center</item>
</style>
I would use weight. Add android:weightSum to your LinearLayout with value 1.
For each element in your LinearLayout add weight. For example 0.8 for textview and 0.2 for Checkbox.
Then set width to 0dp for each element !
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight="0.8"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="0.2"/>
</LinearLayout>
And update your style :
<style name="Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">0dp</item>
<item name="android:padding">#dimen/margin</item>
<item name="android:textSize">#dimen/text</item>
<item name="android:textAlignment">center</item>
</style>
If you are about to display large data on textview, i suggest to use scroll view in your parent layout.
I'm late for this but I hope to help smn with this issue. Have same problem checkBox make TextView unreachable for LinearLayout, both checkBox and textView need to have this line in xml:
android:layout_gravity="center_vertical"
use text view weight = 1 and other view as wrap_content so size of other view not change according your text
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight=""
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="wrap_content"/>
</LinearLayout>
If you want text to go in new line (use RelativeLayout):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#id/checkbox" />
</RelativeLayout>
Another solution is to use this lib to shrink text:
https://github.com/grantland/android-autofittextview
I would suggest to use RelativeLayout to maintain uniformity in UI. Below is sample Relative layout code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_toLeftOf="#+id/cb"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_alignParentEnd="true"/>
</RelativeLayout>

Android how to use auto-layout to move other views when a view is hidden?

I wanted to make resizable views when one of them is hidden. The question is already asked for iOS in the following link. I wanna make it for android. Any helps are appreciated. I wanted to add free space to three TextViev: position, stat_name, price after setting visibility hidden to count and discount
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="30dp"
android:weightSum="100" >
<TextView
style="#style/list_titles_style"
android:layout_weight="10"
android:text="#string/position" />
<TextView
style="#style/list_titles_style"
android:layout_weight="35"
android:paddingLeft="15dp"
android:text="#string/stat_name" />
<TextView
style="#style/list_titles_style"
android:layout_weight="20"
android:text="#string/price" />
<TextView
android:id="#+id/count_label"
style="#style/list_titles_style"
android:layout_weight="10"
android:visibility="invisible"
android:text="#string/count" />
<TextView
android:id="#+id/discount_label"
style="#style/list_titles_style"
android:visibility="invisible"
android:layout_weight="25"
android:text="#string/discount" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="1dp"
android:background="#drawable/border_layout"
android:orientation="horizontal" >
<ListView
android:id="#+id/stats_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_marginBottom="5dp"
android:divider="#drawable/list_divider"
android:dividerHeight="2dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp"
android:paddingTop="0dp" />
</LinearLayout>
And my style here it is:
<style name="list_titles_style">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textColor">#color/Blue</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
</style>
I have gone through the provided link...To remove the left side view just set the android:visibility="gone" for the view in your xml layout file....if you want remove programmatically try view.setVisibility(View.GONE);....
You can achieve this using LinearLayout with match_parent parameter depending on what orientation you desire. So you might set weights for each child view and also put an stub view in order to stretch out the size.
Note that if you hide your views with INVISIBLE flag they will hold the space whereas with GONE it's like the view never been there.
Hope that helps.

Centering CheckBox Views

If you're interested in RadioButtons in addition to (or instead of) CheckBoxes, see this question instead.
Despite the presence of
<item name="android:layout_gravity">center_horizontal</item>
in the style file, the two checkboxes are not centered, but appear "left-justified".
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/cb1"
style="#style/CB_style" />
<CheckBox
android:id="#+id/cb2"
style="#style/CB_style" />
</LinearLayout>
res/values/styles.xml
<style name="CB_style" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
<item name="android:checked">false</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
You have android:layout_weight = 1. So your checkboxes fill all width of screen.
Remove android:layout_weight from style and add margin between checkboxes.
Gravity in Checkbox don't affect the inner tick button, only text.
EDIT
Ok, try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/cb1"
style="#style/CB_style" />
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/cb2"
style="#style/CB_style" />
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
</LinearLayout>
And remove layout_weight from style.
Another way is create custom checkbox. But I think it's too complicated for this problem.
Here's something that may help:
android:gravity vs android:layout_gravity
android:gravity is usually internal, usually asking the view itself what to do with the pixels it has
android:layout_gravity is usually external, usually asking the parent ViewGroup (LinearLayout/RelativeLayout/FrameLayout) how to position the view with extra pixels that the view is not using
If you are using a view with wrap_content, you probably want to use layout_gravity. If you are using a view with match_parent, you probably want to try gravity.
Sometimes wrapping another ViewGroup around a troublesome View can help with positioning. Views and ViewGroups go through an intricate "screen space" negotiating phase, and different Views (Buttons/TextView/ImageView/etc) and ViewGroups (LinearLayout/RelativeLayout/TableLayout/etc) have different rules and negotiating powers
This is why sometimes pairing a troublesome View with another parent like a FrameLayout or LinearLayout can make it behave all of the sudden
This is a little messy but it works, and yes it works as well for 3 or more checkbox inputs:
<LinearLayout
android:padding="0dip"
android:layout_width="0dp"
android:layout_weight="1"
android:hint="name"
android:layout_height="40dip"
android:textAlignment="center" android:layout_gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
<CheckBox
android:id="#+id/chk1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleX="1.5" android:scaleY="1.5"
>
</CheckBox>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
<CheckBox
android:id="#+id/chk2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleX="1.5" android:scaleY="1.5"
>
</CheckBox>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
</LinearLayout>
Try it in style
<item name="android:layout_width">0dp</item>
I hope it will work.. thanks..
<style name="TextlessCheckBox" parent="android:Widget.Material.CompoundButton.CheckBox">
<item name="android:button">#null</item>
<item name="android:foreground">?android:listChoiceIndicatorMultiple</item>
<item name="android:foregroundGravity">center</item>
</style>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#ff0000"
android:gravity="center" >
<CheckBox
android:id="#+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#00FF00"
android:gravity="center" >
<CheckBox
android:id="#+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
ok, last try for today ;) you should post a picture next time, HOW it should look... well, now you ll have your LinearLayout divided into two similar wide part (red & green), and in every block your checkbox is in the center...did i got it right this time?!
Just add this to your LinearLayout :
android:gravity="center_horizontal"
This line specifies that anything inside this layout will be in the center.
The Full layout code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<CheckBox
android:id="#+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox ONE"
/>
<CheckBox
android:id="#+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox TWO" />
</LinearLayout>
Here is the output i got :

How to center a RatingBar in Android

I have created a custom RatingBar as described in one of the tutorials given here on stack-overflow and it's looking great, the problem is with the centering of the image. here is what I've got:
As you can see the TextView is centered vertically in the LinearLayout, but the RatingBar is at the top of it. Here is my xml code of this image:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center" >
<LinearLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
style="#style/starsRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="2.3"
android:stepSize="1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
Here is the code of the styling:
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_ratingbar_full</item>
<item name="android:minHeight">36dip</item>
<item name="android:maxHeight">36dip</item>
</style>
Any ideas in the RatingBar would be apprisiated!
THANKS
Ok, I think I've got it.
The key issue is the ScrollView: it automatically makes things compact, unless you specifically tell it otherwise. In the scroll view, set
android:fillViewport="true"
to make it use the space available.
Hello to get all items at top you have to put:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="TextView" />
instead of:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
if you just want the rating bar centred:
just remove style="#style/starsRatingBar"
EDIT:
forget any think I said befor, it seems to work better when I changed the style to : (adjust your min/max height to get "perfect result" )
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#android:drawable/star_on</item>
<item name="android:minHeight">26dip</item>
<item name="android:maxHeight">26dip</item>
</style>

Categories

Resources