All Projects → florent37 → Diagonallayout

florent37 / Diagonallayout

Licence: apache-2.0
With Diagonal Layout explore new styles and approaches on material design

Programming Languages

java
68154 projects - #9 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to Diagonallayout

Mato
Mato - Icon pack for Linux
Stars: ✭ 117 (-95.48%)
Mutual labels:  material-design, design
Motion
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (-33.38%)
Mutual labels:  material-design, design
Materialdesigninxamltoolkit
Google's Material Design in XAML & WPF, for C# & VB.Net.
Stars: ✭ 11,603 (+347.82%)
Mutual labels:  material-design, design
Motion Shapeofview
Explain how to use MotionLayout with ShapeOfView
Stars: ✭ 236 (-90.89%)
Mutual labels:  material-design, layout
Elegantdialog
A beautiful, customizable and interactive dialog for Android written in Kotlin/Java 😍
Stars: ✭ 189 (-92.71%)
Mutual labels:  material-design, design
Mui Treasury
A collection of ready-to-use components based on Material-UI
Stars: ✭ 1,821 (-29.72%)
Mutual labels:  material-design, layout
Arclayout
With Arc Layout explore new styles and approaches on material design
Stars: ✭ 1,662 (-35.85%)
Mutual labels:  design, layout
Angular Bootstrap With Material Design
Angular Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 1,031 (-60.21%)
Mutual labels:  material-design, design
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-93.44%)
Mutual labels:  material-design, design
Material Apex
A Material Design Theme for Oracle APEX
Stars: ✭ 161 (-93.79%)
Mutual labels:  material-design, design
Materialdesigndemo
A beautiful app designed with Material Design.
Stars: ✭ 1,391 (-46.31%)
Mutual labels:  material-design, design
Leerraum.js
A PDF typesetting library with exact positioning and hyphenated line breaking
Stars: ✭ 233 (-91.01%)
Mutual labels:  design, layout
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+265.23%)
Mutual labels:  material-design, design
Materialize
Materialize, a CSS Framework based on Material Design
Stars: ✭ 38,630 (+1390.93%)
Mutual labels:  material-design, design
React Bootstrap With Material Design
React Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 1,119 (-56.81%)
Mutual labels:  material-design, design
Involt
Inject hardware interactions directly into HTML layout.
Stars: ✭ 128 (-95.06%)
Mutual labels:  design, layout
Vue Bootstrap With Material Design
Vue Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 803 (-69.01%)
Mutual labels:  material-design, design
Awesomebar
Just beautiful
Stars: ✭ 870 (-66.42%)
Mutual labels:  material-design, design
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+358.12%)
Mutual labels:  material-design, design
Materialskin
Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.
Stars: ✭ 2,358 (-8.99%)
Mutual labels:  material-design, design

DiagonalLayout

Android Arsenal

With Diagonal Layout explore new styles and approaches on material design

Android app on Google Play

screen

Usage

<com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        diagonal:diagonal_angle="10"
        diagonal:diagonal_position="left / right / top / bottom"
        diagonal:diagonal_direction="left / right"
        android:elevation="10dp"
        >

        <!-- YOUR CONTENT -->

</com.github.florent37.diagonallayout.DiagonalLayout>

Sample

Bottom

screen

<com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:elevation="10dp"
        app:diagonal_angle="20"
        diagonal:diagonal_direction="left"
        diagonal:diagonal_position="bottom">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/mountains" />

</com.github.florent37.diagonallayout.DiagonalLayout>

Top

screen

<com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:elevation="10dp"
        app:diagonal_angle="20"
        app:diagonal_position="top"
        app:diagonal_direction="right">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/mountains" />

</com.github.florent37.diagonallayout.DiagonalLayout>

Position / Direction

screen

Elevation

Do not forget to add elevation with android:elevation="**dp"

screen

KenBurns

Using https://github.com/flavioarfaria/KenBurnsView

screen

<com.github.florent37.diagonallayout.DiagonalLayout
        android:id="@+id/diagonalLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        diagonal:diagonal_angle="10"
        diagonal:diagonal_position="left"
        android:elevation="30dp"
        >

        <com.flaviofaria.kenburnsview.KenBurnsView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/background"
            />

        ...

</com.github.florent37.diagonallayout.DiagonalLayout>

Inspirations

Exploration of some new styles and approaches on material design. This one here is a user profile for Hollywood personas

https://material.uplabs.com/posts/user-profile-concept

screen

Download

Buy Me a Coffee at ko-fi.com

In your module Download

compile 'com.github.florent37:diagonallayout:1.0.9'

Logs

1.0.1

  • Added Elevation

1.0.2

  • Can setup the diagonal on top or bottom
  • Fixed angle calculation
  • Added flag attributes top|bottom|left|right

1.0.3

Thanks to ZieIony

  • Changed clipping method
  • Changed shadow casting method
  • Removed unnecessary content layout
  • added support for padding

1.0.4

  • Removed :gravity
  • Added :position & direction

Credits

Author: Florent Champigny Blog : http://www.tutos-android-france.com/

Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/

Android app on Google Play Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

License

Copyright 2016 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].