Samsung OneUi Design

A library for Android, which makes your app look like Samsung's OneUI. In this library there is a theme which will apply for each View (see Progress) in your layout. This library has been tested in AndroidStudio, but should work in other IDEs too. You can try out the latest example here.

Excuse my bad english, feel free to correct it. :)

• Screenshots
• Installation
• Usage
  • DrawerLayout
  • ToolbarLayout
  • OptionButton
  • OptionGroup
  • DrawerDivider
  • SplashViewSimple
  • SplashViewAnimated
  • SwitchBar
  • SeekBar
  • ProgressBar
  • Button
  • ColorPickerDialog
  • Icons
  • Color theme
    • Entire App
    • Single/Multiple activities
    • Via Code
  • App Icon
• Progress

Screenshots

Installation

with Jitpack:

1. Add jitpack to build.gradle (Project: ...)

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
	}
}

2. Add the dependency to build.gradle (Module: ...)

dependencies {
	implementation 'com.github.Yanndroid:SamsungOneUi:1.2.0'
    ...
}

3. Apply the theme in AndroidManifest.xml

<application
    ...
    android:theme="@style/SamsungTheme"
    >
    ...
</application>

with Github Packages:

1. Create a new token with read:packages permission.
2. Add the dependency to build.gradle (Module: ...)

repositories {
    maven {
        url = uri("https://maven.pkg.github.com/yanndroid/SamsungOneUi")
            credentials {
                username = "your username"
                password = "your token"
            }
    }
}


dependencies {
    implementation 'de.dlyt.yanndroid:samsung:1.2.0'
    ...
}

3. Apply the theme in AndroidManifest.xml

<application
    ...
    android:theme="@style/SamsungTheme"
    >
    ...
</application>

Usage

In general most of the views (see Progress) are styled automatically when you set android:theme="@style/SamsungTheme" in AndroidManifest.xml.

DrawerLayout

"Ready-to-go" DrawerLayout with collapsing toolbar.

<de.dlyt.yanndroid.samsung.layout.DrawerLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:drawer_icon="..."
    app:drawer_viewId="@id/viewindrawer"
    app:toolbar_subtitle="..."
    app:toolbar_title="..."
    app:toolbar_expandable="...">

    <View
        android:id="@+id/viewindrawer"
        ... />

    <!--other views-->

</de.dlyt.yanndroid.samsung.layout.DrawerLayout>

The view with the ID specified in app:drawer_viewId="..." will be shown in the drawer and the rest of the children on the main screen.

app:toolbar_title="..." and app:toolbar_subtitle="..." are setting the title and subtitle in the toolbar. If nothing is set for the subtitle, the toolbar will adjust the title position to match the space. The toolbar is expandable by default, it can be changed with app:toolbar_expandable="...".

The drawable in app:drawer_icon="..." is the little icon at the top right in the drawer pane. There are already some stock Samsung icons included in the library.

If you want the toolbar collapsing when you scroll the content you should either use a NestedScrollView as view child or set android:nestedScrollingEnabled="true" on the view you want the toolbar to collapse on scroll.

Methods

Return the toolbar, useful for setSupportActionBar().

public Toolbar getToolbar()

OnClickListener for the DrawerIcon (the icon in the top right corner of the drawer pane).

public void setDrawerIconOnClickListener(OnClickListener listener)

Set the title of the toolbar.

public void setToolbarTitle(String title)

Set the subtitle of the toolbar.

public void setToolbarSubtitle(String subtitle)

Set the subtitle color of the toolbar.

public void setToolbarSubtitleColor(int color)

Expand or collapse the toolbar with an optional animation.

public void setToolbarExpanded(boolean expanded, boolean animate)

Set the toolbar expandable.

public void setToolbarExpandable(boolean expandable)

Show/hide the badges on the DrawerIcon and NavigationIcon.

public void showIconNotification(boolean navigationIcon, boolean drawerIcon)

Open/close the drawer pane with an optional animation.

public void setDrawerOpen(Boolean open, Boolean animate)

ToolbarLayout

Basically the same as DrawerLayout but without the drawer.

<de.dlyt.yanndroid.samsung.layout.ToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:title="..."
    app:subtitle="..."
    app:navigationIcon="..."
    app:expandable="..."
    >

    <!--children-->

</de.dlyt.yanndroid.samsung.layout.ToolbarLayout>

app:navigationIcon="..." is the NavigationIcon of the toolbar. There are already some stock Samsung icons included in the library, like a drawer and back icon.

The toolbar is expandable by default, it can be changed with app:expandable="...".

Same as the DrawerLayout you need to use a NestedScrollView or android:nestedScrollingEnabled="true".

Methods

Return the toolbar, useful for setSupportActionBar().

public Toolbar getToolbar()

Set the title of the toolbar.

public void setTitle(String title)

Set the subtitle of the toolbar.

public void setSubtitle(String subtitle)

Set the subtitle color.

public void setSubtitleColor(int color)

Expand or collapse the toolbar with an optional animation.

public void setExpanded(boolean expanded, boolean animate)

Set the toolbar expandable.

public void setExpandable(boolean expandable)

Clicklistener for the NavigationIcon (Back icon).

public void setNavigationOnClickListener(OnClickListener listener)

Show/hide the badges on the NavigationIcon.

public void showNavIconNotification(boolean showNotification)

Set a drawable for the NavigationIcon.

public void setNavigationIcon(Drawable navigationIcon)

OptionButton

These are the buttons you can see in the drawer of Samsung apps.

<de.dlyt.yanndroid.samsung.drawer.OptionButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="..."
    app:text="..."
    app:selected="..."
    app:counter="..."
    app:counterEnabled="..." />

app:icon="..." the drawable icon and app:text="..." the text. app:selected="..." is to show the OptionButton as selected (colored, bold text), it's false by default. app:counterEnabled="..." and app:counter="..." are there for the counter, which is disabled by default. If you only set app:counter="..." it still will be hidden. You don't need to add all attributes.

Methods

Set/get the icon and text.

public String getText()
public void setText(String text)

public void setIcon(Drawable icon)

Manage the counter.

public Integer getCounter()
public void setCounter(Integer integer)
public void setCounterEnabled(Boolean enabled)
public void toggleCounterEnabled()
public Boolean isCounterEnabled()

Control the state (colored, bold text).

public void setButtonSelected(Boolean selected)
public void toggleButtonSelected()
public Boolean isButtonSelcted()

Enable/disable the OptionButton.

public void setButtonEnabled(Boolean enabled)

OptionGroup

OptionButton and OptionGroup are working together like RadioButton and RadioGroup. It will select (colored, bold text) a OptionButton on click.

<de.dlyt.yanndroid.samsung.drawer.OptionGroup
    android:id="@+id/optiongroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:selectedOptionButton="@id/ob1">

    <de.dlyt.yanndroid.samsung.drawer.OptionButton
        android:id="@+id/ob1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:icon="@drawable/ic_samsung_info"
        app:text="Option 1" />

    <de.dlyt.yanndroid.samsung.drawer.OptionButton
        android:id="@+id/ob2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:icon="@drawable/ic_samsung_info"
        app:text="Option 2" />

    <de.dlyt.yanndroid.samsung.drawer.OptionButton
        android:id="@+id/ob3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:icon="@drawable/ic_samsung_info"
        app:text="Option 3" />

</de.dlyt.yanndroid.samsung.drawer.OptionGroup>

app:selectedOptionButton="..." will select (colored, bold text) the OptionButton with this id. This view can also have other children, for example DrawerDivider.

Methods

Select an OptionButton with either the view, id or position.

public void setSelectedOptionButton(OptionButton optionButton)
public void setSelectedOptionButton(Integer id)
public void setSelectedOptionButton(int position)

Get the currently selected OptionButton.

public OptionButton getSelectedOptionButton()

Listener which will provide you view, id and position of the clicked OptionButton.

public void setOnOptionButtonClickListener(OnOptionButtonClickListener listener)

DrawerDivider

A divider between the OptionButtons on the drawer. It's the same divider you can find in almost any Samsung app drawer.

<de.dlyt.yanndroid.samsung.drawer.Divider
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_marginHorizontal="24dp"
    android:layout_marginVertical="2dp" />

Alternatively you could use this, it's easier and all set but less customizable:

<View style="@style/DrawerDividerStyle" />

SplashViewSimple

Simple Splash view. (I think Samsung removed the splashscreen of their apps since OneUI 3 but in former times it was still there.)

<de.dlyt.yanndroid.samsung.layout.SplashViewSimple
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:image="..."
    app:text="..." />

app:image="..."is the icon and app:text="..." the text underneath the icon.

Methods

public void setImage(Drawable mImage)

Sets the icon drawable

public void setText(String mText)

Sets the text of the splash textview

public String getText()

Returns the text of the splash textview

SplashViewAnimated

An animated splash screen view like the one in the GalaxyStore.

<de.dlyt.yanndroid.samsung.layout.SplashViewAnimated
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:background_image="..."
    app:foreground_image="..."
    app:text="..." />

app:background_image="..." only the background of your icon and app:foreground_image="..." only the foreground, which will have a shake animation. app:text="..." will be the text under the icon. It has a very similar font and color as the GalaxyStore splash text.

Methods

public void setImage(Drawable foreground, Drawable background)

Sets the icon fore- and background

public void setText(String mText)

Sets the text of the splash textview

public String getText()

Returns the text of the splash textview

public void startSplashAnimation()

Starts the shake animation of the foreground

public void clearSplashAnimation()

Clears the animation

public void setSplashAnimationListener(Animation.AnimationListener listener)

Listener for the splash animation

SwitchBar

A SwitchBar like in the wifi or bluetooth settings.

<de.dlyt.yanndroid.samsung.SwitchBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Methods

On and Off text of the Switchbar.

public void setSwitchBarText(int i, int i2)

Enable and disable the Switchbar.

public void setEnabled(boolean z)

Visibility of the ProgressBar in the Switchbar.

public void setProgressBarVisible(boolean z)

Switchbar Listener.

public void addOnSwitchChangeListener(OnSwitchChangeListener onSwitchChangeListener)

SeekBar

A Seekbar like the brightness slider in the QS.

<de.dlyt.yanndroid.samsung.SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:seslSeekBarMode="expand" />

⚠️ You might need to set a vertical margin, in case the seekbar thumb is cut of.

If you don't want the expanding seekbar, you can use the default seekbar instead , as the style will also apply on this one.

Methods

Set a warning at progress i.

public void setOverlapPointForDualColor(int i)

Other methodes are the same as the normal Seekbar.

ProgressBar

The theme won't apply for the ProgressBar, so you need to set it manually:

style="@style/ProgressBarStyle.Horizontal"
style="@style/ProgressBarStyle.Horizontal.Large"
style="@style/ProgressBarStyle.Circle.Large"
style="@style/ProgressBarStyle.Circle"
style="@style/ProgressBarStyle.Circle.Small"
style="@style/ProgressBarStyle.Circle.Title"

Button

The first style is applied by default. The other two can be used with style="@style/ButtonStyle.Invert" and style="@style/ButtonStyle.Invert.Secondary".

ColorPickerDialog

A color picker dialog like in Samsung Notes.

Create dialog with mode (1 = Spectrum, 2 = Swatches) and fArr (starting color).

public ColorPickerDialog(Context context, int mode, float[] fArr)
public ColorPickerDialog(Context context, float[] fArr)

Show the dialog.

public void show()

Dismiss the dialog.

public void dismiss()

Close the dialog.

public void close()

Listener when "Done" is pressed.

public void setColorPickerChangeListener(ColorPickerChangedListener colorPickerChangedListener)

Example:

float[] scolor = new float[3];
Color.colorToHSV(Color.parseColor("#0381fe5"), scolor);

ColorPickerDialog mColorPickerDialog = new ColorPickerDialog(this, scolor);
mColorPickerDialog.setColorPickerChangeListener(new ColorPickerDialog.ColorPickerChangedListener() {
    @Override
    public void onColorChanged(int i, float[] fArr) {
        
    }

    @Override
    public void onViewModeChanged(int i) {

    }
});
mColorPickerDialog.show();

Icons

There are also some of the stock icons you can find in Samsung apps included in this library, and I will add more over time. You can use them with @drawable/ic_samsung_... and R.drawable.ic_samsung_....

See the icon list

ic_samsung_arrow_down
ic_samsung_arrow_left
ic_samsung_arrow_right
ic_samsung_arrow_up
ic_samsung_attach
ic_samsung_audio
ic_samsung_back
ic_samsung_book
ic_samsung_bookmark
ic_samsung_brush
ic_samsung_camera
ic_samsung_close
ic_samsung_convert
ic_samsung_copy
ic_samsung_delete
ic_samsung_document
ic_samsung_download
ic_samsung_drawer
ic_samsung_edit
ic_samsung_equalizer
ic_samsung_favorite
ic_samsung_group
ic_samsung_help
ic_samsung_image
ic_samsung_image_2
ic_samsung_import
ic_samsung_info
ic_samsung_keyboard
ic_samsung_lock
ic_samsung_mail
ic_samsung_maximize
ic_samsung_minimize
ic_samsung_minus
ic_samsung_more
ic_samsung_move
ic_samsung_mute
ic_samsung_page
ic_samsung_pause
ic_samsung_pdf
ic_samsung_pen
ic_samsung_pen_calligraphy
ic_samsung_pen_calligraphy_brush
ic_samsung_pen_eraser
ic_samsung_pen_fountain
ic_samsung_pen_marker
ic_samsung_pen_marker_round
ic_samsung_pen_pencil
ic_samsung_play
ic_samsung_plus
ic_samsung_rectify
ic_samsung_redo
ic_samsung_remind
ic_samsung_rename
ic_samsung_reorder
ic_samsung_restore
ic_samsung_save
ic_samsung_scan
ic_samsung_search
ic_samsung_selected
ic_samsung_send
ic_samsung_settings
ic_samsung_share
ic_samsung_shuffle
ic_samsung_smart_view
ic_samsung_stop
ic_samsung_tag
ic_samsung_text
ic_samsung_text_2
ic_samsung_time
ic_samsung_undo
ic_samsung_unlock
ic_samsung_voice
ic_samsung_volume
ic_samsung_warning
ic_samsung_web_search.xml

 

Color theme

The default color of the style is the same blue as Samsung (see Screenshots). But like Samsung has different colors for different apps, you too can use other colors which will apply on the entire App and even on the App Icon. In this library there are there are three different ways to do that and all three can be used simultaneously:

1. Entire App

This methode will apply the color theme on the entire app and on the app icon. You need to add these three colors in your colors.xml :

<color name="primary_color">...</color>
<color name="secondary_color">...</color>
<color name="primary_dark_color">...</color>

These colors should have approximately the same color but with a different brightness. secondary_color the brightest, then primary_color and the darkest primary_dark_color.

Here are some presets (if you want I can make more):

• Yellow like MyFiles App (also used in FreshHub):

<color name="primary_color">#fff3a425</color>
<color name="secondary_color">#ffffb949</color>
<color name="primary_dark_color">#ffbd7800</color>

• Dark green like Calendar App:

<color name="primary_color">#ff008577</color>
<color name="secondary_color">#ff009e7c</color>
<color name="primary_dark_color">#ff00574b</color>

• Light green like Calculator App:

<color name="primary_color">#ff68b31a</color>
<color name="secondary_color">#ff7fa87f</color>
<color name="primary_dark_color">#ff569415</color>

• Light red which I personally like:

<color name="primary_color">#ffff034a</color>
<color name="secondary_color">#ffff3d67</color>
<color name="primary_dark_color">#ffde0043</color>

2. Single/Multiple activities

If you want to use different colors for a single (or multiple, but not all) activities, this is also possible. The difference here is that this will only apply for the activities you want. Add the three colors (see Entire App) in a theme in themes.xml:

<style name="ThemeName" parent="SamsungTheme">
    <item name="colorPrimary">#fff3a425</item>
    <item name="colorSecondary">#ffffb949</item>
    <item name="colorPrimaryDark">#ffbd7800</item>
</style>

Then apply it on the activities you want with android:theme="@style/ThemeName" in AndroidManifest.xml.

3. Via Code

This methode allows you to change the color of your theme dynamicly within your app. It's based on this idea. In your activity onCreate add this line at the top before setContentView(...):

new ThemeColor(this);

This will apply the color theme at launch. If you want to chnage the color you can use these functions:

ThemeColor.setColor(Activity activity, int red, int green, int blue)
ThemeColor.setColor(Activity activity, float red, float green, float blue)
ThemeColor.setColor(Activity activity, float[] hsv)

The color you apply with these functions will apply on every activity with new ThemeColor(this) at the top.

App Icon

The most app icons of Samsung apps are made of one solid color as background and a white icon as forground. Useually there is even a little part/detail of the foreground with a similar color as the background.

I would suggest you to use @color/primary_color for the background color and either @color/launcher_foreground_detail_color , @color/secondary_color or @color/primary_dark_color for the foreground "detail" color, so your color theme applys for the app icon too.
My sample app icon for example:

Progress

• Cardview
• Checkbox
• Switch
• Radiobutton
• Progressbar circle
• Progressbar horizontal
• Seekbar
• Drawer
• Drawer divider
• SeslToggleSwitch
• SeslProgressbar
• SeslSwitchbar
• SeslSeekbar
• Collapsing toolbar
• Rtl
• Landscape support
• Tablet support
• Desktop support (DeX)*
• Color picker dialog *
• Button *
• Spinner *
• Menu (in progress)
• Snackbar (in progress)
• Dialog
• Bottomsheet
• Tablayout
• Viewpager
• Preferences
• Tooltip
• About screen
• (Textview)
• (Edittext)

*needs improvement

Special thanks to:

• leonbcode for github actions, so this library is always up-to-date.
• nfauv2001 for helping me out with my english.