I'm developing new android app that shows coffee drinks using google material design components. after I migrate my project to Androidx the style won't applying to MaterialCardView IDK what the problem or why this is happening!!.
I tried to upgrade my gradle files, using latest material library version and search over the web couldn't see any similar problem.
<!--this is the card layout:-->
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coffee_card"
style="#style/CoffeeItemStyle"
android:layout_width="180dp"
android:layout_height="200dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="#dimen/cardview_margin"
android:layout_marginRight="16dp"
android:layout_marginBottom="#dimen/cardview_margin">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/coffee_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/coffee_drink_image"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/coffee_name"
style="#style/CoffeeNameStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="Name"
app:layout_constraintBottom_toTopOf="#+id/coffee_image"
app:layout_constraintStart_toStartOf="#+id/coffee_image"
app:layout_constraintTop_toBottomOf="#+id/coffee_image"
app:layout_constraintVertical_bias="0.82" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<!--this is the style(CoffeeItemStyle):-->
<style name="CoffeeItemStyle" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">#android:color/white</item>
<item name="cardCornerRadius">#dimen/cardview_radius</item>
<item name="cardElevation">#dimen/cardview_elevation</item>
<item name="android:clickable">true</item>
<item name="android:stateListAnimator">
#animator/shr_next_button_state_list_anim
</item>
</style>
I expect the card view to appear in 4dp radius, 8dp elevation, white background and changing the Z-axis when the card view is clicked.
the image below shows what It looks like after the migration
Related
I can't tell if this is an issue with the material library or from my end.
I'm trying to show two buttons aligned horizontally. However, the first one is showing as it's supposed to show but the other one is not showing as expected.
Here's how the buttons look in Android Studio's layout editor: (expected behavior)
And this is how it shows on a mobile device: (wrong behavior)
My XML is like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="17dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="12dp"
android:layout_marginEnd="7dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/share_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#424242"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#2D2D2D" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_get_app_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#color/colorPrimaryDark" />
</RelativeLayout>
I'm avoiding using the weight attribute. (tested it as well but still getting the same behavior).
If you guys have any idea how to solve this issue is appreciated.
You can create an xml drawable file for MaterialButton.
btn_drawble.xml =>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#2D2D2D">
<item android:id="#android:id/background">
<shape android:shape="rectangle" >
<corners android:radius="12dp" />
<gradient
android:startColor="#color/color_blue"
android:endColor="#color/color_blue"
android:angle="0"/>
</shape>
</item>
</ripple>
And Set background of button created xml file =>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:elevation="5dp"
app:fontFamily="#font/whitney"
android:background="#drawable/btn_drawble"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"/>
You'll need to use a material theme.
Set the parent of your app of your AppTheme to a material theme ex: Theme.MaterialComponents.Light.NoActionBar.
Material components require a material theme as parent to work correctly
It seems like it was my fault, I didn't notice that I was changing the button shape dynamically.
Unfortunately, I can't delete this question because Stackoverflow doesn't allow me.
:(
I need to change the font size, the font itself, and center the text in the ToolBar.
I took a template from Bottom Navigation Activity studio.
I was trying setting the text size in themes.xml (I was able to change the background color and text color there)
<style name="CustomToolBarStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="titleTextColor">#color/black</item>
<item name="android:background">#color/white</item>
I was trying to use this option in themes.xml:
<item name="android:gravity">center</item>
It didnt help. I tried to follow this instruction:
https: //stackoverflow.com/questions/26533510/android-toolbar-center-title-and-custom-font Throws android.support.v7.widget.Toolbar into an error and get a crash.
ToolBar
NavbarTemplate
For API level 21+ you can use app:titleTextAppearance property of toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/yourstyle" />
and override the default title size in a custom style:
<style name="yourstyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">yourFont</item>
</style>
For centering, you should follow this answer and if this and none of the other answer works for you from the same post https://stackoverflow.com/a/38175403/9917400, than just use a linear layout inside Toolbar.
You can set constraint-layout inside the toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:textColor="#color/blue"
android:textSize="16sp"
app:fontPath="fonts/xxx" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
If you're using androidx don't use android.support.v7.widget.Toolbar.
You have to use androidx.appcompat.widget.Toolbar.
Create toolbar.xml in res/layout.
Put this code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="yourToolBarBackgroundColor"
>
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TestToolBar"
android:fontFamily="yourFont"
android:textSize="yourSizeOfText"
android:textColor="yourTextColor" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/activity_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Disable ActionBar in themes.xml:
<style name="Theme.YourProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
For night theme you have to do same thing in themes.xml(night)
Then in MainActivity.java in onCreate:
setContentView(R.layout.toolbar);
How can I make this? It looks nice and I'd like to use something like this.
The lines at the top should correspond to the end of the title
Actually, these types of view are mostly done with custom views.
This tutorial is useful for custom views.
But you can cheat a little bit, create backgound.xml inside the drawable folder, and paste the code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/blue" android:width="4dp"/>
<corners android:radius="10dp"/>
<solid android:color="#color/white"/>
</shape>
then create custom_background.xml for your layout, and paste the following code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:background="#drawable/background"
android:layout_marginTop="15dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="20sp"
android:textAlignment="center"
android:textColor="#color/blue"
android:layout_gravity="center"
android:text="Something"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:padding="2dp"
android:textColor="#color/blue"
android:textSize="25sp"
android:background="#color/white"
android:layout_marginStart="50dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Then you will get the following picture
Note
I am using androidX
Instead of LinearLayout you can place any layout
1) Migrate your project to androidx.
2) Include dependency in your build.gradle:
implementation 'com.google.android.material:material:1.0.0'
3) Use in your layout:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_height="wrap_content"
android:hint="#string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
4) Don't forget to change your Base Application Theme AppTheme to Material Component theme.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
You need to use material component theme!!
I want to use my surfaceView as the background of my activity
but there is my problem:
if I set setZOrderOnTop(true); it will cover the entire screen on top of everything and nothing is visible on it and if I set it to false surfaceView will be invisible.
here is my activity layout:
<?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=".views.activities.IntroActivity">
<!--this is my custom surface view-->
<ir.example.app.views.custom.noise3
android:id="#+id/intro_noise"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/introPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/nextIntro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:src="#drawable/next_round_btn_shape"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/lastIntro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:src="#drawable/back_round_btn_shape"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
EDIT: This is my viewPager fragment's layout
<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">
<com.hosseinkud.toolbox.utiles.CTV
android:id="#+id/introTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="88dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="some nice text"
android:textColor="#color/white"
android:textSize="#dimen/textVeryLarge"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/introPic"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#drawable/tvtest"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/introTitle"
app:layout_constraintVertical_bias="0.0" />
and this is screenshot when I set setZOrderOnTop(true);:
At the end, I found the answer myself and you should handle it like following by adding setZorderOnTop(false); to your activity and below code to your appTheme :
<style name="Theme.Transparent" parent="AppTheme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
But I suggest that you simply use textureView instead of surfaceView
it prevents tons of issues you might have and you don't even need to use a transparent background too.
so i'm trying to make an app with buttons, pictures and a tab bar but they don't appear when I drop the button to the virtual phone in android studio.
this is the mainactivity.xml. How can I fix this? This is all description I can give. If you need more, just comment ill try my best to give you more description.
<?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="#0099cc"
tools:context=".FullscreenActivity">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<TextView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="#string/dummy_content"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/fullscreen_content_controls"
style="?metaButtonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent">
<Button
android:id="#+id/dummy_button"
style="?metaButtonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/dummy_button" />
</LinearLayout>
</FrameLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#color/colorAccent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton" />
<ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:visibility="visible" />
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextureView
android:id="#+id/textureView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
Try this solutions
Invalidate Cache & Restart
Try Changing theme like AppTheme to Material Light or whatever you want
Clean & Rebuild Project
Done Now you can see the element in Virtual Phone of android studio
Follow below steps:
Go to your res folder and inside res folder.
Go to values.
Go to style.xml
change <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
to <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">