Develop Reference

customize bottom navigation bar item layout

I want create following customized bottom navigation bar. How I can set custom layout for menu item? or is there exists ready library for creating this type bottom bar easily?

My code below work fine:
First, you need create a Bottom Navigation Activity template project in Android Studio and apply my code below:
button_custom.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/button_border"
android:src="#drawable/ic_baseline_add_24"/>
</FrameLayout>
button_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp"/>
<solid android:color="#android:color/holo_blue_light"/>
</shape>
ic_baseline_add_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#android:color/white"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#android:color/white"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</vector>
bottom_nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_dashboard"
android:title="" />
<item
android:id="#+id/navigation_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/title_notifications" />
</menu>
activity_main.xml
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
val appBarConfiguration = AppBarConfiguration(setOf(
R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
//Add custom tab menu
val bottomMenuView = navView.getChildAt(0) as BottomNavigationMenuView
val view = bottomMenuView.getChildAt(1)
val itemView = view as BottomNavigationItemView
val viewCustom = LayoutInflater.from(this).inflate(R.layout.button_custom, bottomMenuView, false)
itemView.addView(viewCustom)
}
}
My result:

This is just themed and the icon is set with: <item android:icon="#drawable/some_icon" ... />.
Requesting a library for such a simple task is a) questionable and b) also considered as off-topic.

Items doesn't fill space

I have a RecyclerView. When you look at the picture, I have the Problem, that the Items of the RecyclerView won't fill the full space of the screen. (I mean the space between the item_note and the screen edge...
Here is my main_activity.XML:
<android.support.v7.widget.RecyclerView
android:id="#+id/rvNoteList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
Here is my item_layout.XM:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:background="#drawable/note_bg">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="9"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Title"
android:textStyle="bold"
android:textSize="18sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Text for Content" />
</LinearLayout>
Here is how I set the Layout in MainActivity.java:
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
recyclerView.setItemAnimator(new DefaultItemAnimator());
EDIT:
click to see
EDIT 2:
click to see
EDIT 3:
Adapter:
adapter = new FirestoreRecyclerAdapter<Note, NoteViewHolder>(response) {
#Override
protected void onBindViewHolder(NoteViewHolder holder, int position, Note model) {
final Note note = notesList.get(position);
holder.title.setText(note.getTitle());
holder.content.setText(note.getContent());
}
#Override
public NoteViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_note, parent, false);
return new NoteViewHolder(view);
}
#Override
public void onError(FirebaseFirestoreException e) {
Log.e("error", e.getMessage());
}
};
EDIT 4:
<?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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

If you don't want gaps as you've described, you probably don't want to be using StaggeredGridLayoutManager, since it will try to add gaps at the end of some rows to create a jagged edge effect. See https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html for more details.
For evenly spaced items, you should use GridLayoutManager. So, try changing
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
To
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
See https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html#GridLayoutManager(android.content.Context,%20int) for more details on how to use GridLayoutManager.
Alternate Solution 1
If you want to stick with the StaggeredGridLayoutManager, you can try setting its gap handling strategy to GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS like so:
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
recyclerView.setLayoutManager(layoutManager);
Alternate Solution 2
Try changing the contents of your item_layout.xml to:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:background="#drawable/note_bg">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Title"
android:textStyle="bold"
android:textSize="18sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Text for Content" />
</LinearLayout>
Edit
Using Alternate Solution 2 and StaggeredGridLayoutManager, I was able to get the following result (using the same text in your items):

Java android NavigationView with checkbox

I want to create a NavigationView with checkbox or switch , I just want to have this feature in my navigation to items switch and it should work just like this : When I turn one switch to another it changes to off state. What I did to have a switch is, this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/switchs"
/>
</LinearLayout>
<?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">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_menu1"
android:icon="#mipmap/ic_launcher"
android:title="Menu 1" />
<item
android:id="#+id/nav_menu2"
android:icon="#mipmap/ic_launcher"
android:title="Menu 2" />
<item
android:id="#+id/nav_menu3"
app:actionLayout="#layout/action_view_switch"
android:icon="#mipmap/ic_launcher"
android:title="Menu 3" />
<item
android:id="#+id/nav_menu4"
app:actionLayout="#layout/action_view_switch"
android:icon="#mipmap/ic_launcher"
android:title="Menu 4" />
</group>
</menu>
But I can not have a value or status a switch and have a listener to see a change status

first of all create a layout action_view_checkbox.xml as below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/checkbox" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/checkbox"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:text="" />
</RelativeLayout>
and add layout as an item to the menu
<menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/check_box_menu"
app:actionLayout="#layout/action_view_checkbox"
android:title="Title" />
</menu>
And check click event as
Menu menu = navigationView.getMenu();
MenuItem menuItem = menu.findItem(R.id.check_box_menu);
View actionView = MenuItemCompat.getActionView(menuItem);
actionView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});

Custom ListView item selection doesn't working

There is a problem with item selection in custom ListView.
There is no checkboxes, so no need in checkable=false. I've tried setup android:focusable="false" and android:focusableInTouchMode="false". Tried "Draw Selector On Top option". I can see standard touch animation, but items not highlighted.
My ListView definition (activity_main.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
ListView creating in onCreate of main activity (MainActivity.java):
...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (ListView) findViewById(R.id.listview);
view.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
list = new ArrayList<String>();
currentDirectory = Environment.getExternalStorageDirectory().getAbsolutePath();
adapter = new ArrayAdapter<String>(this, R.layout.listviewitem, R.id.firstLine, list);
view.setAdapter(adapter);
updateFileList(currentDirectory);
view.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View parent_view, int position, long id) {
String listItem = (String) view.getItemAtPosition(position);
Log.d("Hello", "file: " + listItem);
view.setSelected(true);
File tempFile = new File(currentDirectory + File.separator + listItem);
if (tempFile.isDirectory()) {
currentDirectory = currentDirectory + File.separator + listItem;
updateFileList(currentDirectory);
}
}
});
}
...
R.layout.listviewitem consists of ImageView and two TextViews (listviewitem.xml)
<?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="?android:attr/listPreferredItemHeight"
android:background="#drawable/menu_item_background_selector"
android:padding="6dip" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/icon"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="#id/icon"
android:gravity="center_vertical"
android:text="Example application"
android:textSize="16sp" />
</RelativeLayout>
Where selector menu_item_background_selector (menu_item_background_selector.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true"></item>
<solid android:color="#bfced4"></solid>
</selector>

the selector is wrong. The item should wrap the state and the color. And you should have a default item. E.g.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#bfced4" android:state_activated="true" />
<item android:drawable="#color/default_color" />
</selector>
Android will check the state from the top. So if android:state_activated is true, the corresponding color will be picked up. If it is false, it checks the next on the selector, until it reach the last one

Dynamic number of buttons in LinearLayout

In the onCreate method of my Activity I know the number of Buttons which I want in col0. In the following example it are four Buttons. Then my TextView v0 gets the android:layout_weight set to number of buttons minus one (this is because v1 should be of the same height as all the Buttons). Instead of providing for each possible number of buttons an own xml file it would be much nicer, if one could generalize such that dynamic java codes somehow produces the appropriate layout. How is that possible?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/col0"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical">
<Button
android:id="#+id/b0"
style="#style/MyButton" />
<Button
android:id="#+id/b1"
style="#style/MyButton" />
<Button
android:id="#+id/b2"
style="#style/MyButton" />
<Button
android:id="#+id/b3"
style="#style/MyButton" />
</LinearLayout>
<LinearLayout
android:id="#+id/col1"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="6"
android:baselineAligned="false"
android:orientation="vertical">
<TextView
android:id="#+id/v0"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="3" />
<TextView
android:id="#+id/v1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

First prepare all the possible ids, here 10 buttons max (put it in res/values) :
ids.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<item type="id" name="b0" />
<item type="id" name="b1" />
<item type="id" name="b2" />
<item type="id" name="b3" />
<item type="id" name="b4" />
<item type="id" name="b5" />
<item type="id" name="b6" />
<item type="id" name="b7" />
<item type="id" name="b8" />
<item type="id" name="b9" />
</resources>
If you are using API >= 17, you can avoid this file and use View.generateViewId()
If you don't need ids, skip the above part
Then, here is your main layout :
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/col0"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/col1"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="6"
android:baselineAligned="false"
android:orientation="vertical">
<TextView
android:id="#+id/v0" />
<TextView
android:id="#+id/v1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Then, use the code to generate your layout :
setContentView(R.layout.main);
int buttonsNumber = 5; // Put here your number of buttons
LinearLayout col0 = (LinearLayout) findViewById(R.id.col0);
for(int i = 0; i < buttonsNumber; i++)
{
try
{
Button newButton = new Button(this);
newButton.setId(R.id.class.getField("b"+i).getInt(null));
// Since API Level 17, you can also use View.generateViewId()
newButton.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1));
col0.addView(newButton);
}
catch (Exception e)
{
// Unknown button id !
// We skip it
}
}
TextView v0 = (TextView) findViewById(R.id.v0);
v0.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.match_parent, 0, buttonsNumber - 1));

int buttonsNumber = YOUR_BUTTONS_NUMBER;
LinearLayout col0 = (LinearLayout)findViewById(R.layout.col0);
Button button = new Button(getContext()); // or create xml view for button and get it with findViewById
// adding buttons
for(int i = 0; i < buttonsNumber; i++)
col0.addView(button);
// setting weight
TextView v0 = (TextView)findViewById(R.layout.v0);
v0.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.match_parent, 0, buttonsNumber - 1));