Tworzenie widoku z wykorzystaniem Material Design

Czas najwyższy by zająć się trochę warstwą graficzną aplikacji. Trzeba ustalić jakąś paletę kolorów i ogólny wygląd. Przygotuję dziś profil użytkownika i aktywność z listą znajomych. Wszystko z wykorzystaniem zasad Material Design.

Dobór kolorów

Na początku trzeba przemyśleć z jakich braw chcę korzystać w aplikacji. Odpowiednio dobrany kolor potrafi przyciągnąć użytkownika, a nawet sprawi, że pozostanie on na dłużej. Wbrew pozorom przygotowanie projektu graficznego jest bardzo trudną częścią tworzenia aplikacji. Efekty pracy na tym etapie decydują jakie będzie pierwsze wrażenie użytkownika. Podobno można zakochać się od pierwszego wejrzenia, sprawmy by potencjalny użytkownik zakochał się w aplikacji jeszcze przed jej użyciem.

 

Zdecydowałem użyć się odcieni zieleni. Kolor zielony dobrze nam się kojarzy. Spójrz przez okno – co widzisz? – zieleń, wiosna, każdy lubi wiosnę, wszystko budzi się do życia. O tak! Użytkownik patrzący na aplikacje w zielonej szacie graficznej będzie miał dobre skojarzenia.

Jak już wspomniałem aplikacje tworzę w stylu Material, więc i ta zieleń powinna być odpowiednia do tego stylu. Bazową zielenią jest zieleń o hexie: #8BC34A

Zamieszczam całą paletę ze strony https://material.io/

Czas stylizować

Zacząłem od profilu użytkownika, na którym znajdzie się odnośnik do listy znajomych, domyślny avatar (na razie bez możliwości zmiany jest to potrzeba niskiej ważności), imię i nazwisko użytkownika, wiek i miasto, w którym mieszka i informacja o tym ile dni jest zarejestrowany w aplikacji.

Widoki do wersji finalnej będą na pewno aktualizowane jeszcze nie raz, ponieważ ten, który widzisz poniżej stworzyłem wczoraj, a już mi się nie podoba i wiele bym w nim zmienił.

Kod klasy UserActivity wygląda następująco:

private int userID = 2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_user);

    DatabaseHandler db = new DatabaseHandler(this);

    User user = db.getUser(userID);

    String name = user.getName() + " " + user.getSurname();
    Integer age = calculateYears(user.getDayOfBirthday());
    String city = "City: " + user.getCity();
    Integer daysInApp = calculateDays(user.getCreatedAt());

    String ageString = "Age: " + age;
    String daysInAppString = "You are " + daysInApp + " days in here.";

    TextView nameText = (TextView)findViewById(R.id.nameText);
    nameText.setText(name);

    TextView ageText = (TextView)findViewById(R.id.ageText);
    ageText.setText(ageString);

    TextView cityText = (TextView)findViewById(R.id.cityText);
    cityText.setText(city);

    TextView diApp = (TextView)findViewById(R.id.diAppText);
    diApp.setText(daysInAppString);
}

public void goFriends(View view) {
    Intent intent = new Intent(this, FriendsActivity.class);
    intent.putExtra("userID", userID);
    startActivity(intent);
}

private Integer calculateYears(String dataFrom) {
    String[] parts = dataFrom.split(", ");
    LocalDate df = new LocalDate(Integer.parseInt(parts[0]), Integer.parseInt(parts[1]),
            Integer.parseInt(parts[2]));
    LocalDate now = new LocalDate();
    Years yearsIns = Years.yearsBetween(df, now);
    Integer years = yearsIns.getYears();
    return years;
}

private Integer calculateDays(String date) {
    String[] parts = date.split(", ");
    LocalDate dt = new LocalDate(Integer.parseInt(parts[0]), Integer.parseInt(parts[1]),
            Integer.parseInt(parts[2]));
    LocalDate now = new LocalDate();
    Days daysIns = Days.daysBetween(dt, now);
    Integer days = daysIns.getDays();
    return days;

Lista znajomych nie wygląda na razie w ogóle, jest podstawowym widokiem ListView, ale rzecz, która może Cię zainteresować to kod podstawiający dane do widoku:

private ListView listView;
private ArrayAdapter<String> adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_friends);
Bundle bundle = getIntent().getExtras();

int userID = bundle.getInt("userID");

DatabaseHandler db = new DatabaseHandler(this);

List<User> friendsList = db.getAllFriends(userID);

listView = (ListView) findViewById(R.id.friendsListView);

ArrayList<String> friendsL = new ArrayList<String>();

for (User user : friendsList) {
friendsL.add(user.getName() + " " + user.getSurname());
}

adapter = new ArrayAdapter<String>(this, R.layout.row, friendsL);

listView.setAdapter(adapter);

db.closeDB();
}

Tworzenie oprawy graficznej aplikacji to trudny proces, w którym trzeba wykazać się cierpliwością kiedy poprawia się po raz któryś wygląd jakiegoś elementu, bo znowu wygląda źle :). Proces ten daje jednak wiele satysfakcji i jest ważnym czynnikiem potencjalnego sukcesu aplikacji.  

Reklama