Item design like Gmail

[goodibunakov]

Hi Mike! How i can do something like this?

[mikepenz]

the default items look like the items according to the material design guidelines. but with some theming work like adjusting the corner radius and stuff you should be able to achieve the above :)

[mikepenz]

It would actually be a great thing for our sample if you'd love to contribute to the project :)

[goodibunakov]

Oh, if i find how to do this... )))

[mikepenz]

All magic basically happens here. As you can see we make use of the new MaterialShapeDrawable which allows for shape theming :)

MaterialDrawer/library/src/main/java/com/mikepenz/materialdrawer/util/DrawerUtils.kt

Line 354 in 57b0728

fun themeDrawerItem(ctx: Context, view: View, selected_color: Int, animate: Boolean, shapeAppearanceModel: ShapeAppearanceModel) {

and we support passing in a custom shapeAppearanceModel which get's constructed here:

MaterialDrawer/library/src/main/java/com/mikepenz/materialdrawer/model/AbstractDrawerItem.kt

Lines 330 to 333 in 7d33603

	protected fun getShapeAppearanceModel(ctx: Context): ShapeAppearanceModel {
	val cornerRadius = ctx.resources.getDimensionPixelSize(R.dimen.material_drawer_item_corner_radius)
	return ShapeAppearanceModel().withCornerSize(cornerRadius.toFloat())
	}

So theoretically if you overwrite the PrimaryDrawerItem and modify that method (e.g. have a different shape appearance model defined. that should be it and magically work :D

[mikepenz]

Ok additionally the insets via material_drawer_item_background_padding_start_end have to be adjusted too it looks

[mikepenz]

So right now the best approach is to overwrite the PrimaryDrawerItem and then define your own getShapeAppearanceModel function. and possibly also define your own way of theming the item. adjusting the dimensions, paddings and such a bit :)

See the above sample how it's possibly looking like (with dark theme and light theme)

[mikepenz]

for the style I used a shape appearance model like this:

return ShapeAppearanceModel.builder()
                .setTopRightCorner(CornerFamily.ROUNDED, cornerRadius.toFloat())
                .setBottomRightCorner(CornerFamily.ROUNDED, cornerRadius.toFloat())
                .build()

[mikepenz]

so the next version will make theming this a bit easier :) also I will have a sample for you to see how it's done

[goodibunakov]

Well, we are waiting for v8.1.2? ;)

[mikepenz]

Released v8.1.2 for you :) hope it helps

[goodibunakov]

Unbelievable! Thanks a lot! )))

[goodibunakov]

It works! Great!
I saw example app and i have to use GmailDrawerItem class (its ok) and ids.xml file inside my project?

[mikepenz]

Yes :)

You can use the sample GmailDrawerItem class in your project and the one id which is needed :)

And having this in your class allows you to finetune it to your exact needs