Android: Circle counter on top of the image - java

Does anyone know, is there any library on Github for example, or something else for adding a circle counter on top of an image:
Actually, I can create a new FrameLayout and position every element, but I am not sure that this is the right way. I searched for something like that, but I didn't find anything.

Create a drawable file name badge_background.xml and paste the code below.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#FF0000" />
</shape>
Then set this drawable to the background of the textview, like below.
<FrameLayout android:id="#+id/viewLayout" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" android:padding="12dp">
<ImageView android:id="#+id/view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="#string/imageDescription" android:src="#drawable/view" />
<TextView android:id="#+id/viewBad" android:layout_width="20dip" android:layout_height="20dip" android:clickable="false" android:layout_marginStart="5dp" android:layout_gravity="top|center_horizontal" android:background="#drawable/badge_background" android:gravity="top|center_horizontal" android:text="5" android:textColor="#color/white" android:visibility="gone" />
</FrameLayout>

Related

MaterialButton does not get rounded when changing radius

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.
:(

problems with saving information to Data in Android Studio

I used containers to build layouts which worked well everywhere, and here on the statistics where there is a pie chart, everything is floated.
If it is not the reason that it increases over time, and if so how to fix it ?
Here is an XML code. Please help or give any useful information on how to fix it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/statisricfon" />
<LinearLayout
android:id="#+id/layout_for_stat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical">
<TextView
android:id="#+id/numpoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="85dp"
android:layout_marginRight="370dp"
android:text="120" />
<TextView
android:id="#+id/numtry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:layout_marginRight="235dp"
android:text="5" />
<TextView
android:id="#+id/numanswear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"
android:layout_marginRight="80dp"
android:text="18" />
<TextView
android:id="#+id/numtruavt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:layout_marginRight="620dp"
android:text="23" />
<TextView
android:id="#+id/numtopscore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:layout_marginRight="425dp"
android:text="15" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/piecha"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="70dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="50dp"
></com.github.mikephil.charting.charts.PieChart>
</LinearLayout>
</RelativeLayout>
Screenshot :
I can see a few red flags in the way you decided to implement this layout.
First a bit context, there are endless variations of Android devices out there, with different physical screen sizes, resolutions, and subsequently dpis.
Ideally, you would move away from RelativeLayout and use ConstraintLayout instead. And if the PieChart width and height can change over time so the view itself has to manage that in its onMeasure method regardless.
It would also make sense to get rid of #drawable/statisricfon and replace it with a few Android XML drawables and vector images. This will ensure that the design would scale well on different screen configurations including portrait, landscape, and multi-window modes.
You can use one drawable for the gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="integer"
android:centerColor="integer"
android:endColor="color"
android:startColor="color"
android:gradientRadius="integer"
android:type=["linear" | "radial" | "sweep"] />
</shape>
And for the question marks, you can use a repeated pattern instead:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/pattern"
android:tileMode="repeat" />
And lastly, custom views for the TextViews with that white box background and title.

I want outlined text field with as shown in picture not clicked on edittext or spinner i want same as it is view on Button click

please let me know if anyone get idea i get text but on click on edittext but i want both without any click i want same view as shown in below photo
<com.google.android.material.textfield.TextInputLayout
android:layout_below="#+id/spinnerTextInput"
android:id="#+id/device_text"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Device Name"
app:hintTextColor="#color/subText"
app:boxStrokeColor="#color/colorBlack"
app:boxStrokeWidthFocused="1dp"
app:errorEnabled="true"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/device_name_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/shotOn"
android:textColorHint="#color/subText"
android:textColor="#color/TitleBlack">
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
Set Padding of EditText
android:padding="20dp"
It is called Outlined text field. You can clone this repo material-components-android to see it by yourself
Here is the style
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="#string/cat_textfield_label"
app:counterEnabled="true"
app:counterMaxLength="10"
app:errorEnabled="true"
app:helperText="#string/cat_textfield_outlined_helper_text"
app:helperTextEnabled="true"
app:placeholderText="#string/cat_textfield_placeholder_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
who are giving review please check question and answer then give you opinion Thank you for your response. Here I am submitting Answer of my question
<RelativeLayout
android:layout_below="#+id/spinnerTextInput"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="#drawable/boarder"
android:paddingLeft="5dp"
android:text="input" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:background="#color/white"
android:textColor="#color/TitleBlack"
android:text="Label" />
</RelativeLayout>
make one boarder xml in drawable and add below code
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#color/TitleBlack" />
<corners android:radius="10dp" />
</shape>

How to use a rectangle shape background with TextView in Android Studio?

I designed an app on adobe xd and I exported some assests in my drawable folder on android studio. In my activity xml, I added the TextView background as the rectangle shape in my drawable. It worked but when I tried aligning the text but not the shape nothing happens. I guess I can't separate the text from the background
don't use a picture as background create a drawable file and use it as background
for example, create TextViewBackground.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/Color_White_4" />
<corners android:radius="10dp" />
</shape>
and use this in your TextView
<TextView
.
.
.
android:background="#drawable/TextViewBackground"/>
try to create custom TextView
<RelativeLayout
android:id="#+id/Login_Username_TextView"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/Login_Title"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:background="#drawable/TextViewBackground">
<TextView
android:id="#+id/Login_Username_Hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="38dp"
android:layout_marginTop="8dp"
android:text="#string/User_Name"
android:textColorHint="#color/Color_Gray_1"
android:textSize="12sp" />
<EditText
android:id="#+id/Login_Username_Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#id/Login_Username_Hint"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:inputType="textPersonName"
android:lines="1"
android:padding="1dp"
android:textColor="#color/Color_Gray_1"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>

bottom tool bar border not matching the height of the toolbar android studio

I am trying to get my buttons to fit within the border of the bottom toolbar. Right now my bottom toolbar looks like this.
and the following xml files for the bottom toolbar.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/white_grey_border_bottom"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingEnd="16dp"
android:paddingStart="16dp">
<Button
android:id="#+id/homeIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:background="#drawable/home" />
<Button
android:id="#+id/calendarIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:background="#drawable/calendar_alt" />
<Button
android:id="#+id/heartIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="124dp"
android:background="#drawable/oval_84" />
<Button
android:id="#+id/userIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="32dp"
android:background="#drawable/user" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/floatingActionButton"
android:layout_width="58dp"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:background="#drawable/group" />
the floating action button is intended to protrude out of the toolbar however the rest of my icons should be within the border. I used this drawable resource to set my border.
white_grey_border xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:right="-1dp"
android:left="-1dp"
android:top="11dp">
<shape
android:shape="rectangle">
<stroke android:width="0.5dp"
android:color="#color/colorGrey"/>
<solid android:color="#color/colorWhite"/>
</shape>
</item>
Previously my buttons were within the toolbar and linear layout height, but after adding the border it doesnt fit the toolbar's height and hence why the grey icons protrusion. Thank you in advance :)
you can use a component "View" instead of drawable background with "1dp" height.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View android:layout_height="1dp" android:layout_width="match_parent"/>
<Toolbar />
...
</LinearLayout>
I think bottom tool bar border not matching the height of the toolbar, because u set layout_height="1dp" for your drawable-layout and it's override "layout_height" of toolbar component.
p.s. u need to use bottom-navigation component instead of toolbar
Oops i think i resolved it already i can just change the top in white grey border xml from 11dp to 1 dp or sth . Thanks for the answers.

Categories