Navigation menu item "badge" vertically alignment - java

Hello I'm using badge counter in navigation menu, but. I can't move to center vertically. I tried margin, height:match_parent but width shape not success.
( https://stackoverflow.com/a/33607630/4933464 )
Here my codes ( I use with shape ):
#drawable/menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ec443e" />
<padding
android:left="5dp"
android:right="5dp"
android:top="3dp"
android:bottom="3dp"/>
<corners android:radius="5dp" />
</shape>
#layout/menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/menu_counter"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#ffffff" />
Thanks.

Wrap it with a relative layout and add
android:layout_centerVertical="true"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:background="#drawable/menu_counter"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#ffffff" />
</RelativeLayout>

Original DrawerLayout doesn't support badges. But there is a many useful library
MaterialDrawer : https://github.com/mikepenz/MaterialDrawer
Screenshots aviable on github page.

Related

How to make the color of a TextView like this image?

I want to set the color of a textview like this image, It has a vertical red color line and entire textview is like pink or reddish color.
You can use a linear layout with orientation horizontal and put a view inside it.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".FirstFragment">
<LinearLayout
android:background="#color/teal_200"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/button_first"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:layout_width="5dp"
android:background="#color/cardview_dark_background"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/textview_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="5dp"
android:text="#string/hello_first_fragment"
android:background="#drawable/side_line"
/>
</LinearLayout>
<Button
android:id="#+id/button_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview_first" /></androidx.constraintlayout.widget.ConstraintLayout>
Just change the colors and you are good to go.
The output looks like this...
You can use layer list. No need more views
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/teal_700"/>
</shape>
</item>
<item android:start="5dp">
<shape
android:shape="rectangle">
<solid android:color="#color/teal_200"/>
</shape>
</item>
</layer-list>
In your TextView
android:background="#drawable/your_layer_list"

I'm facing a problem with CardView, and Material Design elevation, when view's background is changed

When I'm trying to change the background of CardView, or it's child, which covers whole area of CardView,
the elevation shadow disappears.
However, when I used app:contentPadding attribute, the elevation
shadows became visible again, but now I have this weird padding on CardView, which is of course, not great to see. I found out, that views of Material Design also have such a problem.
Here is a MaterialToolbar without background, and here is with background. Here's my XML code below.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
>
<androidx.appcompat.widget.LinearLayoutCompat
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="#android:color/holo_green_dark"
>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/news_image"
android:layout_width="match_parent"
android:layout_height="232dp"
/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/txt_news_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/numans"
android:textSize="18sp"
android:textStyle="bold"
android:layout_margin="12dp"
android:textColor="#color/colorToolBarDarkSeaBlue"
/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/txt_news_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_margin="12dp"
/>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
And Here is the code with MaterialToolbar
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
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=".MainActivity">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_margin="8dp"
android:elevation="8dp"
/>
</androidx.appcompat.widget.LinearLayoutCompat>
Create a drawable with a corner radius of the card's inner radius,set it as the background of the layout inside the cardview.you can then adjust the layout's margin or backgrounds corner radius to tweek the view of the shadow.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#2e8b57" />
<corners android:radius="5dp"/>
</shape>

Android : Create translucent edittext with image inside

I am working on an Android project in which I have a login page where I want to add Username and password fields. The design I have requires me to put them in this translucent manner and with an image inside. Any ideas what I can change for EditText to make it translucent and shape it, there are many threads to make it transparent by setting the background to null or by color and so on, but nothing like this I found.
Design :
I am using Relative layout, and those icons on right side, I have them in separate PNG files. I can directly add them inside Edittext, but I am concerned that if the username and password is long, it will start going over the image. Any strategies for that? Thank you.
Code :
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Text"
android:id="#+id/textView"
android:textSize="32sp"
android:textColor="#color/common_signin_btn_dark_text_default"
android:layout_marginTop="75dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
</RelativeLayout>
Updated screenshot
Updated EditText
<EditText
android:layout_width="wrap_content"
android:layout_height="45dp"
android:id="#+id/emailEditText"
android:inputType="textEmailAddress"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:drawableEnd="#drawable/Mail"
android:drawableRight="#drawable/Mail"
android:maxLines="1"
android:ellipsize="end"
android:hint="Email"
android:textColorHint="#color/common_signin_btn_dark_text_focused"
android:background="#drawable/layout_bg"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" >
</EditText>
layout_bg.xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/traslucent_background" />
<stroke android:width="1dip" android:color="#B1BCBE" />
<corners android:radius="17dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
For the image you should be able to use android:drawableEnd="#drawable/..." and android:drawableRight="#drawable/..." which also will limit the text length.
For the background you can define a custom drawable like this:
<!-- background_edittext.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/traslucent_background" />
</shape>
Where traslucent_color would be defined in colors.xml, for example, like this:
<color name="shadow_lighter_color">#64000000</color>
EDIT: this would be an example of how to use drawableEnd / drawableRight with a space between text and icon:
<EditText
android:background="#drawable/background_edittext"
android:drawablePadding="16dp"
android:drawableEnd="#drawable/icon"
android:drawableRight="#drawable/icon"
android:maxLines="1"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Try this:
Define a shape drawable in your project like this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#88ff0000"/>
<corners android:radius="32dp"/>
</shape>
And set it as the background for your EditTexts. Also, add this as an attribute to your EditText in the XML:
android:drawableRight="#drawable/any_drawable_file"
If you're concerned about the text overlapping with the drawable, you could add a custom paddingRight to your EditText to tackle that. It would save you the effort of inflating a custom layout.

How can I achieve a gap in a border around a LinearLayout?

I want to have a gap in a border which is around a LinearLayout. In this gap there should be text.
I think the image explains it very well:
Is this possible? I know how to create a border around the Layout but not how to do this gap with the text. I hope someone can help me.
Make my_drawable.xml file in your project's res/drawable folder:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000066" />
<corners
android:radius="10dp" />
<solid
android:color="#android:color/white"/>
</shape>
After it you can add it as a background for a LinearLayout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="300dp" <!-- Or whatever you want -->
android:layout_height="200dp" <!-- Or whatever you want -->
android:background="#drawable/my_drawable">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_marginLeft="20dp"
android:textColor="#android:color/black"
android:textStyle="bold"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
</RelativeLayout>

help with listview and R.layout.main (Android)

im quite new to android, so i apologise if this is a noob-ish question (:
i designed my list following the example found here: http://android-er.blogspot.com/2010/06/custom-arrayadapter-with-with-different.html
but what i would like to know is how would i go about adding setContentView(R.layout.main) so that i can display other (xml) elements along with the list?
thanks for any advice (:
You just edit your main.xml to look whatever you want it to look, eg:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<View android:id="#+id/emptyview"
android:layout_height="30dp"
android:layout_width="fill_parent"
/>
<ListView android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="true"
android:stackFromBottom="true"
android:layout_below="#id/emptyview"
android:headerDividersEnabled="true"
/>
</RelativeLayout>
Change your activity to extend only Activity, not ListActivity. Finally, in your activity you can then fetch your list view with:
ListView list = (ListView) findViewById(R.id.listview);
and do whatever you need to do with the list.
You create your main.xml
Add to it a ListView
<ListView android:layout_width="match_parent"
android:layout_height="match_parent" android:id="#+id/myListView"
android:divider="#ffa500" android:dividerHeight="1px"
android:background="#drawable/somedrawable_xml"
android:choiceMode="singleChoice"></ListView>
somedrawable_xml.xml could be any drawable example:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ffa500" />
<stroke android:width="2dp" android:color="#ffffa500" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
Add a layout xmlFile myLayout.xml example: (I added imageView for demonstration) anyway what is important is the id of the textview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dasdasd">
<TextView android:text="TextView" android:layout_height="wrap_content"
android:id="#+id/thisIsTheTextView" android:layout_width="wrap_content" android:textAppearance="?
android:attr/textAppearanceLarge"></TextView>
<ImageView android:src="#drawable/icon" android:id="#+id/imageView1" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"></ImageView>
finally in your Activity
ArrayAdapter myAD=new ArrayAdapter(mContext,R.layout.myLayout,R.id.thisIsTheTextView,new String[] {"item1", "item2", "item3", "item4", "item5"});
myListView.setAdapter(myAD);

Categories