Can't fully hide android material card background - java

Image how it looks
Can't fully hide android material card background. I have searched and watched all videos available but nothing has worked so far. I know I could just put something to fill the card but I want to know just in case.
The code:
<com.google.android.material.card.MaterialCardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#40000000"
android:clickable="true"
app:cardCornerRadius="30dp"
android:layout_margin="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Planner"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="20sp"
android:fontFamily="#font/nova_bold"/>
<ImageView
android:layout_width="150dp"
android:layout_height="130dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:padding="1dp"
app:srcCompat="#drawable/ic_plan_vec" />
</com.google.android.material.card.MaterialCardView>

please use in your XML app:cardBackgroundColor="#color/yourColor"
or in your java code card.setCardBackgroundColor(YourColor); instead of the default setBackgroundColor()
UPDATE
for the opacity change android:backgroundTint="#40000000" by android:alpha="0.4"

Related

How to curve a small part in a circular cardview in android to show the online status icon occupy at the bottom

I have used circular cardview to show the user status as online. But the circular has a small curve to occupy the status enable icon.
How can I acheive this in android. My code shows the circular image.
<androidx.cardview.widget.CardView
android:id="#+id/myCardView"
android:layout_width="70dp"
android:layout_height="70dp"
app:cardCornerRadius="50dp"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
>
</androidx.cardview.widget.CardView>
<ImageView
android:id="#+id/user_online_status"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_gravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="5dp"
android:layout_marginBottom="0dp"
android:visibility="visible"
android:src="#drawable/circle_green_posts"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|start"
android:layout_marginTop="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Username">
</TextView>
If I understood you question correctly, all you need to do is to put this inside some kind of parent layout (Relative, Constraint). Then simply put this circular shape to the bottom right, and above the card view.

Designing Android App UI for Tab and mobile

I am working on new app in which I have to take care of design over mobile devices and tablets.I already read on SO that for this thing I need to create several buckets for sizes to avoid bad look of app on larger or smaller screen at the same time. here is the code I am working on
[![<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_margin="35dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/lblLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoSizeTextType="uniform"
android:gravity="center"
android:padding="15dp"
android:text="My App Name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/colorPrimaryDark"
android:textSize="32sp" />
<!-- Email Label -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilLoginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etLoginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<!-- Password Label -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilLoginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etLoginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="12dp"
android:text="#string/btnLogin" />
</LinearLayout>
]
This is how the above code looks like on mobile phone (i.e Nexus 6)
**This is how the above code looks like on tablet (i.e Nexus 10)
Notice that on tablet is looking so bad. I know how to handle design in different design buckets. but I want to check if there is any
other solution without replicating the same design file in different
screen sizes buckets
Thanks in advance......
Instead of duplicate the layout try to:
avoid to hardcode the dimension in the layout.
use a ConstraintLayout
use the different qualifiers
For example the margin in your root view:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/login_layout_margin"
android:layout_marginEnd="#dimen/login_layout_margin"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/lblLogo"
..>
</LinearLayout>
Then create different dimension in different folder:
res/values/dimens.xml:
<dimen name="login_layout_margin">35dp</dimen>
res/values-sw600dp/dimens.xml:
<dimen name="login_layout_margin">350dp</dimen>
More details here.

Localization and language difference issue in android

I'll try to make this short, So I created this Bluetooth Connection app and everything works perfect in my phone but i noticed an awful problem when I tested it on my friend's phone.
the problem is I'm using Linearlayout and two different buttons with image background on it for each row which stands aside each other, the circle standing on the left side of the rectangle which is correct and that's how it works on my phone, but when it comes to my friend's phone which has a different Language ( Language and Input in android settings ) the circle is on the right side of the rectangle.
Please note that i already know the fact that this can be fixed if he change the phone language to English just like mine, But i'm looking for a solution which wouldn't cause any trouble for all type of costumers in my country with two different phone languages.
Well, How am i supposed to fix this ?
How it looks on my phone
How it looks on my friend's phone
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/activity_vertical_margin">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="200dp">
<Button
android:layout_width="75dp"
android:layout_height="70dp"
android:id="#+id/circle1"
android:background="#drawable/redcircle />
<Button
android:layout_width="75dp"
android:layout_height="70dp"
android:id="#+id/greenCircle"
android:background="#drawable/greencircle"
android:alpha="0"/>
</FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="5dp"
android:id="#+id/rect1"
android:text="Bluetooth Turn On / Off"
android:textStyle="italic"
android:textColor="#fdfdfd"
android:background="#drawable/rects"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1.4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="150dp"
android:layout_height="70dp"
android:id="#+id/circle2"
android:background="#drawable/gomb"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/rect2"
android:textStyle="italic"
android:text="View paired Devices"
android:textColor="#fdfdfd"
android:enabled="false"
android:background="#drawable/rects"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9">
<Button
android:layout_width="150dp"
android:layout_height="70dp"
android:id="#+id/circle3"
android:background="#drawable/gomb"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/rect3"
android:textStyle="italic"
android:textColor="#fdfdfd"
android:enabled="false"
android:text="Scan for new Devices"
android:background="#drawable/rects"
android:layout_weight="1" />
</LinearLayout>
Looks like your friend's phone is in a right-to-left language, and your app "supports" right-to-left. While supporting RTL is an admirable goal, sometimes it's not feasible.
You have a few different options here. The fastest/easiest for you is to disable RTL support from your app. Add this attr to the <application> tag in your AndroidManifest.xml:
android:supportsRtl="false"
Or, you could try to actually provide the necessary support for RTL within your app. In this case, that probably means specifying an alternative drawable for your button background. If you currently have these:
res/drawable-mdpi/background.png
res/drawable-xhdpi/background.png
res/drawable-xxhdpi/background.png
You'd need to add these:
res/drawable-ldrtl-mdpi/background.png
res/drawable-ldrtl-xhdpi/background.png
res/drawable-ldrtl-xxhdpi/background.png
And you'd put the curvature on the right side of the button instead of the left.

How to put a TextView resize depending on the resolution of Android

I have a problem here , i just getting starter with android Development , i was just in Windows Phone , and when i put in WP some TextView in my screen , he will be the same way in other screens , but in android is not .I want to know if have some code in XML who i can define the position and not change!
Here is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".Home"
android:background="#drawable/background">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recife +"
android:textSize="40dp"
android:textColor="#android:color/white"
android:layout_marginTop="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:fontFamily=""
android:id="#+id/textView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horários, Rotas e Informações"
android:textSize="25dp"
android:textColor="#android:color/white"
android:layout_marginTop="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:autoText="false" />
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="250dp"
android:background="#drawable/trem"
android:id="#+id/butaoMetro"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_below="#+id/butaoMetro"
android:layout_alignEnd="#+id/textView" />
How can i fix this?thanks!
I think this library autofit-textview can help you.
But you will need to wrap it into a custom FrameLayout nammed AutiFitLayout. Take a look at the example.
The problem here is
android:textSize="25dp"
set fixed for any resolution devices. For proper display you need to create layout for various resolution devices. For this you need to create different layout folder for different resolution devices and match according to it. Hope this helps

TextView not scrolling Smoothly

I am trying to scroll my textview using the following code:
TextView text = (TextView) findViewById(R.id.textView12);
text.setMovementMethod(ScrollingMovementMethod.getInstance());
int height = getResources().getDrawable(R.drawable.pic_ground_pranic).getIntrinsicHeight();
text.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, height));
text.setText("As part of an Android App I am building a button set.For performance reasons and to keep the code simpler, the Android system uses pixels as the standard unit for expressing dimension or coordinate values. That means that the dimensions of a view are always expressed in the code using pixels, but always based on the current screen density. For instance, if myView.getWidth() returns 10, the view is 10 pixels wide on the current screen, but on a device with a higher density screen, the value returned might be 15. If you use pixel values in your application code to work with bitmaps that are not pre-scaled for the current screen density, you might need to scale the pixel values that you use in your code If you need to control exactly how your application will look on various screen configurations, adjust your layouts and bitmap drawables in configuration-specific resource directories. For example, consider an icon that you want to display on medium and high density screens. Simply create your icon at two different sizes (for instance 100x100 for medium density and 150x150 for high density) and put the two variations in the appropriate directories, using the proper qualifiers: For instance, suppose a device has a WVGA high-density screen, which is 480x800 and about the same size as a traditional HVGA screen, but it's running an application that has disabled pre-scaling. In this case, the system will lie to the application when it queries for screen dimensions, and report 320x533 (the approximate mdpi translation for the screen density). Then, when the application does drawing operations, such as invalidating the rectangle from (10,10) to (100, 100), the system transforms the coordinates by scaling them the appropriate amount, and actually invalidate the region (15,15) to (150, 150). This discrepancy may cause unexpected behavior if your application directly manipulates the scaled bitmap, but this is considered a reasonable trade-off to keep the performance of applications as good as possible. If you encounter this situation, read Based on the density of the current screen, the system uses any size- or density-specific resources from your application and displays them without scaling. If resources are not available in the correct density, the system loads the default resources and scales them up or down as needed to match the current screen's density. The system assumes that default resources (those from a directory without configuration qualifiers) are designed for the baseline screen density (mdpi), unless they are loaded from a density-specific resource directory. Pre-scaling is, thus, what the system does when resizing a bitmap to the appropriate size for the current screen density. to match the un-scaled bitmap source. The buttons are part of a nested set of LinearLayouts.The question then is: How to resize the layout.I have tried several suggested techniques, and none come close to working. Here is a subset of the XML that builds the button set:");
All is working fine but my text view is not scrolling smoothly. I thought I have to put my Textview inside a Scrollview but this is also not working.
Does it happen because I am resizing my textview?
Please provide any solution for this problem. I already spent a lot of time on this.
My xml layout file is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/include1"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:scrollbarStyle="insideInset" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="14dp"
android:text="Text 1"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView2"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView2"
android:text="Text 2"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView3"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView3"
android:text="Text 3"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView4"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView4"
android:text="Text 4"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView2"
android:layout_marginLeft="5dp"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView3"
android:layout_below="#+id/textView3"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView4"
android:layout_below="#+id/textView4"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView5"
android:layout_below="#+id/textView5"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:soundEffectsEnabled="true" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Volume 1"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:soundEffectsEnabled="true" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Volume 2"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Save Volumes" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/frameLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical" >
<TextView
android:id="#+id/textView12"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="top|left"
android:scrollbars="vertical"
android:visibility="visible" />
</FrameLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_marginRight="30dp"
android:clickable="true"
android:text="Detailed Instruction" />
</FrameLayout>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>
Thanks in advance!
In my case I just needed to put my TextView inside a ScrollView. Scrolling got very smooth and users lived happily every after!
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>
<TextView
android:id="#+id/textview_about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:textSize="20dp" />
</ScrollView>
problem is ScrollView inside ScrollView.
When you put ScrollView inside ScrollView android just get confused which scroll view is touched. So sometimes it gets unable to deliver touch event.
After searching for a time I found a link or blog that will extract this problem and also have solution.
Take a look at this blog. This is exactly what you have been searching for and i am sure that it will solve your problem.
Now time to Enjoy ;)
The TextView scroll only if you restrict its height. Simple rule is when the text is more then the available space then textview start scrolling.
One way is what you are following by assigning a fixed height which you got from some image size. One other way is by setting the maximum number of lines.
TextView text = (TextView) findViewById(R.id.textView12);
text.setMaxLines(5);
text.setMovementMethod(ScrollingMovementMethod.getInstance());
you can even make it more dynamic. Simply by calculating number of lines.
Number of lines = (image Height in pixels)/(text font size in pixel)
First of all there is no need of the setting the Layoutparams as because you have give it in to the xml layout.
And if you have such long string then dont put it directly on java code. Instead of it put that string to the resources directory.
go to values, and open strings.xml file and define your string.
See below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelperStackOverflowActivity!</string>
<string name="app_name">HelperStackOverflow</string>
<string name="String1">"PUT YOUR STRING HERE" </string>
</resources>
After doing that set the string in Java code whenever you want.
as like:
text = (TextView)findViewById(R.id.textView12);
text.setText(getResources().getString(R.string.String1));
it Scroll nice as normal scrolling.
Hope it will help you.
Enjoy. :)

Categories