Develop Reference

Remove BottomNavigationView Icons and center title

I have a bottom navigation view with 3 items. I want to only have centered text for each tab, and would therefore like to fully remove icons (not only make them transparent).
How can I remove Icons and center the titles?
This is what I have:
This is what I want:
My code: (Prefer solution in XML)
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigationBar"
android:background="#color/navigation"
app:theme="#style/BottomNavigationTheme"
app:menu="#menu/bottom_navigation_menu"
android:minHeight="#dimen/abc_action_bar_default_height_material">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
</merge>
bottom_navigation_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_home"
android:title="#string/home">
</item>
<item
android:id="#+id/ic_today"
android:title="#string/today">
</item>
<item
android:id="#+id/ic_you"
android:title="#string/you">
</item>
</menu>

The easiest way is to just use
android:paddingBottom="16dp" //(any dp you want)
android:clipToPadding="false"

This works, for me
private int baselineHeight = 0;
private void removeIcons(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView itemView = (BottomNavigationItemView) (menuView.getChildAt(i));
BaselineLayout baseline = (BaselineLayout) itemView.getChildAt(1);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) baseline.getLayoutParams();
baselineHeight = baselineHeight > 0 ? baselineHeight : (menuView.getHeight() + baseline.getHeight()) / 2;
layoutParams.height = baselineHeight;
baseline.setLayoutParams(layoutParams);
}
}
just call it in onCreate() in your Activity and pass your BottomNavigationView as parameter.
If you don't want to clutter your Activities or Fragments with excess code and you want this present in your layout XML you can create a custom View that extends BottomNavigationView and call this function in onLayout() override.

Add fix height to your bottom sheet and set bottom padding. Works for me.
android:layout_height="35dp"
android:paddingBottom="20dp"
android:clipToPadding="false"

you can use this property of bottom navigationview to hide the text and it will automatically centered your icons and i think ou do not use the minHeight property sir.
app:labelVisibilityMode="unlabeled"

Transparent background for custom AlertDialog

Strangely, this was working fine, this is how it looks on my app released on Google Play:
And this is how it looks now:
All I did was migrate to AndroidX.
Here is my dialog layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogLinear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#drawable/rounded_corners">
<Button
android:id="#+id/btnAdd2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="#string/import_video"
android:textColor="#color/dark_text" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners">
<Button
android:id="#+id/btnAdd1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="#string/add_student"
android:textColor="#color/dark_text" />
</FrameLayout>
</LinearLayout>
and here is how I inflate it:
View dialogView = View.inflate(getApplicationContext(), R.layout.dialog_main, null);
LinearLayout dialogLinear = dialogView.findViewById(R.id.dialogLinear);
//Here is where is set the background to transparent
dialogLinear.setBackgroundColor(0x00000000);
final AlertDialog alertD = new AlertDialog.Builder(this).create();
Button btnAdd1 = dialogView.findViewById(R.id.btnAdd1);
Button btnAdd2 = dialogView.findViewById(R.id.btnAdd2);
btnAdd1.setTypeface(mCustom_font_Bold);
btnAdd2.setTypeface(mCustom_font_Bold);
btnAdd1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do stuff
}
});
btnAdd2.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do stuff
}
});
alertD.setView(dialogView);
if (alertD.getWindow() != null) {
alertD.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}
alertD.show();
I searched and couldn't find why this would be happening. Can someone please give me some advise?
I have tried setting it in in the layout itself.
Edit 1:
After trying the answer below, it now looks like this, instead of above:
I resolved it by adding the following styles:
<style name="NewDialog">
<item name="android:windowIsFloating">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:background">#android:color/transparent</item>
</style>
Setting the style like this:
final AlertDialog alertD = new AlertDialog.Builder(this, R.style.NewDialog).create();
And to fix what happened in Edit 1, i changed my LinearLayout to a RelativeLayout

You Can Create a theme and assign that theme to your AlertDialog
Define theme in your styles.xml
<style name="CustomDialog" parent="android:Theme.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
And Assign that theme to your AlertDialog
final AlertDialog alertD = new AlertDialog.Builder(this,R.style.CustomDialog).create();
Or
2.You should try and use Dialog instead of AlertDialog
As Explained in this Answer.

How to add a one-side border and background into one drawable?

I have an ImageButton and to that in the android:background property I currently have a xml drawable which changes the ImageButton background color when pressed. This is all good but I also want to add a top border to each of these ImageButton's.
Here's a sample image I created to better get my point across.
These buttons will also have an active state which indicates the current active button and I can set that as a drawable using Java code.

You can use multiple drawables to get your work done. You can have drawable icons/images with the top border and the same without the top border and use the setBackgroundResource method to switch image backgrounds. (I believe you want to show the images with top border as currently selected tool icon, right?).
As you're going to construct several such image buttons like a toolbox, you'll have to make sure their selection states are controlled properly. If one image-button is selected all others should show the unselected drawable.
I threw together some codes and built this small example. Hope you'll find it useful.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageButton imButton1 = (ImageButton) findViewById(R.id.imButton1);
final ImageButton imButton2 = (ImageButton) findViewById(R.id.imButton2);
final ImageButton imButton3 = (ImageButton) findViewById(R.id.imButton3);
imButton1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_selected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_selected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton3.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_selected);
}
});
}
}
And this is it's Layout:
<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:background="#bbb"
tools:context="${packageName}.${activityClass}" >
<ImageButton
android:id="#+id/imButton1"
android:layout_toLeftOf="#+id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_alignTop="#+id/imButton2"
android:background="#drawable/icon1_unselected" />
<ImageButton
android:id="#id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="23dp"
android:layout_alignParentTop="true"
android:background="#drawable/icon2_selected" />
<ImageButton
android:id="#+id/imButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imButton2"
android:layout_toRightOf="#id/imButton2"
android:background="#drawable/icon3_unselected" />
</RelativeLayout>
A screen-shot of the image buttons working.
Hope this helps.

I solved it by creating two seperate drawable xml files such that one has a top border and white color background and other one has same color border with a bit grey background. Then in the selector xml file all I had to do was assign each of these xml files to their respective states and problem solved. :)

try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-6dp"
android:right="-6dp"
android:bottom="-6dp">
<shape>
<stroke
android:width="5dp"
android:color="#6c6c6c" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>

hey you may use view for border like that,you put this in your all side of your image view then you can see,
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000" />
whatever color you want to use. thanks

How to Set Background Color TabHost

I need help, I'm finding difficulty for change background color in a TabHost.
Original Image:
I need to modify background color like image below.
I tried many things in my code and XML too, but failed.
My code below:
TabHost tabHost = getTabHost();
// Tab 1
TabSpec aba1spec = tabHost.newTabSpec("Tab 1");
// setting Title and Icon for the Tab
tabHost.getTabWidget().setStripEnabled(false);
aba1spec.setIndicator("",getResources().getDrawable(R.drawable.tabenviaarq));
Intent photosIntent = new Intent(this, MainActivity.class);
aba1spec.setContent(photosIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(aba1spec); // Adding tab1
in XML i have this:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#android:id/tabs"
android:layout_alignParentTop="true"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-5dp"
android:background="#000000"/>
</RelativeLayout>
</TabHost>
Somebody have some idea i thanks a lot.

tabHost.setOnTabChangedListener(new OnTabChangeListener() {
public void onTabChanged(String arg0) {
for (int i = 0; i < tab.getTabWidget().getChildCount(); i++) {
tab.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.tab_selected); // unselected
}
tab.getTabWidget().getChildAt(tab.getCurrentTab())
.setBackgroundResource(R.drawable.tab_unselected); // selected
}
});
Try this method, I hope this will help you.

Solution is to use background with selector, and the code is here:
private void initTabsAppearance(TabWidget tabWidget) {
// Change background
for(int i=0; i < tabWidget.getChildCount(); i++)
tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_bg);
}
Where tab_bg is an xml drawable with selector:
For the full Tab customization I will add the code for changing tab text style using custom theme. Add this to styles.xml:
<style name="MyCustomTheme" parent="#android:style/Theme.Light.NoTitleBar">
<item name="android:tabWidgetStyle">#style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="#android:style/Widget.TabWidget">
<item name="android:textAppearance">#style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText" parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">12sp</item>
<item name="android:textStyle">bold</item>
</style>
To use this theme, define it in AndroidManifest.xml:
<application android:theme="#style/MyCustomTheme">
And now you have tab widgets with custom background and custom text style.

I am solved exactly the same problem with this method:
private void setBackgroundColor() {
int inactiveColor = getResources().getColor(R.color.inactive_tab);
int activeColor = getResources().getColor(R.color.active_tab);
// In this loop you will set the inactive tabs backgroung color
for (int i = 0; i < tabWidget.getChildCount(); i++) {
tabWidget.getChildAt(i).setBackgroundColor(inactiveColor);
}
// Here you will set the active tab background color
tabWidget.getChildAt(tabHost.getCurrentTab()).setBackgroundColor(
activeColor);
}

Android - How to display a spinner with value but display a different one

For my Android app, I need to use a spinner which displays a XML tree. This tree is necesarry for the user to understand the level of the value he can select.
Here is a picture of what I have right now:
As you can see, I've put some little '>' and some spaces to simulate the tree. What I want now, is when the user select an entry, to display the value without those symbols.
Today, the spinner displays the value like that:
THe word is " > Supermarket" but what I want is "Supermarket", and only that. Is there a way to modifiy the selected value displayed by the spinner but not the list?
I hope you'll be able to help me.
Regards.
V.

you can do this with the idea that
make your spinner invisible put an textView behind the spinner
set TextView text to spinner selected item with
textView.settext(spinner.getSelectedItem().replace(">","").trim()));
dont forget to put spinner over the textView otherwise you will not get spinner click
event

Here is the code I used if someone needs it:
First, replace your spinner by the folowing portion of code:
<RelativeLayout
android:layout_width="190dp"
android:layout_height="40dp"
android:layout_marginRight="5dp">
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/custom_spinner"
android:visibility="invisible" />
<Button
android:id="#+id/fake_btn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/custom_spinner" />
<TextView
android:id="#+id/fake_text"
android:layout_width="140dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:textColor="#000000" />
</RelativeLayout>
Create a new XML file in your drawable folder named custom_spinner.xml and puts that code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_normal" />
</selector>
Download those two pictures and add them into your drawable folder (spinner_pressed.9.png and spinner_normal.9.png):
In your activity, add the following variables:
private Spinner spinner;
private Button fake_btn;
private TextView fake_text;
In the onCreate method, add:
spinner = (Spinner) findViewById(R.id.spinner);
fake_btn = (Button) findViewById(R.id.fake_btn);
fake_text = (TextView) findViewById(R.id.fake_text);
fake_btn.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
spinner.performClick();
}
});
spinner_manual.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView parentView, View childView, int position, long id)
{
String value = (String) spinner.getItemAtPosition(position);
fake_text.setText(value);
}
public void onNothingSelected(AdapterView parentView) {}
});
There you are, it should work.