I'm trying to create a custom multiple choice alert dialog that allows the user to select/deselect all items in one click.
I achieve this using a custom title with an additional checkbox.
Everything works fine except that I don't know how to make my custom title looking like the default alert dialog title (using the same style).
Here is what I'm trying to do (The example uses the theme in the Dialogs documentation. That's just an example, what I really try to have is the application theme).
I created a custom view for the custom title I use, but I don't know how to get the attributes of the default style title bar, so, I obtain:
(No blue bar below the title, and wrong title color)
Here is the layout of my custom title:
<?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="fill_parent" >
<TextView
android:id="#+id/title"
style="?android:attr/textAppearanceLarge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Dialog title" />
<TextView
android:id="#+id/all"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
It seems obvious to me that I need to define the title attributes, and the background of the layout ... but I'm crawling the web since hours searching how to get the attributes of default title view.
Any idea?
See if this is what you are looking for:
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="22sp"
android:textColor="#ff33b5e5"
android:text="Dialog title" />
<TextView
android:id="#+id/all"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View android:id="#+id/titleDivider"
android:layout_width="match_parent"
android:layout_height="2dip"
android:background="#ff33b5e5" />
</LinearLayout>
How I got this:
Browse to the sdk directory on your hard drive > platforms > android-XX(17, for example) > data > res > layout > dialog_title_holo.xml. Look at the View with id titleDivider. It's background attribute: background="#android:color/holo_blue_light". Look up the value of this color in res/values/colors.xml.
From styles_device_defaults.xml:
<style name="TextAppearance.DeviceDefault.DialogWindowTitle" parent="TextAppearance.Holo.DialogWindowTitle" >
Looking at styles.xml:
<style name="TextAppearance.Holo.DialogWindowTitle">
<item name="android:textSize">22sp</item>
<item name="android:textColor">#android:color/holo_blue_light</item>
</style>
The textColor is the same as the line color. Text size is specified as 22sp. And, style="?android:attr/textAppearanceLarge" is not required because we are setting the textSize="22sp":
<style name="TextAppearance.Large">
<item name="android:textSize">22sp</item>
</style>
If you just want to use the device default, without needing to customize or extend anything, you can simply add:
android:textAppearance="#android:style/TextAppearance.DeviceDefault.DialogWindowTitle"
to the title view in your xml layout. This will show a different style based on the devices theme.
If you ALWAYS want to show the blue (Holo Theme) title, regardless of the device defaults, then you can add:
android:textAppearance="#android:style/TextAppearance.Holo.DialogWindowTitle"
instead.
Related
I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I was needed to create a custom title view to be able show message and title, when the list appears. Because the list appears in the dialog's content area. So the dialog cannot show both a message and a list.
My custom view is a LinearLayout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="24dp"
android:paddingBottom="20dp"
style="#style/Base.Theme.AppCompat.Dialog.Alert"
>
<TextView
android:id="#+id/alert_dialog_custom_title_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:textSize="20sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/alert_dialog_custom_message_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"/>
</LinearLayout>
Padding values and text size was given in accordance with the information given material design guidelines
However, This appearance is different from the default one.
my question:
How can I create a textView that has a same style with default one ?
Maybe there is a way like setting a style to my TextView
Edit : I just want to set style attribute that makes its visuality same as default AlertDialog.
My textview is already like this:
<TextView
android:id="#+id/alert_dialog_custom_title_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="messsage"
android:layout_marginBottom="20dp"
android:textSize="20sp"
android:textStyle="bold"
/>
I want to do that just like this :
<TextView
android:id="#+id/alert_dialog_custom_title_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="messsage"
style="?android:attr/titleTextStyle"
/>
In your style you can use this
<style name="TextAppearance.AlertDialogPro" parent="android:TextAppearance" />
for you textview you can add style
<TextView
android:id="#+id/alert_dialog_custom_title_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="messsage"
style="#style/TextAppearance.AlertDialogPro"
android:layout_marginBottom="20dp"
android:textSize="20sp"
android:textStyle="bold"
/>
I have an Android app with a GridView where each item is a LinearLayout of two Buttons and two TextViews. When I set the LinearLayout's background color to white, the buttons are grey. However, if I change the background color, the surface of the buttons also get tinted with that color. How can I prevent this?
Example with strong color:
Buttons should be light gray, not reddish-gray.
Grid item layout XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"
android:background="#drawable/grid_cell_max">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="+"
android:includeFontPadding="false"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:id="#+id/buttonPlus"
android:layout_gravity="center_vertical"
android:textSize="24sp"
android:gravity="center_vertical|center_horizontal" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="-"
android:textSize="24sp"
android:includeFontPadding="false"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:id="#+id/buttonMinus"
android:layout_gravity="center_vertical"
android:gravity="center_vertical|center_horizontal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="1dp"
android:paddingBottom="2dp"
android:orientation="vertical">
<TextView
android:id="#+id/buildingTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="1"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="2"
android:shadowColor="#android:color/darker_gray"
android:ellipsize="end"
android:textSize="15sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/buildingInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11sp"
android:lines="2"
android:ellipsize="end"
android:lineSpacingExtra="-2dp"/>
</LinearLayout>
</LinearLayout>
drawable/grid_cell_max.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle" >
<solid android:color="#ffe6ffe3"/>
<stroke android:width="1dp" android:color="#c0c0c0"/>
</shape>
Unfortunately, I don't think there's an easy way to do this. The way I resolved this issue was:
Use Android holo colors generator to generate new resources:
Make sure to select the color you need for your button (under 'Theme Name')
Make sure to switch 'Colored Button' to 'Yes'
Download the archive and unpack it.
Merge only the drawable folders from the unpacked project into yours (only the button image resources and the button selector xml file - located in drawable)
Set the background of your buttons to:
android:background="#drawable/apptheme_btn_default_holo_light"
You'll now have a opaque button with the color you selected from the android holo colors generator.
If you want all your app buttons to behave the same way, you'll have to update the app theme. To do this, follow the steps above and afterwards update your 'styles.xml' file:
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Holo.Light.Button">
<item name="android:background">#drawable/apptheme_btn_default_holo_light</item>
</style>
Also, if you do this, you can remove the button background from xml. I couldn't find another solution if you want to keep the 'Theme.Holo.Light' app theme.
I'm creating small widget and I'm getting pretty frustrated with it. Earlier I was just setting colors as I seen it and it was ok. But now I would like to make it to match system theme settings. How it can be achieved?
As I was requested to post some code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="#dimen/widget_margin"
android:orientation="vertical"
style="#android:style/Theme.Holo.Light">
<!-- pasek górny z przyciskiem dodawania -->
<GridLayout
android:layout_width="fill_parent"
android:layout_height="37dp"
android:rowCount="1"
android:columnCount="2"
android:id="#+id/Header"
android:background="#android:color/holo_blue_dark">
<ImageButton
android:layout_width="37dp"
android:layout_height="37dp"
android:id="#+id/AddButton"
android:layout_row="0"
android:layout_column="1"
android:contentDescription="Add" />
</GridLayout>
<!-- panel z wiadomościami -->
<ListView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:id="#+id/ListView"
android:layout_weight="1"
style="#android:style/Widget.Holo.ListView"
android:background="#android:color/holo_green_light" />
<!-- stopka widgetu -->
<GridLayout
android:layout_width="fill_parent"
android:layout_height="37dp"
android:rowCount="1"
android:columnCount="2"
android:layout_gravity="end"
android:id="#+id/Footer"
android:background="#android:color/holo_blue_dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/copyright"
android:id="#+id/textView"
android:layout_column="1"
android:layout_row="0"
android:textColor="#android:color/white"
android:layout_gravity="center_vertical" />
</GridLayout>
</LinearLayout>
I want my widget to blend in system this time. As I can use themes which provide some icons, some colors and graphics I would my widget to use those colors to match other components. Is it possible?
If you don't set any android:color, android:background or such, the views will inherit colours from your theme.
So first make sure you are inheriting from a theme that satisfies you.
<style name="MyStyle" parent="Theme.Material">
</style>
About your widgets, if their natural tint is not what your looking for, then you have to customize the above mentioned theme from styles.xml. You can easily find how to style buttons, listviews and such.
Here is an example for buttons:
<style name="MyStyle" parent="Theme.Material">
<item name="android:ButtonStyle">#style/MyStyle.Buttons</item>
...
</style>
<style name="MyStyle.Buttons" parent="Widget.Material.Button">
<item name="android:background">#color/my_color</item>
...
</style>
First you say that all buttons should be styled from MyStyle.Buttons. Then you define MyStyle.Buttons and add all the features you want. This way all your buttons will have the same background, and you don't need to do it by hand.
There's plenty of questions about this topic.
I'm working on this app and I have implemented a photo slider through ViewPager. There is an imported circle page slider indicator, a project on github. It looks like this: (Sorry for the blured text, I'm not able to share the content until release. The app will be free)
My problem is that thin blue line on the top of the screen. Blue color comes from the background and it is set in the root layout of the activity. No matter what I do to the any of the layouts (changing margins or padding to negative values) this line remains there.
So I figured that it has to do with the chosen theme for the screen. Theme is set to a custom theme which has Theme.NoTitleBar as it's parent. The code is below:
This is the style file. Taken from http://viewpagerindicator.com/ by Jake Wharton.
<style name="Theme.PageIndicatorDefaults" parent="android:Theme.NoTitleBar">
<!--<item name="vpiIconPageIndicatorStyle">#style/Widget.IconPageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>-->
<item name="vpiCirclePageIndicatorStyle">#style/Widget.CirclePageIndicator</item>
</style>
This is my activity layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/accountRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradientbg"
android:orientation="vertical"
android:gravity="bottom">
<RelativeLayout
android:id="#+id/titleBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
/>
<io.colomb.android.colombio.customviews.CirclePageIndicator
android:id="#+id/slideIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#id/viewPagerSlider"
android:layout_marginBottom="20dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivSoftboardLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logosoftboard"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/app_name"
android:layout_marginTop="10dp"
android:visibility="gone"
android:layout_marginBottom="15dp"
/>
<LinearLayout
android:id="#+id/InputFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.001"
android:layout_marginTop="-15dp"
>
</LinearLayout>
Any thoughts are appreciated.
OK solved. The thing that was bothering the adapter was the line gravity="bottom"in the root element. Also the pictures needed to be cropped more