title: How to change the size and shape of a particular bottom bar navigation item
body: <p>I am trying to implement this bottom bar which contains an item with a bigger size and a different shape than the other ones.</p>
  
  <p><a href="https://i.stack.imgur.com/BFago.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/BFago.jpg" alt="bottom bar"></a></p>
  
  <p>Is there a non-hacky way to achieve this using the native Bottom navigation component ? I guess not because it does not seem compliant with Material Design specs.</p>
  
  <p>Otherwise, what would be the best approach to follow ? I see only 2 ways to achieve this but none of them seems reliable to me.</p>
  
  <ul>
  <li>For every "small item", adding a transparent bar at the top of the drawable to reach the size of the camera icon.</li>
  <li>Implementing a 5 items bottom bar with a "ghost item" in the middle, on top of which I could place some other component. This would require this component to be coupled with the bottom bar.</li>
  </ul>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is what I obtained by increasing the icon size as suggested by Harshit and fmaccaroni.</p>
  
  <p>When the item is not selected :</p>
  
  <p><a href="https://i.stack.imgur.com/9DhjC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/9DhjC.jpg" alt="item_selected"></a></p>
  
  <p>When the item is selected :</p>
  
  <p><a href="https://i.stack.imgur.com/GdQow.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/GdQow.jpg" alt="item_selected"></a></p>
  
  <p>Pro: The icon is bigger than the other ones</p>
  
  <p>Cons: It is still contained inside the bottom bar. Also, it is not centered vertically when selected</p>
  
  <hr>