AppCompat Dialog theme's margins and background with circular reveal - android

I am having some difficulties..
I want to mimic Floating Search Widget as seen in Google I/O 2015 app - seen bellow.
So far I managed to put my second(search) activity into a dialog with Theme.AppCompat.Light.Dialog theme. I followed the steps shown here https://stackoverflow.com/a/32199671/2674529 to ger circular reveal effect working.
Second activity style is defined in Theme.Transparent
<style name="Theme.Transparent" parent="Theme.AppCompat.Light.Dialog">
<item name="android:windowIsTranslucent">false</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="windowNoTitle">true</item>
</style>
Note: Greenish color is green color with alpha and is the background of the root layout of the second activity.
The problem is transparency of the dialog's background.
If I comment out the
<item name="android:windowBackground">#android:color/transparent</item>
from the theme, then the dialog's background is whitish - as seen bellow.
If I uncomment the line I get a "dialog" without any border nor margin - seen bellow.
Does anyone have any ideas? Thanks
PS. xml of the dialog/activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8800FF00">
</FrameLayout>
</android.support.v4.widget.DrawerLayout>

Related

Why the background color of the top bar changes automatically not as I set it? Material Design 3

I'm trying to change the background color of the top bar and make it like the main background. I'm using Material You (MD3).
The user can change from light mode to dark mode or vice versa.
Here is what I tried to do:
values\themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.App" parent="Theme.Material3.Light.NoActionBar">
<item name="android:colorBackground">#color/md_theme_light_background</item>
...
</style>
</resources>
values-night\themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.App" parent="Theme.Material3.Dark.NoActionBar">
<item name="android:colorBackground">#color/md_theme_dark_background</item>
...
</style>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="md_theme_light_background">#FCFDF7</color>
<color name="md_theme_dark_background">#1A1C19</color>
...
</resources>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activities.MainActivity">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?android:attr/colorBackground"
android:elevation="4dp"
app:title="#string/app_name" />
...
</LinearLayout>
The result (Dark mode)
As you can see the background color of the top bar must be #1A1C19 but it became #222E22, From where did the #222E22 come?
I tried to find anything talking about this inside MD3 documentation, But did not find anything. Could you tell me why the color is changing automatically?
Note: If I changed md_theme_dark_background from #1A1C19 to #1A1C18, The background color of the top bar will be the same as the main background and will not change. But when return it to #1A1C19 it will convert it to #222E22.
Is this normal behavior or it is a bug?
Thank you.
The different color is due to elevation overlay.
You can either remove the elevation or disable the elevation overlay.
To disable elevation overlay in the theme add this line in your theme :
<item name="elevationOverlayEnabled">false</item>
To disable it only for the materialToolBar :
<style name="Card" parent="Widget.Material3.Toolbar.Surface">
<item name="materialThemeOverlay">#style/ThemeOverlay.Card</item>
</style>
<style name="ThemeOverlay.Card" parent="ThemeOverlay.Material3.Toolbar.Surface">
<item name="elevationOverlayEnabled">false</item>
</style>
Then add this line in your materialToolBar xml code :
style="#style/Card"

Change the default color of main activity when it starts, The starting and opening default color

When user opens any application by clicking on app icon, the app starts with mainactivity.java. and its xml layout is shown to user.
I am making a splash screen with simple background color and text. But what my problem is, when it starts it shows a default layout color for a very little fraction of time and then it draws my given color. I do not want default color to be there even for that small fraction of time.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rushi.demon.MainActivity"
android:background="#color/SplashScreen" >
<RelativeLayout
android:id="#+id/SplashScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/SplashScreen">
<TextView
android:id="#+id/SplashText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/splash_name"
android:textColor="#color/SplashText"
android:textSize="40sp"
android:textStyle="bold"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
The SplashScreen color is shown after a lag and starting default color is shown for little time, which i do not want. I want to open this activity with my set color only from starting.
Add this to your AppTheme (theme of MainActivity) ..
<item name="android:windowDisablePreview">true</item>
Edit
Go to app -> res -> values -> styles.xml open styles.xml there you do this to the theme you have..
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowDisablePreview">true</item> //add this line
</style>
The best way to achieve this is well described here, By this way Splash Activity will start instantly
Refer this: https://medium.com/#ssaurel/create-a-splash-screen-on-android-the-right-way-93d6fb444857

My splash screen image always gets some rounded white corners

I've tried adding and substracting a lot of stuff but whenever my splash screen gets launched there is always a round corner or a type of elevation in the image.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3c3734"
tools:context="com.example.akshay.athleticgo.SplashScreen">
<ImageView
android:id="#+id/splash_logo"
android:adjustViewBounds="true"
android:elevation="0dp"
android:fitsSystemWindows="true"
android:background="#3c3734"
android:src="#mipmap/ath_splash"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</FrameLayout>
and this is my style am using
<style name="Theme.Transparent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsTranslucent">true</item>
</style>
As you are using image from mipmap folder and mipmap is only for launcher icons. Most of the cases launcher icon has gradient border/shadow. I think your image has this gradient border. Check your image first.
Best practice is to put image resource files into drawable folder and use(android:src="#drawable/ath_splash") it into views as per your needs.

how to show an activity over another on half of the screen in the right position?

I am new in android.
I have 2 activities and I want to show the second activity over the first one, but the second activity has a layout:width : 250dp and layout height is fill-parent(fill the screen) and start from the right of the screen.
How can I do that?
I want something like this
screen
You can make a transparent theme for the second activity so it is shown as a floating window. Then for the second activity, restrict the width of the view layout inside a Viewgroup that defines the position.
Here is my style definition for the Transparent theme. Setting this, f.e. in the Manifest <activity> declaration, makes it possible to achieve a floating activity on top of the other:
<style name="Theme.Transparent">
<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>
</style>
The layout is like this, for example, showing a CardView from the right (end):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="top|end">
</android.support.v7.widget.CardView>
</FrameLayout>
I wonder why you would fixate the width to 250, what would happen on bigger/smaller devices? Maybe better to define a margin or padding...?

changing the titlebar results in not showing (fonts issue) the listview items

I want to change the title bar color .Following the instructions here
, or eliminating the title bar with Notitle bar in AndroidManifest esults in not showing the text fonts in the list view (I use "simple_list_item_checked" listview).
Here is the xml for this activity:
<?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"
android:background="#FFFAFA"
>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/green_button"
android:text="#string/show_items_kfc"
android:onClick="onClick"/>
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
(the rest of xml code is the same as the link above)
Any solutions to this?
Thanks!
If I got the problem:
Instead of parent="android:Theme":
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTheme" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
</resources>
Use parent="android:Theme.Light":
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTheme" parent="android:Theme.Light">
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
</resources>
The problem is that you are overriding the native Black theme which has black background and white letters. By switching to Light theme you achieve the black letter also have your own white background!
Note: After that you may have to fix custom theme colors (eg. title text color force to white) to white/black if they do not fit the UI you need.
you can use the titlebar object for the purpose...
the link below gives the good explanation on how to do that...
Title bar color change issues

Categories

Resources